@globalpayments/vega 2.45.0 → 2.47.0

package/dist/cjs/content-state-605de6a3.js

@@ -0,0 +1,3628 @@
+'use strict';
+
+const changeManager = require('./change-manager-a297e4d2.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-d5826bff.js');
+const vegaInternalEventId = require('./vega-internal-event-id-dc866d43.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const typeGuard = require('./type-guard-4ba85fdc.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
+const darkModeStyleController = require('./dark-mode-style-controller-c93b94d2.js');
+
+exports.InternalAnnotationTypeEnum = void 0;
+(function (InternalAnnotationTypeEnum) {
+  InternalAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
+  InternalAnnotationTypeEnum["CLEAR_FORMATTING"] = "CLEAR_FORMATTING";
+  InternalAnnotationTypeEnum["LINK_GROUP"] = "LINK_GROUP";
+})(exports.InternalAnnotationTypeEnum || (exports.InternalAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+class Annotation {
+}
+
+exports.BlockAnnotationTypeEnum = void 0;
+(function (BlockAnnotationTypeEnum) {
+  BlockAnnotationTypeEnum["ALIGNMENT"] = "ALIGNMENT";
+  BlockAnnotationTypeEnum["TEXT_STYLE"] = "TEXT_STYLE";
+  BlockAnnotationTypeEnum["INDENT"] = "INDENT";
+})(exports.BlockAnnotationTypeEnum || (exports.BlockAnnotationTypeEnum = {}));
+/**
+ * BlockAnnotation is an abstract class that represents a block annotation.
+ */
+class BlockAnnotation extends Annotation {
+}
+
+/**
+ * This class is responsible for keeping track of the DOM elements and their corresponding entities.
+ */
+class StateEntityRenderingRegistry {
+  constructor() {
+    this.domToEntity = new WeakMap();
+    this.entityToDOM = new WeakMap();
+  }
+  /**
+   * Registers a DOM element and its corresponding entity.
+   *
+   * @param {HTMLElement} dom The DOM element to register.
+   * @param {RTEBlock | RTENode} entity The entity to register.
+   */
+  register(dom, entity) {
+    this.domToEntity.set(dom, entity);
+    this.entityToDOM.set(entity, dom);
+  }
+  /**
+   * Retrieves the entity corresponding to a DOM element.
+   *
+   * @param {HTMLElement} dom The DOM element to retrieve the entity for.
+   * @returns {Nullable<RTEBlock | RTENode>} The entity corresponding to the DOM element, or null if not found.
+   */
+  getEntityByDOM(dom) {
+    return this.domToEntity.get(dom);
+  }
+  /**
+   * Retrieves the DOM element corresponding to an entity.
+   *
+   * @param {RTEBlock | RTENode} entity The entity to retrieve the DOM element for.
+   * @returns {Nullable<HTMLElement>} The DOM element corresponding to the entity, or null if not found.
+   */
+  getDOMByEntity(entity) {
+    return this.entityToDOM.get(entity);
+  }
+  /**
+   * Delete the dirty element to entity ref.
+   *
+   * @example Convert text node to the link node, the old span will change to the link wrapper element, and there will be a new text span, so we need remove the old span ref from the map.
+   * @param {HTMLElement} dom - The dirty element ref.
+   */
+  removeDirtyDomRef(dom) {
+    this.domToEntity.delete(dom);
+  }
+}
+const stateEntityRenderingRegistry = new StateEntityRenderingRegistry();
+
+exports.ModifyContentActionType = void 0;
+(function (ModifyContentActionType) {
+  ModifyContentActionType["DELETE_CHILD"] = "DELETE_CHILD";
+  ModifyContentActionType["DELETE_NEST_LIST"] = "DELETE_NEST_LIST";
+  ModifyContentActionType["UPDATE_TEXT"] = "UPDATE_TEXT";
+  ModifyContentActionType["REPLACE_SELECTED_TEXT"] = "REPLACE_SELECTED_TEXT";
+  ModifyContentActionType["APPEND_CHILD_NODES"] = "APPEND_CHILD_NODES";
+  ModifyContentActionType["INSERT_BLOCKS_AFTER"] = "INSERT_BLOCKS_AFTER";
+  ModifyContentActionType["INSERT_BLOCKS_BEFORE"] = "INSERT_BLOCKS_BEFORE";
+  ModifyContentActionType["INSERT_NODES_AFTER"] = "INSERT_NODES_AFTER";
+  ModifyContentActionType["INSERT_NODES_BEFORE"] = "INSERT_NODES_BEFORE";
+  ModifyContentActionType["SPLIT_BLOCK_WITH_NODE"] = "SPLIT_BLOCK_WITH_NODE";
+  ModifyContentActionType["REPLACE_CHILD_NODES"] = "REPLACE_CHILD_NODES";
+  ModifyContentActionType["REPLACE_NEST_LIST"] = "REPLACE_NEST_LIST";
+  ModifyContentActionType["MERGE_TWO_BLOCKS_NODES"] = "MERGE_TWO_BLOCKS_NODES";
+  ModifyContentActionType["BREAK_SINGLE_BLOCK"] = "BREAK_SINGLE_BLOCK";
+  ModifyContentActionType["LINE_BREAK_SINGLE_BLOCK"] = "LINE_BREAK_SINGLE_BLOCK";
+  ModifyContentActionType["LINE_BREAK_MULTIPLE_BLOCKS"] = "LINE_BREAK_MULTIPLE_BLOCKS";
+  ModifyContentActionType["TRANSFORM_LIST_BLOCK"] = "TRANSFORM_LIST_BLOCK";
+  ModifyContentActionType["TRANSFORM_PARAGRAPH_BLOCK"] = "TRANSFORM_PARAGRAPH_BLOCK";
+  ModifyContentActionType["DELETE_BLOCK_CONTENT"] = "DELETE_BLOCK_CONTENT";
+  ModifyContentActionType["INSERT_IMAGE_TO_BLOCK"] = "INSERT_IMAGE_TO_BLOCK";
+  ModifyContentActionType["UPDATE_IMAGE_NODE_URL"] = "UPDATE_IMAGE_NODE_URL";
+})(exports.ModifyContentActionType || (exports.ModifyContentActionType = {}));
+/**
+ * Abstract class for update node content, delete node, insert node
+ */
+class ModifyContentAction {
+  constructor() {
+    this.isFlushable = false;
+  }
+}
+
+/**
+ * Annotation to make block with horizontal alignment
+ */
+class HorizontalAlignmentAnnotation extends BlockAnnotation {
+  constructor(textAlign) {
+    super();
+    this.type = exports.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 [exports.BlockAnnotationTypeEnum.ALIGNMENT, new HorizontalAlignmentAnnotation(textAlign)];
+  }
+  /**
+   * 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 = exports.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 [exports.BlockAnnotationTypeEnum.INDENT, new IndentAnnotation(indent)];
+  }
+  /**
+   * Generate the JSON item of the annotation
+   *
+   * @returns {Nullable<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 strategies registry, contains static methods `register`, `get` and `getStrategyAndExecute`.
+ */
+class ActionHandleStrategyRegistry {
+  /**
+   * Bind a specific strategy to a special action type of the rich text node.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} targetClass - The rich text node class name.
+   * @param {ActionHandleStrategy} strategy - The action handle strategy instance.
+   */
+  static register(actionType, targetClass, strategy) {
+    if (!this.registry.has(targetClass)) {
+      this.registry.set(targetClass, new Map());
+    }
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    this.registry.get(targetClass).set(actionType, strategy);
+  }
+  /**
+   * Get the special strategy that handle the action logic.
+   *
+   * @typedef T generic type
+   * @typedef target generic type
+   * @typedef R generic type
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} targetClass - The rich text node class name.
+   * @returns {Nullable<ActionHandleStrategy<T, target, R>>} - The action handle strategy instance if defined.
+   */
+  static get(actionType, targetClass) {
+    const strategyMap = this.registry.get(targetClass);
+    if (strategyMap) {
+      return strategyMap.get(actionType);
+    }
+  }
+  /**
+   * Get the special strategy from the registry and run the strategy execute method.
+   *
+   * @typedef R generic type
+   * @param {ModifyContentAction | AnnotationAction} action - The update node action instance.
+   * @param {RTENode | RTEBlock | VegaRTEContent} RTEInstance - The rich text editor node.
+   * @returns {R | undefined} The return value of the strategy method execute invoke result.
+   */
+  static executeTheStrategy(action, RTEInstance) {
+    const actionType = action instanceof ModifyContentAction ? action.type : action.constructor.name;
+    const strategy = ActionHandleStrategyRegistry.get(actionType, RTEInstance.constructor.name);
+    if (strategy) {
+      return strategy.execute(action, RTEInstance);
+    }
+    else {
+      globalSlimmerRegistry.LogUtility.error(`Type ${actionType} action handle strategy is not registered in class ${RTEInstance.constructor.name}`);
+    }
+  }
+}
+ActionHandleStrategyRegistry.registry = new Map();
+
+/**
+ * Abstract class for block
+ */
+class RTEBlock {
+  constructor(id) {
+    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);
+    }
+  }
+  /**
+   * 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
+   *
+   * @typedef T generic type
+   * @param {keyof typeof BlockAnnotationTypeEnum} type - Annotation type
+   * @returns {Nullable<T>} - 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.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 ModifyContentAction) {
+      ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+    }
+    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);
+  }
+}
+
+var NodeTypeEnum;
+(function (NodeTypeEnum) {
+  NodeTypeEnum["TEXT"] = "TEXT";
+  NodeTypeEnum["IMAGE"] = "IMAGE";
+})(NodeTypeEnum || (NodeTypeEnum = {}));
+/**
+ * Abstract class for all nodes
+ */
+class RTENode {
+  constructor(id, annotationMap) {
+    this.annotationMap = new Map();
+    this.id = id;
+    if (annotationMap) {
+      this.annotationMap = annotationMap;
+    }
+  }
+  /**
+   * Get annotation by type
+   *
+   * @typedef T generic type
+   * @param {RTENodeAnnotationMapKey} type - Annotation type
+   * @returns {Nullable<T>} - Annotation
+   */
+  getAnnotationByType(type) {
+    return this.annotationMap.get(type);
+  }
+  /**
+   * Delete annotation by type
+   *
+   * @param {RTENodeAnnotationMapKey} type - Annotation type
+   */
+  deleteAnnotationByType(type) {
+    this.annotationMap.delete(type);
+    this.flushChange();
+  }
+  /**
+   * Apply action to node
+   *
+   * @param {AnnotationAction} action - Annotation action
+   * @returns {this} - Node
+   */
+  apply(action) {
+    this.doApply(action);
+    if (action.isFlushable) {
+      this.flushChange();
+    }
+    return this;
+  }
+  /**
+   * apply annotation action or modify content action
+   *
+   * @param {AnnotationAction | ModifyContentAction} action annotation type action or modify content type action
+   */
+  doApply(action) {
+    if (action instanceof ModifyContentAction) {
+      this.doModifyActionApply(action);
+    }
+    else {
+      this.doAnnotationActionApply(action);
+    }
+  }
+  /**
+   * Flush the value change
+   */
+  flushChange() {
+    const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (domNode) {
+      const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
+      if (nodeSubject) {
+        changeManager.ChangeManager.notify(nodeSubject, {});
+      }
+    }
+  }
+}
+
+exports.NodeAnnotationTypeEnum = void 0;
+(function (NodeAnnotationTypeEnum) {
+  NodeAnnotationTypeEnum["BOLD"] = "BOLD";
+  NodeAnnotationTypeEnum["ITALIC"] = "ITALIC";
+  NodeAnnotationTypeEnum["UNDERLINE"] = "UNDERLINE";
+  NodeAnnotationTypeEnum["STRIKETHROUGH"] = "STRIKETHROUGH";
+  NodeAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
+  NodeAnnotationTypeEnum["IMAGE"] = "IMAGE";
+  NodeAnnotationTypeEnum["CODE"] = "CODE";
+  NodeAnnotationTypeEnum["TEXT_COLOR"] = "TEXT_COLOR";
+  NodeAnnotationTypeEnum["LINK"] = "LINK";
+})(exports.NodeAnnotationTypeEnum || (exports.NodeAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+class NodeAnnotation extends Annotation {
+}
+
+/**
+ * Annotation for image
+ */
+class ImageAnnotation extends NodeAnnotation {
+  constructor(size = 'md', alt) {
+    super();
+    this.type = exports.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 [exports.NodeAnnotationTypeEnum.IMAGE, new ImageAnnotation(size, 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%' };
+      }
+    }
+  }
+}
+
+/**
+ * The base action handle strategy class, use to modify the rich text node content or modify the annotation.
+ */
+class ActionHandleStrategy {
+  /**
+   * Public method to invoke the handle logic.
+   *
+   * @typedef R generic type
+   * @param {ModifyContentAction | AnnotationAction} action - The action instance. Contains the action type and necessary params.
+   * @param {RTENode | RTEBlock | VegaRTEContent} target - The rich text node instance that will be modified.
+   * @returns {R} - The invoke result in special strategy.
+   */
+  execute(action, target) {
+    globalSlimmerRegistry.LogUtility.log(`Executing action ${action.constructor.name} on ${target.constructor.name} ${target['id']}`);
+    return this.handleAction(action, target);
+  }
+  /**
+   * Checks if the caret position is at the end of a specified RTETextNode.
+   *
+   * @param {RTETextBlock} textBlock - `RTETextBlock` - a text block.
+   * @param {RTETextNode} node - `RTETextNode` - a node representing an image in a rich text editor.
+   * @param {number} startOffset - The position within the text node where the caret is located.
+   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTETextNode.
+   */
+  isCaretPositionAtTextBlockEnd(textBlock, node, startOffset) {
+    const lastNode = textBlock.nodes[textBlock.nodes.length - 1];
+    return node === lastNode && (node.isEmpty() || startOffset === lastNode.text.length);
+  }
+  /**
+   * Checks if the caret position is at the start of a specified RTETextNode.
+   *
+   * @param {RTETextBlock} textBlock - `RTETextBlock` - a text block.
+   * @param {RTETextNode} node - `RTETextNode` - a node representing an image in a rich text editor.
+   * @param {number} startOffset - The position within the text node where the caret is located.
+   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTETextNode.
+   */
+  isCaretPositionAtTextBlockStart(textBlock, node, startOffset) {
+    return node === textBlock.nodes[0] && startOffset === 0;
+  }
+  /**
+   * Checks if the caret position is at the start of a specified RTEImageNode.
+   *
+   * @param {RTEImageBlock} target - The image block.
+   * @param {RTEImageNode} node - `RTEImageNode` - a node representing an image in a rich text editor.
+   * @param {number} startOffset - The position within the text node where the caret is located.
+   * @returns {boolean} a boolean value, which indicates whether the caret position is at the start of the RTEImageNode.
+   */
+  isCaretPositionAtImageBlockStart(target, node, startOffset) {
+    return node === target.nodes[0] && startOffset === 0;
+  }
+  /**
+   * Checks if the caret position is at the end of a given RTEImageNode.
+   *
+   * @param {RTEImageBlock} target - The image block.
+   * @param {RTEImageNode} node - `node` is a RTEImageNode
+   * @param {number} startOffset - The position within the `RTEImageNode` where the caret is located.
+   * @returns {boolean}Returns a boolean value indicating whether the caret position is at the end of the `RTEImageNode`.
+   */
+  isCaretPositionAtImageBlockEnd(target, node, startOffset) {
+    const lastNode = target.nodes[target.nodes.length - 1];
+    return node === lastNode && startOffset === 1;
+  }
+}
+
+/**
+ * Update the image node annotation map strategy.
+ */
+class ImageSetAnnotationMapStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const annotation = action.toAnnotation();
+    target.annotationMap.set(annotation.type, annotation);
+  }
+}
+
+/**
+ * The image node update property url strategy.
+ */
+class ImageUpdateUrlStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    target.url = action.url;
+  }
+}
+
+/**
+ * Abstract class for annotation actions
+ */
+class AnnotationAction {
+}
+
+/**
+ * Image node
+ */
+class RTEImageNode extends RTENode {
+  constructor(id, url, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = NodeTypeEnum.IMAGE;
+    this.url = url;
+    this.parentBlock = parentBlock;
+  }
+  /**
+   * Converts a VegaRTEImageNode into an RTEImageNode by mapping nodes and creating annotations.
+   *
+   * @param {VegaRTEImageNode} node - The node to be converted.
+   * @param {RTEImageBlock} parentBlock - The parent block
+   * @returns {RTEImageNode} An instance of `RTEImageBlock`
+   */
+  static from(node, parentBlock) {
+    const imageNode = new RTEImageNode(node.id, node.url, parentBlock);
+    let annotations;
+    if (!node.annotations || Object.keys(node.annotations).length === 0) {
+      annotations = { size: 'md' };
+    }
+    else {
+      annotations = node.annotations;
+    }
+    imageNode.annotationMap = new Map(Object.keys(annotations)
+      .map(() => ImageAnnotation.from(annotations.size, annotations.alt))
+      .filter(typeGuard.isNonNullable));
+    return imageNode;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    const imageAnnotation = this.annotationMap.get(exports.NodeAnnotationTypeEnum.IMAGE);
+    const annotations = {};
+    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size) {
+      annotations.size = imageAnnotation.size;
+    }
+    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt) {
+      annotations.alt = imageAnnotation.alt;
+    }
+    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    const strategy = ActionHandleStrategyRegistry.get(AnnotationAction.name, RTEImageNode.name);
+    if (strategy) {
+      strategy.execute(action, this);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  doModifyActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.UPDATE_IMAGE_NODE_URL, RTEImageNode.name, new ImageUpdateUrlStrategy());
+  ActionHandleStrategyRegistry.register(AnnotationAction.name, RTEImageNode.name, new ImageSetAnnotationMapStrategy());
+})();
+
+/**
+ * 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 = exports.ModifyContentActionType.DELETE_CHILD;
+    this.entityToBeRemoved = childNode;
+  }
+}
+
+/**
+ * The delete node content contains some common functions that used for image block delete the image node or text block delete text node.
+ */
+class BlockDeleteNodeContentStrategy extends ActionHandleStrategy {
+  /**
+   * 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);
+    }
+  }
+  /**
+   * 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);
+      }
+    }
+  }
+  /**
+   * 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') {
+      const listItems = currentBlock.blocks;
+      if (listItems) {
+        const lastListItem = listItems[listItems.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];
+      }
+    }
+  }
+  /**
+   * 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);
+      }
+    }
+  }
+}
+
+/**
+ * The image block delete the image node strategy.
+ */
+class BlockDeleteImageStrategy extends BlockDeleteNodeContentStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.deleteNodeContent(action, target);
+  }
+  /**
+   * Deletes content from a block node based on specific conditions.
+   *
+   * @param {DeleteBlockContentAction} action - Delete block content action
+   * @param {RTEImageBlock} target - The image block.
+   */
+  deleteNodeContent(action, target) {
+    const startContainerNode = action
+      .startContainerNode, startOffset = action.startOffset;
+    let previousNode = this.getPreviousNode(startContainerNode);
+    let nextNode = null;
+    if (startOffset === 1) {
+      const parentBlock = target;
+      if (this.isContentFirstNode(startContainerNode)) {
+        nextNode = this.getNextNode(startContainerNode);
+      }
+      if (parentBlock.nodes.length === 1) {
+        parentBlock.parent.apply(new RemoveChildAction(parentBlock));
+      }
+      else {
+        parentBlock.apply(new RemoveChildAction(startContainerNode));
+      }
+    }
+    else {
+      const shouldRemoveNode = previousNode;
+      if (shouldRemoveNode && shouldRemoveNode instanceof RTEImageNode) {
+        previousNode = this.getPreviousNode(shouldRemoveNode);
+        shouldRemoveNode.parentBlock.apply(new RemoveChildAction(shouldRemoveNode));
+        if (!previousNode) {
+          action.nextNode = startContainerNode;
+        }
+      }
+    }
+    if (previousNode) {
+      action.previousNode = previousNode;
+    }
+    else if (nextNode) {
+      action.nextNode = nextNode;
+    }
+  }
+}
+
+/** Append blocks or nodes to a block */
+class AppendChildNodesAction extends ModifyContentAction {
+  constructor(childNodes) {
+    super();
+    this.type = exports.ModifyContentActionType.APPEND_CHILD_NODES;
+    this.entityToBeAppended = childNodes;
+  }
+}
+
+/**
+ * Append the second block child nodes to the first block child nodes and remove the second block strategy.
+ */
+class BlockMergeNodesStrategy extends ActionHandleStrategy {
+  /**
+   * Merges the child nodes of two RTEBlocks if they have the same type or both are not images.
+   *
+   * @param {MergeTwoBlocksNodesAction} action - The merge block nodes action instance.
+   * @param {RTETextBlock | RTEImageBlock} target - The first text block or image block.
+   */
+  handleAction(action, target) {
+    const anotherBlock = action.blockNeedToBeMerged;
+    if (target.type === anotherBlock.type || (target.type !== 'image' && anotherBlock.type !== 'image')) {
+      let shouldMergeNodes = anotherBlock['nodes'];
+      if (anotherBlock['type'] !== 'image') {
+        shouldMergeNodes = anotherBlock['nodes'].filter((node) => node.text);
+      }
+      target.apply(new AppendChildNodesAction(shouldMergeNodes));
+      anotherBlock.parent.apply(new RemoveChildAction(anotherBlock));
+    }
+  }
+}
+
+/**
+ * Remove the node from the text block or image block strategy.
+ */
+class BlockRemoveNodeStrategy extends ActionHandleStrategy {
+  /**
+   * Remove the text node from the parent text block or remove the image node from the parent image block.
+   * Remove the block if the block nodes is empty after delete the current node.
+   *
+   * @param {RemoveChildAction} action - The remove child action instance.
+   * @param {RTETextBlock | RTEImageBlock} target - The parent block of the node that will be removed.
+   */
+  handleAction(action, target) {
+    const arrayFixed = target.nodes;
+    target.nodes = arrayFixed.filter((node) => node !== action.entityToBeRemoved);
+    if (target.nodes.length === 0 && target.parent) {
+      target.parent.apply(new RemoveChildAction(target));
+    }
+  }
+}
+
+/**
+ * Append the nodes to the text block or image block strategy.
+ */
+class BlockAppendNodesStrategy extends ActionHandleStrategy {
+  /**
+   * Append the text nodes to the text block or the image block.
+   *
+   * @param {AppendChildNodesAction} action - The remove child action instance.
+   * @param {RTETextBlock | RTEImageBlock} target - The parent block of the node that will be removed.
+   */
+  handleAction(action, target) {
+    const nodesToBeAppended = action.entityToBeAppended;
+    nodesToBeAppended.forEach((node) => {
+      node.parentBlock = target;
+    });
+    // This line is used to fix the typescript error `This expression is not callable`. https://github.com/microsoft/TypeScript/issues/44373
+    const arrayFixed = target.nodes;
+    target.nodes = arrayFixed.concat(nodesToBeAppended);
+  }
+}
+
+/**
+ * Remove all nodes and append new nodes strategy.
+ */
+class BlockReplaceNodesStrategy extends ActionHandleStrategy {
+  /**
+   * Empty the text block or image block nodes and add new nodes.
+   *
+   * @param {ReplaceChildNodesAction} action - The replace child nodes action instance.
+   * @param {RTETextBlock | RTEImageBlock} target - The text block or the image block.
+   */
+  handleAction(action, target) {
+    target.nodes = [];
+    target.apply(new AppendChildNodesAction(action.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 = exports.ModifyContentActionType.INSERT_BLOCKS_AFTER;
+    this.referBlock = referBlock;
+    this.blocksToBeInserted = blocksToBeInserted;
+  }
+}
+
+/**
+ * Clear the current block nodes and append new nodes
+ *
+ * @example block.apply(new ReplaceChildNodesAction(newNodes))
+ */
+class ReplaceChildNodesAction extends ModifyContentAction {
+  constructor(newChildNodes) {
+    super();
+    this.type = exports.ModifyContentActionType.REPLACE_CHILD_NODES;
+    this.newChildNodes = newChildNodes;
+  }
+}
+
+/**
+ * Split the current image block with a special position strategy.
+ */
+class BlockSplitWithImageNodeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.splitImageNodes(action.splitPointNode, action.startOffsetOfNode, target);
+  }
+  /**
+   * The image offset should be 0 or 1
+   * <vega-rich-text-image-editor><img /></vega-rich-text-image-editor>
+   *
+   * @param {RTEImageNode} imageNode The split point image node.
+   * @param {number} imageOffset The cursor point 0 | 1.
+   * @param {RTEImageBlock} target The image block.
+   * @returns {Nullable<RTEBlock>} The new block after split
+   */
+  splitImageNodes(imageNode, imageOffset, target) {
+    const nodesSplitIndex = target.nodes.indexOf(imageNode);
+    if (nodesSplitIndex > -1) {
+      const beforeNodes = target.nodes.slice(0, nodesSplitIndex + imageOffset);
+      const afterNodes = target.nodes.slice(nodesSplitIndex + imageOffset);
+      target.apply(new ReplaceChildNodesAction(beforeNodes));
+      const newBlock = this.cloneWithNodes(afterNodes, target);
+      target.parent.apply(new InsertBlocksAfterAction(target, newBlock));
+      return newBlock;
+    }
+  }
+  /**
+   * Creates a new RTEImageBlock instance with the provided RTEImageNode instances appended to it.
+   *
+   * @param {RTEImageNode[]} nodes - An array of RTEImageNode objects that will be used to create a new RTEImageBlock instance.
+   * @param {RTEImageBlock} target The image block.
+   * @returns {RTEImageBlock} A new `RTEImageBlock` object with the provided `nodes` appended to it.
+   */
+  cloneWithNodes(nodes, target) {
+    const block = target.createNewImageBlock();
+    block.nodes = [];
+    block.apply(new AppendChildNodesAction(nodes));
+    return block;
+  }
+}
+
+/**
+ * Insert a new block before a existing block
+ *
+ * @example currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, newBlock, ...))
+ */
+class InsertBlocksBeforeAction extends ModifyContentAction {
+  constructor(referBlock, ...blocksToBeInserted) {
+    super();
+    this.type = exports.ModifyContentActionType.INSERT_BLOCKS_BEFORE;
+    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 = exports.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE;
+    this.splitPointNode = splitPointNode;
+    this.startOffsetOfNode = startOffsetOfNode;
+  }
+}
+
+/**
+ * Abstract class for which can be splittable
+ */
+class TextSplittableAction extends AnnotationAction {
+  constructor() {
+    super(...arguments);
+    /**
+     * Whether the action should split the node
+     */
+    this.doSplit = true;
+  }
+}
+
+/**
+ * Annotation to represent a selection range
+ */
+class SelectionRangeAnnotation extends Annotation {
+  constructor(range) {
+    super();
+    this.type = exports.InternalAnnotationTypeEnum.SELECTION_RANGE;
+    this.range = range;
+  }
+}
+
+/**
+ * Annotation to make text with strikethrough
+ */
+class StrikethroughAnnotation extends NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = exports.NodeAnnotationTypeEnum.STRIKETHROUGH;
+    this.strikethrough = underline;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {Nullable<boolean>} strikethrough - Strikethrough annotation
+   * @returns {[NodeAnnotationTypeEnum.STRIKETHROUGH, StrikethroughAnnotation]} Map item for the annotation
+   */
+  static from(strikethrough) {
+    return [exports.NodeAnnotationTypeEnum.STRIKETHROUGH, new StrikethroughAnnotation(strikethrough)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      strikethrough: this.strikethrough,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.strikethrough ? 'v-rte--strikethrough' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation to make text with underline
+ */
+class UnderlineAnnotation extends NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = exports.NodeAnnotationTypeEnum.UNDERLINE;
+    this.underline = underline;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} underline - Underline annotation
+   * @returns {[NodeAnnotationTypeEnum.UNDERLINE, UnderlineAnnotation]} Map item for the annotation
+   */
+  static from(underline) {
+    return [exports.NodeAnnotationTypeEnum.UNDERLINE, new UnderlineAnnotation(underline)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      underline: this.underline,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.underline ? 'v-rte--underline' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation to make text Italic
+ */
+class ItalicAnnotation extends NodeAnnotation {
+  constructor(italic) {
+    super();
+    this.type = exports.NodeAnnotationTypeEnum.ITALIC;
+    this.italic = italic;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} italic - Italic annotation
+   * @returns {[NodeAnnotationTypeEnum.ITALIC, ItalicAnnotation]} Map item for the annotation
+   */
+  static from(italic) {
+    return [exports.NodeAnnotationTypeEnum.ITALIC, new ItalicAnnotation(italic)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      italic: this.italic,
+    };
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Italic style
+   */
+  render() {
+    return this.italic ? { 'font-style': 'italic' } : null;
+  }
+}
+
+/**
+ * Annotation to make text bold
+ */
+class BoldAnnotation extends NodeAnnotation {
+  constructor(bold) {
+    super();
+    this.type = exports.NodeAnnotationTypeEnum.BOLD;
+    this.bold = bold;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} bold - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.BOLD, BoldAnnotation]} Map item for the annotation
+   */
+  static from(bold) {
+    return [exports.NodeAnnotationTypeEnum.BOLD, new BoldAnnotation(bold)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      bold: this.bold,
+    };
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Bold style
+   */
+  render() {
+    return this.bold ? { 'font-weight': '700' } : null;
+  }
+}
+
+/**
+ * Annotation to make text code
+ */
+class CodeAnnotation extends NodeAnnotation {
+  constructor(code) {
+    super();
+    this.type = exports.NodeAnnotationTypeEnum.CODE;
+    this.code = code;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} code - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.CODE, CodeAnnotation]} Map item for the annotation
+   */
+  static from(code) {
+    return [exports.NodeAnnotationTypeEnum.CODE, new CodeAnnotation(code)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      code: this.code,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.code ? 'v-rte--code' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Bold style
+   */
+  render() {
+    return null;
+  }
+}
+
+const RTE_TEXT_COLORS = [
+  {
+    key: 'black',
+    light: '#111128',
+    dark: '#E3E3E8',
+  },
+  {
+    key: 'gray',
+    light: '#5E5E6D',
+    dark: '#B9B9C1',
+  },
+  {
+    key: 'green',
+    light: '#01801F',
+    dark: '#59D977',
+  },
+  {
+    key: 'red',
+    light: '#BD2947',
+    dark: '#FFB2B5',
+  },
+  {
+    key: 'purple',
+    light: '#563D82',
+    dark: '#BEB2FF',
+  },
+  {
+    key: 'teal',
+    light: '#17758F',
+    dark: '#4CD8FF',
+  },
+];
+const ZERO_WIDTH_SPACE = '\u200b';
+
+/**
+ * Annotation to make text with text color
+ */
+class TextColorAnnotation extends NodeAnnotation {
+  constructor(textColor) {
+    super();
+    this.type = exports.NodeAnnotationTypeEnum.TEXT_COLOR;
+    this.textColor = this.formatTextColor(textColor);
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string} textColor - text color annotation
+   * @returns {[NodeAnnotationTypeEnum.TEXT_COLOR, TextColorAnnotation]} Map item for the annotation
+   */
+  static from(textColor) {
+    return [exports.NodeAnnotationTypeEnum.TEXT_COLOR, new TextColorAnnotation(textColor)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      textColor: this.textColor.key,
+    };
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return {
+      color: darkModeStyleController.VegaInternalThemeManager.isDarkMode() ? this.textColor.dark : this.textColor.light,
+    };
+  }
+  /**
+   * format text color
+   *
+   * @param {string} textColor - text color
+   * @returns {VegaRTEColorSchema} - VegaRTEColorSchema
+   */
+  formatTextColor(textColor) {
+    return (RTE_TEXT_COLORS.find((item) => item.key === textColor) || RTE_TEXT_COLORS[0]);
+  }
+}
+
+/**
+ * Annotation to make text a link
+ */
+class LinkAnnotation extends NodeAnnotation {
+  constructor(link) {
+    super();
+    this.type = exports.NodeAnnotationTypeEnum.LINK;
+    this.link = link;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {VegaRTELink} link - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.LINK, LinkAnnotation]} Map item for the annotation
+   */
+  static from(link) {
+    return [
+      exports.NodeAnnotationTypeEnum.LINK,
+      new LinkAnnotation({ href: link.href, groupKey: link.groupKey }),
+    ];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<'link', VegaRTELink>} JSON representation of the annotation
+   */
+  toJSON() {
+    return { link: { href: this.link.href, groupKey: this.link.groupKey } };
+  }
+  /**
+   * Verify whether two link annotation is same or not
+   *
+   * @param {LinkAnnotation} annotation - Compared annotation
+   * @returns {boolean} Whether two link annotation is same or not
+   */
+  toEqual(annotation) {
+    return this.link.groupKey === annotation.link.groupKey;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Link style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation to represent a link of grouped nodes
+ */
+class LinkGroupAnnotation extends Annotation {
+  constructor(groupKey) {
+    super();
+    this.type = exports.InternalAnnotationTypeEnum.LINK_GROUP;
+    this.linkGroups = new Map();
+    this.linkGroups = new Map([[groupKey, []]]);
+  }
+}
+
+/**
+ * Action to link a group of nodes
+ */
+class LinkGroupAnnotationAction extends AnnotationAction {
+  constructor(groupKey, nodes) {
+    super();
+    this.isFlushable = false;
+    this.groupKey = groupKey;
+    this.nodes = nodes;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {Annotation} The annotation
+   */
+  toAnnotation() {
+    return new LinkGroupAnnotation(this.groupKey);
+  }
+}
+
+/**
+ * Sync up selection action
+ */
+class SyncUpSelectionAction extends AnnotationAction {
+  constructor() {
+    super();
+    this.isFlushable = false;
+  }
+  /**
+   * annotation null
+   *
+   * @returns {Nullable<Annotation>} null
+   */
+  toAnnotation() {
+    return null;
+  }
+}
+
+/**
+ * Update the editor text node text content strategy.
+ */
+class NodeUpdateTextStrategy extends ActionHandleStrategy {
+  /**
+   * Updates the text content of a node and unlink the node if it is a link node and the text is deleted.
+   *
+   * @param {UpdateTextAction} action - The update text action instance.
+   * @param {RTETextNode} target - The text node instance which need update the text.
+   */
+  handleAction(action, target) {
+    target.text = action.newTextContent;
+    // The link node should unlink when delete all text
+    if (!target.text && target.annotationMap.has('LINK')) {
+      target.annotationMap.delete(exports.NodeAnnotationTypeEnum.LINK);
+    }
+  }
+}
+
+/**
+ * Update the text node property text action
+ *
+ * @example textNode.apply(new UpdateTextAction(newText))
+ */
+class UpdateTextAction extends ModifyContentAction {
+  constructor(text) {
+    super();
+    this.type = exports.ModifyContentActionType.UPDATE_TEXT;
+    this.newTextContent = '';
+    this.newTextContent = text;
+  }
+}
+
+/**
+ * Replaces the rich text node selected text strategy.
+ */
+class NodeReplaceSelectedTextStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.replaceSelectedText(action.textToBeInsert, action.currentRange, target);
+  }
+  /**
+   * Replaces the selected text within a given range with a new text in a TypeScript class.
+   *
+   * @param {string} text - The new text that will replace the currently selected text within the specified range.
+   * @param {RTERange} currentRange - A range of text within a Rich Text Editor (RTE).
+   * @param {RTETextNode} target - The RTE text node instance.
+   */
+  replaceSelectedText(text, currentRange, target) {
+    if (currentRange && currentRange.startContainer && currentRange.endContainer) {
+      const { startContainer, endContainer, startOffset, endOffset } = currentRange;
+      let newText = target.text;
+      if (startContainer === endContainer && startOffset === endOffset && text) {
+        newText = target.text.slice(0, startOffset) + text + target.text.slice(startOffset);
+      }
+      else {
+        const startNode = startContainer.parentElement;
+        const endNode = endContainer.parentElement;
+        const startItemDto = startNode && stateEntityRenderingRegistry.getEntityByDOM(startNode);
+        const endItemDto = endNode && stateEntityRenderingRegistry.getEntityByDOM(endNode);
+        let startIndex = 0, endIndex = target.text.length;
+        if (startItemDto && startItemDto === target) {
+          startIndex = startOffset;
+          endIndex = startContainer === endContainer ? endOffset : endIndex;
+        }
+        else if (endItemDto && endItemDto === target) {
+          endIndex = endOffset;
+        }
+        newText = target.text.slice(0, startIndex) + text + target.text.slice(endIndex);
+      }
+      target.apply(new UpdateTextAction(newText));
+    }
+  }
+}
+
+/**
+ * Split the text node into two or there nodes according to the rules.
+ */
+class NodeSplitTextStrategy extends ActionHandleStrategy {
+  constructor() {
+    super(...arguments);
+    // The new create node that need apply annotation or the current target. This property used to export after the execute method invoke.
+    this.applyTargetNode = null;
+  }
+  /**
+   * Split the text node.
+   *
+   * @param {TextSplittableAction} action - The split action.
+   * @param {RTETextNode} target - The text node that need to be splited.
+   * @returns {Nullable<RTETextNode>} - The new insert text node or the current text node that need to apply the action.
+   */
+  handleAction(action, target) {
+    const selectionRangeAnnotation = target.getAnnotationByType(exports.InternalAnnotationTypeEnum.SELECTION_RANGE);
+    this.setApplyTargetNode(null);
+    if (action instanceof TextSplittableAction && action.doSplit && selectionRangeAnnotation) {
+      const { startContainer, endContainer, startOffset, endOffset } = selectionRangeAnnotation.range;
+      const noTextRangeSelected = startContainer === endContainer && startOffset === endOffset;
+      target.parentBlock.nodes = target.parentBlock.nodes.flatMap((item) => {
+        if (item.id === target.id) {
+          if (noTextRangeSelected) {
+            return this.insertNewNode(startOffset, target);
+          }
+          if (this.shouldSplitSelection(selectionRangeAnnotation.range)) {
+            return this.splitTextNode(selectionRangeAnnotation.range, target);
+          }
+          else {
+            this.setApplyTargetNode(target);
+            return target;
+          }
+        }
+        return item;
+      });
+    }
+    return this.applyTargetNode;
+  }
+  /**
+   * Insert the new node at the start offset
+   *
+   * @param {number} startOffset - The start position offset
+   * @param {RTETextNode} target - RTETextNode
+   * @returns {RTETextNode[]} - RTETextNode array
+   */
+  insertNewNode(startOffset, target) {
+    const newNode = target.cloneWithText('');
+    this.setApplyTargetNode(newNode);
+    if (startOffset === 0) {
+      return [newNode, target];
+    }
+    if (startOffset === target.text.length) {
+      return [target, newNode];
+    }
+    const beforeNode = target.cloneWithText(target.text.substring(0, startOffset));
+    const afterNode = target.cloneWithText(target.text.substring(startOffset));
+    return [beforeNode, newNode, afterNode];
+  }
+  /**
+   * Whether a given range should be split based on various conditions within the range.
+   *
+   * @param {Range} range - Selection range
+   * @returns {boolean} Returns a boolean value indicating whether the selection range should be split.
+   */
+  shouldSplitSelection(range) {
+    const { startContainer, endContainer, startOffset, endOffset } = range;
+    const isCrossNode = startContainer !== endContainer;
+    const isPartialStart = startOffset > 0;
+    const isPartialEnd = endOffset < (endContainer.textContent ? endContainer.textContent.length : 0);
+    const isPartialSelection = isPartialStart || isPartialEnd;
+    return isCrossNode || isPartialSelection;
+  }
+  /**
+   * Split text node with range
+   *
+   * @param {Range} range - Selection range
+   * @param {RTETextNode} target - RTETextNode
+   * @returns {RTETextNode[] | RTETextNode} RTETextNode array
+   */
+  splitTextNode(range, target) {
+    const { startContainer, endContainer, startOffset } = range;
+    const startNode = startContainer.parentElement;
+    const endNode = endContainer.parentElement;
+    /**
+     * Split the text from the start offset to the end offset
+     *
+     * @param {string} text - The text string
+     * @param {number} startOffset - The start offset position
+     * @param {number} endOffset - The end offset position
+     * @returns {RTETextNode[]} - The split text node array
+     */
+    const splitText = (text, startOffset, endOffset) => {
+      const beforeText = text.substring(0, startOffset);
+      const selectedText = text.substring(startOffset, endOffset);
+      const afterText = text.substring(endOffset);
+      return [
+        target.cloneWithText(beforeText),
+        target.cloneWithText(selectedText),
+        target.cloneWithText(afterText),
+      ];
+    };
+    const startItemDto = startNode && stateEntityRenderingRegistry.getEntityByDOM(startNode);
+    const endItemDto = endNode && stateEntityRenderingRegistry.getEntityByDOM(endNode);
+    if (startItemDto && startItemDto.id === target.id) {
+      const endOffset = startContainer === endContainer ? range.endOffset : target.text.length;
+      const [beforeNode, selectedNode, afterNode] = splitText(target.text, startOffset, endOffset);
+      this.setApplyTargetNode(selectedNode);
+      return [beforeNode, selectedNode, afterNode].filter((node) => !!node.text);
+    }
+    else if (endItemDto && endItemDto.id === target.id) {
+      const [beforeNode, selectedNode, afterNode] = splitText(target.text, 0, range.endOffset);
+      this.setApplyTargetNode(selectedNode);
+      return [beforeNode, selectedNode, afterNode].filter((node) => !!node.text);
+    }
+    else {
+      this.setApplyTargetNode(target);
+      return target;
+    }
+  }
+  /**
+   * Store the text node which need to apply the annotation. Clear the value if the input is null.
+   *
+   * @param {RTETextNode | null} node - The new text node.
+   */
+  setApplyTargetNode(node) {
+    this.applyTargetNode = node;
+  }
+}
+
+/**
+ * Annotation to host which annotations will be clear formatting
+ */
+class ClearFormattingAnnotation extends Annotation {
+  constructor() {
+    super(...arguments);
+    this.type = exports.InternalAnnotationTypeEnum.CLEAR_FORMATTING;
+    this.items = [
+      exports.NodeAnnotationTypeEnum.BOLD,
+      exports.NodeAnnotationTypeEnum.ITALIC,
+      exports.NodeAnnotationTypeEnum.UNDERLINE,
+      exports.NodeAnnotationTypeEnum.STRIKETHROUGH,
+      exports.NodeAnnotationTypeEnum.TEXT_COLOR,
+      exports.NodeAnnotationTypeEnum.CODE,
+    ];
+  }
+}
+
+/**
+ * Action to toggle clear formatting
+ */
+class ClearFormattingAnnotationAction extends TextSplittableAction {
+  constructor() {
+    super(...arguments);
+    this.isFlushable = true;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {Annotation} the annotation
+   */
+  toAnnotation() {
+    return new ClearFormattingAnnotation();
+  }
+}
+
+/**
+ * Action to toggle code annotation
+ */
+class CodeAnnotationAction extends TextSplittableAction {
+  constructor(code) {
+    super();
+    this.isFlushable = true;
+    this.code = code;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {CodeAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new CodeAnnotation(this.code);
+  }
+}
+
+/**
+ * Delete the node annotation by type
+ */
+class DeleteNodeAnnotationAction extends AnnotationAction {
+  constructor(annotationType) {
+    super();
+    this.isFlushable = true;
+    this.annotationType = annotationType;
+  }
+  /**
+   * Don't need this for this action
+   *
+   * @returns {Nullable<Annotation>} undefined
+   */
+  toAnnotation() {
+    return undefined;
+  }
+}
+
+/**
+ * Action to toggle link annotation
+ */
+class LinkAnnotationAction extends TextSplittableAction {
+  constructor({ link, newText, needMergeNode, doSplit, }) {
+    super();
+    this.isFlushable = true;
+    this.link = link;
+    this.needMergeNode = needMergeNode;
+    this.newText = newText;
+    if (typeGuard.isNonNullable(doSplit)) {
+      this.doSplit = doSplit;
+    }
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {LinkAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new LinkAnnotation(this.link);
+  }
+}
+
+/**
+ * The current strategy used to modify the text node annotation map.
+ */
+class NodeUpdateAnnotationMapStrategy extends ActionHandleStrategy {
+  /**
+   * Remove or set annotation to the text node annotation map.
+   *
+   * @param {AnnotationAction} action - The annotation action instance.
+   * @param {RTETextNode} target - The current text node.
+   */
+  handleAction(action, target) {
+    const annotation = action.toAnnotation();
+    if (action instanceof DeleteNodeAnnotationAction) {
+      target.annotationMap.delete(action.annotationType);
+      return;
+    }
+    if (annotation instanceof ClearFormattingAnnotation) {
+      annotation.items.forEach((item) => {
+        target.deleteAnnotationByType(item);
+      });
+      return;
+    }
+    if (annotation instanceof NodeAnnotation || annotation instanceof SelectionRangeAnnotation) {
+      if (action instanceof LinkAnnotationAction) {
+        if (typeGuard.isNonNullable(action.newText)) {
+          target.text = action.newText;
+        }
+        target.parentBlock.apply(new LinkGroupAnnotationAction(action.link.groupKey, [target]));
+      }
+      if (action instanceof CodeAnnotationAction) {
+        this.handleAction(new ClearFormattingAnnotationAction(), target);
+      }
+      target.annotationMap.set(annotation.type, annotation);
+      return;
+    }
+  }
+}
+
+/**
+ * Text node
+ */
+class RTETextNode extends RTENode {
+  constructor(id, text, parentBlock, annotationMap) {
+    super(id, annotationMap);
+    this.type = NodeTypeEnum.TEXT;
+    this.parentBlock = parentBlock;
+    this.text = text;
+  }
+  /**
+   * Creates an RTETextNode from a VegaRTETextNode with annotations and a parent RTETextBlock.
+   *
+   * @param {VegaRTETextNode} richText - A rich text node
+   * @param {RTETextBlock} parentBlock - Parent block
+   * @returns {RTETextNode} an RTETextNode
+   */
+  static from(richText, parentBlock) {
+    const textNode = new RTETextNode(richText.id, richText.text, parentBlock);
+    const { annotations } = richText;
+    if (annotations) {
+      textNode.annotationMap = new Map(Object.keys(annotations)
+        .map((type) => {
+        if (annotations.link) {
+          parentBlock.apply(new LinkGroupAnnotationAction(annotations.link.groupKey, [textNode]));
+        }
+        return this.createAnnotationEntity(type, annotations[type]);
+      })
+        .filter(typeGuard.isNonNullable));
+    }
+    return textNode;
+  }
+  /**
+   * Creates different types of text annotations based on the provided type and value.
+   *
+   * @param {keyof VegaRTETextAnnotations} type - The key of the type.
+   * @param {unknown} value - The value that will be used to create the specific type of annotation entity based on the `type` provided.
+   * @returns {Nullable<[RTENodeAnnotationMapKey, RTENodeAnnotationMapValue]>} Returning a nullable tuple containing a key and a
+   * value from the `RTENodeAnnotationMapKey` and `RTENodeAnnotationMapValue` types.
+   */
+  static createAnnotationEntity(type, value) {
+    switch (type) {
+      case 'bold':
+        return BoldAnnotation.from(value);
+      case 'italic':
+        return ItalicAnnotation.from(value);
+      case 'underline':
+        return UnderlineAnnotation.from(value);
+      case 'strikethrough':
+        return StrikethroughAnnotation.from(value);
+      case 'code':
+        return CodeAnnotation.from(value);
+      case 'textColor':
+        return TextColorAnnotation.from(value);
+      case 'link':
+        return LinkAnnotation.from(value);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .reduce((record, annotation) => {
+      return Object.assign(Object.assign({}, record), annotation.toJSON());
+    }, {});
+    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'text', text: this.text });
+  }
+  /**
+   * Creates a new RTETextNode with the specified text and copies the parent block and annotation map from the original node.
+   *
+   * @param {string} text - The text content of the RTETextNode that will be created.
+   * @returns {RTETextNode} An new RTETextNode
+   */
+  cloneWithText(text) {
+    return new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), text, this.parentBlock, new Map(this.annotationMap));
+  }
+  /**
+   * Checks if a node is empty
+   *
+   * @returns {boolean}  It returns `true` if the node is empty
+   */
+  isEmpty() {
+    return !this.text || this.text === ZERO_WIDTH_SPACE || this.text === '\n';
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    const selectionRangeAnnotation = this.getAnnotationByType(exports.InternalAnnotationTypeEnum.SELECTION_RANGE);
+    if (action instanceof TextSplittableAction && action.doSplit && selectionRangeAnnotation) {
+      const splitStrategy = ActionHandleStrategyRegistry.get(TextSplittableAction.name, RTETextNode.name);
+      if (splitStrategy) {
+        const newNode = splitStrategy.execute(action, this);
+        if (newNode) {
+          this.applyActionToNode(newNode, action);
+        }
+      }
+    }
+    else {
+      this.applyActionToNode(this, action);
+    }
+    this.parentBlock.mergeNodes(action);
+  }
+  /**
+   * @inheritDoc
+   */
+  doModifyActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+  /**
+   * Apply action to node
+   *
+   * @param {RTETextNode} node - Text node
+   * @param {AnnotationAction} action - AnnotationAction
+   */
+  applyActionToNode(node, action) {
+    const annotation = action.toAnnotation();
+    if (action instanceof SyncUpSelectionAction) {
+      this.syncUpSelectedNodes(node);
+      return;
+    }
+    // Sync up RTETextNode selected state to selection controller for any action apply, except selection range change.
+    if (!(annotation instanceof SelectionRangeAnnotation)) {
+      this.syncUpSelectedNodes(node);
+    }
+    const updateAnnotationMapStrategy = ActionHandleStrategyRegistry.get(AnnotationAction.name, RTETextNode.name);
+    if (updateAnnotationMapStrategy) {
+      updateAnnotationMapStrategy.execute(action, node);
+      return;
+    }
+  }
+  /**
+   * Sync up the selected node by change manager
+   *
+   * @param {RTETextNode} selectedNode - The selected node
+   */
+  syncUpSelectedNodes(selectedNode) {
+    const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (currentNodeDom) {
+      const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.ChangeManager.notify(nodeSubject, { node: selectedNode });
+      }
+    }
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.UPDATE_TEXT, RTETextNode.name, new NodeUpdateTextStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_SELECTED_TEXT, RTETextNode.name, new NodeReplaceSelectedTextStrategy());
+  ActionHandleStrategyRegistry.register(TextSplittableAction.name, RTETextNode.name, new NodeSplitTextStrategy());
+  ActionHandleStrategyRegistry.register(AnnotationAction.name, RTETextNode.name, new NodeUpdateAnnotationMapStrategy());
+})();
+
+/**
+ * Text style annotation
+ */
+class TextStyleAnnotation extends BlockAnnotation {
+  constructor(textStyle) {
+    super();
+    this.type = exports.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 [exports.BlockAnnotationTypeEnum.TEXT_STYLE, new TextStyleAnnotation(textStyle)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   */
+  toJSON() {
+    return { textStyle: this.textStyle };
+  }
+  /**
+   * Render the styles by block type
+   *
+   * @returns {AnnotationStyle} the styles to apply
+   */
+  render() {
+    const paragraphStyle = {
+      fontFamily: 'Inter',
+      fontSize: '16px',
+      lineHeight: '22px',
+      fontWeight: '500',
+    };
+    switch (this.textStyle) {
+      case 'paragraph': {
+        return paragraphStyle;
+      }
+      case 'title': {
+        return { fontFamily: 'Inter', fontSize: '36px', lineHeight: '40px', fontWeight: '500' };
+      }
+      case 'subtitle': {
+        return { fontFamily: 'Inter', fontSize: '28px', lineHeight: '32px', fontWeight: '500' };
+      }
+      case 'heading-1': {
+        return { fontFamily: 'Inter', fontSize: '22px', lineHeight: '24px', fontWeight: '500' };
+      }
+      case 'heading-2': {
+        return { fontFamily: 'Inter', fontSize: '20px', lineHeight: '24px', fontWeight: '500' };
+      }
+      case 'heading-3': {
+        return { fontFamily: 'Inter', fontSize: '18px', lineHeight: '22px', fontWeight: '500' };
+      }
+    }
+  }
+}
+
+/**
+ * Action to change the text style of a block
+ */
+class TextStyleAnnotationAction extends 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);
+  }
+}
+
+/**
+ * Update the text block text style strategy.
+ */
+class BlockUpdateTextStyleStrategy extends ActionHandleStrategy {
+  /**
+   * Update the text block type and add or remove the bold style from child nodes.
+   *
+   * @param {TextStyleAnnotationAction} action - The text style annotation action.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(action, target) {
+    if (target.type !== 'list-item') {
+      target.type = action.textStyle;
+    }
+    if (action.bold) {
+      target.nodes.forEach((node) => {
+        const boldAnnotationAction = new BoldAnnotationAction(true);
+        boldAnnotationAction.doSplit = false;
+        node.apply(boldAnnotationAction);
+      });
+    }
+    else {
+      target.nodes.forEach((node) => {
+        node.apply(new DeleteNodeAnnotationAction(exports.NodeAnnotationTypeEnum.BOLD));
+      });
+    }
+  }
+}
+
+/**
+ * Update the text block link group annotation strategy.
+ */
+class BlockUpdateLinkGroupStrategy extends ActionHandleStrategy {
+  /**
+   * Update link group after the child link node update.
+   *
+   * @param {LinkGroupAnnotationAction} action - The link group annotation action instance.
+   * @param {RTETextBlock} target - The current text block.
+   */
+  handleAction(action, target) {
+    const linkGroupAnnotation = target.getAnnotationByType(exports.InternalAnnotationTypeEnum.LINK_GROUP);
+    if (linkGroupAnnotation) {
+      const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
+      linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
+      target.annotationMap.set(exports.InternalAnnotationTypeEnum.LINK_GROUP, linkGroupAnnotation);
+    }
+  }
+}
+
+/**
+ * Split the current node with a special position strategy.
+ */
+class BlockSplitWithTextNodeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.splitTextNodeBlock(action.splitPointNode, action.startOffsetOfNode, target);
+  }
+  /**
+   * Splits a text node at a specified offset within a block of nodes and returns a new block with the split nodes.
+   *
+   * @param {RTETextNode} splitNode - The text node that will be split
+   * @param {number} startOffsetOfNode - The index at which will split the text content of the `splitNode`.
+   * @param {RTETextBlock} textBlock - The text block need to be splited.
+   * @returns {Nullable<RTEBlock>} return either an RTEBlock object or null.
+   */
+  splitTextNodeBlock(splitNode, startOffsetOfNode, textBlock) {
+    if (splitNode) {
+      const beforeText = splitNode.text.slice(0, startOffsetOfNode);
+      const afterText = splitNode.text.slice(startOffsetOfNode);
+      const nodesSplitIndex = textBlock.nodes.indexOf(splitNode);
+      if (nodesSplitIndex > -1) {
+        const beforeNodes = textBlock.nodes.slice(0, nodesSplitIndex);
+        const afterNodes = textBlock.nodes.slice(nodesSplitIndex + 1);
+        if (beforeText) {
+          beforeNodes.push(splitNode.cloneWithText(beforeText));
+        }
+        if (afterText) {
+          afterNodes.unshift(splitNode.cloneWithText(afterText));
+        }
+        textBlock.apply(new ReplaceChildNodesAction(beforeNodes));
+        const newBlock = textBlock.cloneWithNodes(afterNodes);
+        textBlock.parent.apply(new InsertBlocksAfterAction(textBlock, newBlock));
+        return newBlock;
+      }
+    }
+  }
+}
+
+/**
+ * Insert new paragraph into current text block at special position.
+ */
+class BlockInsertNewParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.breakSingleTextBlock(action.startContainerNode, action.startOffset, target);
+  }
+  /**
+   * breakSingleTextBlock
+   *
+   * @param {RTETextNode} splitNode -
+   * @param {number} startOffsetOfNode -
+   * @param {RTETextBlock} target -
+   * @returns {Nullable<RTEBlock>} Nullable<RTEBlock>
+   */
+  breakSingleTextBlock(splitNode, startOffsetOfNode, target) {
+    const newParagraph = this.copyInlineStyleToNewParagraph(splitNode, target);
+    if (this.isCaretPositionAtTextBlockEnd(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksAfterAction(target, newParagraph));
+    }
+    else if (this.isCaretPositionAtTextBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksBeforeAction(target, newParagraph));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      target.apply(splitBlockAction);
+      return splitBlockAction.newBlock;
+    }
+    return newParagraph;
+  }
+  /**
+   * copyInlineStyleToNewParagraph
+   *
+   * @param {RTETextNode} needCopedNode - The text node.
+   * @param {RTETextBlock} target - The text block.
+   * @returns {RTETextBlock} - The new paragraph.
+   */
+  copyInlineStyleToNewParagraph(needCopedNode, target) {
+    const textNode = needCopedNode.cloneWithText('');
+    // The link annotation don't need inherited
+    textNode.annotationMap.delete(exports.NodeAnnotationTypeEnum.LINK);
+    const newParagraph = target.createNewParagraph();
+    newParagraph.apply(new AppendChildNodesAction([textNode]));
+    return newParagraph;
+  }
+}
+
+/**
+ * Insert a line break node into current text block at special position strategy.
+ */
+class BlockInsertLineBreakStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.lineBreakNode = this.lineBreakSingleBlock(action.startContainerNode, action.startOffset, target);
+  }
+  /**
+   * lineBreakSingleBlock
+   *
+   * @param {RTETextNode} splitNode -
+   * @param {number} startOffsetOfNode -
+   * @param {RTETextBlock} target -
+   * @returns {Nullable<RTETextNode>} Nullable<RTETextNode>
+   */
+  lineBreakSingleBlock(splitNode, startOffsetOfNode, target) {
+    if (splitNode) {
+      const lineBreakNode = new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', target);
+      const beforeText = splitNode.text.slice(0, startOffsetOfNode);
+      const afterText = splitNode.text.slice(startOffsetOfNode);
+      const nodesSplitIndex = target.nodes.indexOf(splitNode);
+      if (nodesSplitIndex > -1) {
+        const beforeNodes = target.nodes.slice(0, nodesSplitIndex);
+        const afterNodes = target.nodes.slice(nodesSplitIndex + 1);
+        if (beforeText) {
+          beforeNodes.push(splitNode.cloneWithText(beforeText));
+        }
+        if (afterText) {
+          afterNodes.unshift(splitNode.cloneWithText(afterText));
+        }
+        this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes, target);
+      }
+      return lineBreakNode;
+    }
+  }
+  /**
+   * mergeLineBreakNodes
+   *
+   * @param {RTENode[]} beforeNodes -
+   * @param {RTETextNode} lineBreakNode -
+   * @param {RTENode[]} afterNodes -
+   * @param {RTETextBlock} target -
+   */
+  mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes, target) {
+    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
+      afterNodes.push(new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', target, beforeNodes[beforeNodes.length - 1] && beforeNodes[beforeNodes.length - 1].annotationMap));
+    }
+    target.apply(new ReplaceChildNodesAction([...beforeNodes, lineBreakNode, ...afterNodes]));
+  }
+}
+
+/**
+ * Insert a line break node into multiple blocks selection at special position strategy.
+ */
+class BlockInsertLineBreakWithBlocksStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks, target);
+  }
+  /**
+   * lineBreakMultipleBlocks
+   *
+   * @param {RTEBlock[]} selectedBlocks -
+   * @param {RTETextBlock} target -
+   * @returns {Nullable<RTETextNode>} Nullable<RTETextNode>
+   */
+  lineBreakMultipleBlocks(selectedBlocks, target) {
+    const beforeNodes = target.nodes;
+    const lineBreakNode = new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', target);
+    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
+    this.mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes, target);
+    return lineBreakNode;
+  }
+  /**
+   * 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;
+  }
+  /**
+   * mergeLineBreakNodes
+   *
+   * @param {RTENode[]} beforeNodes -
+   * @param {RTETextNode} lineBreakNode -
+   * @param {RTENode[]} afterNodes -
+   * @param {RTETextBlock} target -
+   */
+  mergeLineBreakNodes(beforeNodes, lineBreakNode, afterNodes, target) {
+    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
+      afterNodes.push(new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', target, beforeNodes[beforeNodes.length - 1] && beforeNodes[beforeNodes.length - 1].annotationMap));
+    }
+    target.apply(new ReplaceChildNodesAction([...beforeNodes, lineBreakNode, ...afterNodes]));
+  }
+}
+
+/**
+ * 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 = exports.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES;
+    this.blockNeedToBeMerged = blockNeedToBeMerged;
+  }
+}
+
+/**
+ * The text block delete text content strategy.
+ */
+class BlockDeleteTextContentStrategy extends BlockDeleteNodeContentStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.deleteNodeContent(action, target);
+  }
+  /**
+   * Handle the delete text logic when press delete key.
+   *
+   * @param {DeleteBlockContentAction} action - ModifyContentAction
+   * @param {RTETextBlock} target - Current text block
+   */
+  deleteNodeContent(action, target) {
+    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 === target && previousNode['text'] === '\n') ||
+          target.nodes.length === 1) {
+          action.previousNode = startContainerNode;
+          return;
+        }
+        else {
+          target.apply(new RemoveChildAction(startContainerNode));
+          action.previousNode = previousNode;
+          return;
+        }
+      }
+    }
+    else {
+      let previousNode = this.getPreviousNode(startContainerNode);
+      let nextNode = null;
+      if (target.nodes.length && previousNode && previousNode.parentBlock !== target) {
+        if (startContainerNode.isEmpty()) {
+          target.apply(new RemoveChildAction(startContainerNode));
+        }
+        previousNode.parentBlock.apply(new MergeTwoBlocksNodesAction(target));
+      }
+      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()) {
+          target.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 (target.nodes.length === 0) {
+        target.parent.apply(new RemoveChildAction(target));
+      }
+      if (previousNode) {
+        action.previousNode = previousNode;
+      }
+      else if (nextNode) {
+        action.nextNode = nextNode;
+      }
+    }
+  }
+}
+
+/**
+ * Insert a image block into the text block at special position strategy.
+ */
+class BlockInsertImageIntoTextStrategy extends ActionHandleStrategy {
+  /**
+   * insertImage
+   *
+   * @param {InsertImageToBlockAction} action - Insert image action instance.
+   * @param {RTETextBlock} target - The text block.
+   */
+  handleAction(action, target) {
+    const splitNode = action.splitPointNode;
+    const startOffsetOfNode = action.startOffsetOfNode;
+    const newImageBlock = action.imageBlockToBeInserted;
+    if (this.isCaretPositionAtTextBlockEnd(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksAfterAction(target, newImageBlock));
+    }
+    else if (this.isCaretPositionAtTextBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksBeforeAction(target, newImageBlock));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      target.apply(splitBlockAction);
+      target.parent.apply(new InsertBlocksAfterAction(target, newImageBlock));
+    }
+  }
+}
+
+/**
+ * Replace the node with new node array strategy.
+ */
+class BlockReplaceNodeWithNodesStrategy extends ActionHandleStrategy {
+  /**
+   * Replace the current node to the new node array.
+   *
+   * @param {RTEBlock} target - The image block or the text block.
+   * @param {RTENode} referNode - The text node or the image node.
+   * @param {RTENode[]} newNodes - The array of the text node or the image node.
+   */
+  replaceNodeWithNodes(target, referNode, newNodes) {
+    if (target['nodes']) {
+      newNodes.forEach((node) => {
+        node.parentBlock = target;
+      });
+      target['nodes'] = target['nodes'].flatMap((node) => {
+        if (node === referNode) {
+          return newNodes;
+        }
+        else {
+          return node;
+        }
+      });
+    }
+  }
+}
+
+/**
+ * Insert some text nodes at the before of the node strategy.
+ */
+class BlockInsertNodesBeforeNodeStrategy extends BlockReplaceNodeWithNodesStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const referNode = action.referNode;
+    const nodes = [...action.nodesToBeInserted, referNode];
+    this.replaceNodeWithNodes(target, referNode, nodes);
+  }
+}
+
+/**
+ * Convert the selected blocks to list strategy.
+ */
+class BlockTransformToListStrategy extends ActionHandleStrategy {
+  /**
+   * This method will create a empty list block and append all selected blocks as list item block.
+   *
+   * @param {TransformListAction} action - The transform list action instance.
+   * @param {RTETextBlock} target - The first item of the selected block.
+   */
+  handleAction(action, target) {
+    const contentState = target.parent;
+    const bulletList = contentState.createList(action.listType);
+    const selectedBlocks = action.selectedBlocks;
+    const listItems = selectedBlocks.map((block) => contentState.toListItem(block));
+    bulletList.apply(new AppendChildNodesAction(listItems));
+    contentState.apply(new InsertBlocksAfterAction(action.selectedBlocks[0], bulletList));
+    selectedBlocks.forEach((block) => {
+      block.parent.apply(new RemoveChildAction(block));
+    });
+  }
+}
+
+/**
+ * Text block
+ */
+class RTETextBlock extends RTEBlock {
+  constructor(id, type) {
+    super(id);
+    this.nodes = [];
+    this.type = type;
+    if (RTETextBlock.isAcceptableTextStyle(type)) {
+      this.annotationMap = new Map([TextStyleAnnotation.from(type)]);
+    }
+    else {
+      this.annotationMap = new Map([TextStyleAnnotation.from('paragraph')]);
+    }
+  }
+  /**
+   * Converts a VegaRTETextBlock into an RTETextBlock.
+   *
+   * @param {VegaRTETextBlock} block - The block object
+   * @returns {RTETextBlock} A RTETextBlock class
+   */
+  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 (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);
+    }
+  }
+  /**
+   * Checks if a given text block type is one of the acceptable text styles.
+   *
+   * @param {VegaRTETextBlockType} type - The text block type
+   * @returns {boolean} Return a boolean value indicating whether the `type` parameter is valid.
+   */
+  static isAcceptableTextStyle(type) {
+    return ['title', 'subtitle', 'paragraph', 'heading-1', 'heading-2', 'heading-3'].includes(type);
+  }
+  /**
+   * Merges RTETextNode nodes based on certain conditions.
+   *
+   * @param {AnnotationAction} action - AnnotationAction
+   */
+  mergeNodes(action) {
+    this.nodes = this.nodes.reduce((prev, cur) => {
+      const lastNode = prev.at(-1);
+      if (action instanceof LinkAnnotationAction && action.needMergeNode) {
+        const lastNodeLinkAnnotation = lastNode === null || lastNode === void 0 ? void 0 : lastNode.getAnnotationByType(exports.NodeAnnotationTypeEnum.LINK);
+        const curNodeLinkAnnotation = cur.getAnnotationByType(exports.NodeAnnotationTypeEnum.LINK);
+        if (lastNodeLinkAnnotation &&
+          curNodeLinkAnnotation &&
+          lastNodeLinkAnnotation.toEqual(curNodeLinkAnnotation)) {
+          return prev;
+        }
+      }
+      // TODO: handle other cases like merge bold nodes
+      return [...prev, cur];
+    }, []);
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, nodes: this.nodes.map((node) => node.toJSON()) });
+  }
+  /**
+   * Clone the nodes to a new block
+   *
+   * @param {RTEBlock} nodes - The nodes will be copied
+   * @returns {RTEBlock} New block
+   */
+  cloneWithNodes(nodes) {
+    const block = new RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), this.type);
+    block.nodes = [];
+    block.apply(new AppendChildNodesAction(nodes));
+    return block;
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.nodes.length > 0 && this.nodes.some((node) => !node.isEmpty());
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.nodes[this.nodes.length - 1];
+  }
+  /**
+   * Create new empty paragraph.
+   *
+   * @returns {RTETextBlock} Paragraph.
+   */
+  createNewParagraph() {
+    return new RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    const strategy = ActionHandleStrategyRegistry.get(action.constructor.name, RTETextBlock.name);
+    if (strategy) {
+      strategy.execute(action, this);
+    }
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(TextStyleAnnotationAction.name, RTETextBlock.name, new BlockUpdateTextStyleStrategy());
+  ActionHandleStrategyRegistry.register(LinkGroupAnnotationAction.name, RTETextBlock.name, new BlockUpdateLinkGroupStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, RTETextBlock.name, new BlockRemoveNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, RTETextBlock.name, new BlockAppendNodesStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTETextBlock.name, new BlockSplitWithTextNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_CHILD_NODES, RTETextBlock.name, new BlockReplaceNodesStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTETextBlock.name, new BlockMergeNodesStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.BREAK_SINGLE_BLOCK, RTETextBlock.name, new BlockInsertNewParagraphStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTETextBlock.name, new BlockInsertLineBreakStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTETextBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_BLOCK_CONTENT, RTETextBlock.name, new BlockDeleteTextContentStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTETextBlock.name, new BlockInsertImageIntoTextStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_NODES_BEFORE, RTETextBlock.name, new BlockInsertNodesBeforeNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTETextBlock.name, new BlockTransformToListStrategy());
+})();
+
+/**
+ * Insert a new paragraph at the image block special position strategy.
+ */
+class ImageInsertNewParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.breakSingleBlock(action.startContainerNode, action.startOffset, target);
+  }
+  /**
+   * Used to split a block of text at a specific position and insert a new paragraph block.
+   *
+   * @param {RTEImageNode} splitNode - The node that needs to be split into separate blocks.
+   * @param {number} startOffsetOfNode - The index or position within the `splitNode` where the block should be broken or split.
+   * @param {RTEImageBlock} target - The image block.
+   * @returns {Nullable<RTEBlock>} Returns either a new paragraph block or the new block created after splitting the original block.
+   */
+  breakSingleBlock(splitNode, startOffsetOfNode, target) {
+    const newParagraph = RTETextBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '' }],
+    });
+    if (this.isCaretPositionAtImageBlockEnd(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksAfterAction(target, newParagraph));
+    }
+    else if (this.isCaretPositionAtImageBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksBeforeAction(target, newParagraph));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      target.apply(splitBlockAction);
+      return splitBlockAction.newBlock;
+    }
+    return newParagraph;
+  }
+}
+
+/**
+ * Break the current block after press enter, this action is similar with the SplitBlockWithNodeAction,
+ * The SplitBlockWithNodeAction split the current block to two same type blocks, but this action will create new paragraph or list item when break at start or end.
+ * The property `newBlock` use to store the new create block if need.
+ *
+ * @example currentBlock.apply(new BreakSingleBlockAction(startContainerNode, startOffset))
+ */
+class BreakSingleBlockAction extends ModifyContentAction {
+  constructor(startContainerNode, startOffset) {
+    super();
+    this.type = exports.ModifyContentActionType.BREAK_SINGLE_BLOCK;
+    this.startContainerNode = startContainerNode;
+    this.startOffset = startOffset;
+  }
+}
+
+/**
+ * The image block insert line break strategy.
+ */
+class ImageInsertLineBreakStrategy extends ActionHandleStrategy {
+  /**
+   * The image block not support insert the line break node, so invoke the insert new paragraph logic directly.
+   *
+   * @param {LineBreakSingleBlockAction} action - The action instance.
+   * @param {RTEImageBlock} target - The image block.
+   */
+  handleAction(action, target) {
+    const insertNewParagraphAction = new BreakSingleBlockAction(action.startContainerNode, action.startOffset);
+    target.apply(insertNewParagraphAction);
+    const newBlock = insertNewParagraphAction.newBlock;
+    if (newBlock) {
+      action.lineBreakNode = newBlock.nodes[0];
+    }
+  }
+}
+
+/**
+ * Insert a line break node into multiple blocks selection at special position strategy.
+ */
+class ImageInsertLineBreakWithBlocksStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks, target);
+  }
+  /**
+   * Inserts a new paragraph block with a line break after a selected block of text in a rich text editor.
+   *
+   * @param {RTEBlock[]} selectedBlocks - An array of RTEBlock objects that represent the blocks that have been selected for a specific action in the Rich Text Editor.
+   * @param {RTEImageBlock} target - The image block.
+   * @returns {Nullable<RTETextNode>} Returns a Nullable RTETextNode.
+   */
+  lineBreakMultipleBlocks(selectedBlocks, target) {
+    const newParagraph = RTETextBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '\n' }],
+    });
+    target.parent.apply(new InsertBlocksAfterAction(target, newParagraph));
+    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
+    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
+      afterNodes.push(new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', newParagraph));
+    }
+    newParagraph.apply(new AppendChildNodesAction(afterNodes));
+    return newParagraph['nodes'][0];
+  }
+  /**
+   * Concat the child nodes of multiple RTEBlocks if both are not images.
+   *
+   * @param {RTEBlock[]} blocks - multiple block of content in a rich text editor, such as a paragraph, heading, image, etc.
+   * @returns {RTENode[]} Array of connected block nodes
+   */
+  concatBlocksNodes(blocks) {
+    const nodes = [];
+    blocks.map((block) => {
+      if (block.type !== 'image') {
+        nodes.push(...block['nodes']);
+        block.parent.apply(new RemoveChildAction(block));
+      }
+    });
+    return nodes;
+  }
+}
+
+/**
+ * Insert a image node at the special position of image block.
+ */
+class ImageBlockInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const splitNode = action.splitPointNode;
+    const startOffsetOfNode = action.startOffsetOfNode;
+    const newImageBlock = action.imageBlockToBeInserted;
+    const newImageNodes = newImageBlock.nodes;
+    if (target.nodes.length < 1) {
+      target.apply(new AppendChildNodesAction(newImageNodes));
+    }
+    else if (this.isCaretPositionAtImageBlockEnd(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksAfterAction(target, newImageBlock));
+    }
+    else if (this.isCaretPositionAtImageBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksBeforeAction(target, newImageBlock));
+    }
+    else {
+      target.apply(new SplitBlockWithNodeAction(splitNode, startOffsetOfNode));
+      target.parent.apply(new InsertBlocksAfterAction(target, newImageBlock));
+    }
+  }
+}
+
+/**
+ * Insert some text nodes at the behind of the node strategy.
+ */
+class BlockInsertNodesAfterNodeStrategy extends BlockReplaceNodeWithNodesStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const referNode = action.referNode;
+    const nodes = [referNode, ...action.nodesToBeInserted];
+    this.replaceNodeWithNodes(target, referNode, nodes);
+  }
+}
+
+/**
+ * Image block
+ */
+class RTEImageBlock extends RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'image';
+    this.nodes = [];
+  }
+  /**
+   * Converts a VegaRTEImageBlock object into an RTEImageBlock object by mapping nodes and creating annotations.
+   *
+   * @param {VegaRTEImageBlock} block - The block object to be converted.
+   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
+   */
+  static from(block) {
+    const imageBlock = new RTEImageBlock(block.id);
+    const { annotations } = block;
+    imageBlock.nodes = block.nodes.map((image) => RTEImageNode.from(image, imageBlock));
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (typeGuard.isNonNullable(item)) {
+          imageBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    return imageBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.nodes.map((node) => node.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.nodes.length > 0 && this.nodes.some((node) => node.url.length > 0);
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.nodes[this.nodes.length - 1];
+  }
+  /**
+   * Create a new image block.
+   *
+   * @returns {RTEImageBlock} - The empty image block.
+   */
+  createNewImageBlock() {
+    return new RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_BLOCK_CONTENT, RTEImageBlock.name, new BlockDeleteImageStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEImageBlock.name, new BlockMergeNodesStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, RTEImageBlock.name, new BlockRemoveNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, RTEImageBlock.name, new BlockAppendNodesStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_CHILD_NODES, RTEImageBlock.name, new BlockReplaceNodesStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEImageBlock.name, new BlockSplitWithImageNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertNewParagraphStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertLineBreakStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEImageBlock.name, new ImageInsertLineBreakWithBlocksStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEImageBlock.name, new ImageBlockInsertImageStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_NODES_BEFORE, RTEImageBlock.name, new BlockInsertNodesBeforeNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_NODES_AFTER, RTEImageBlock.name, new BlockInsertNodesAfterNodeStrategy());
+})();
+
+/**
+ * The list item block block delete text content strategy.
+ */
+class ListItemDeleteTextContentStrategy extends BlockDeleteTextContentStrategy {
+  /**
+   * Delete the list item content and delete the parent list after delete the last item.
+   *
+   * @param {DeleteBlockContentAction} action - The delete block content action instance.
+   * @param {RTEListItemBlock} target - The list item block.
+   */
+  handleAction(action, target) {
+    const listBlock = target.parent;
+    this.deleteNodeContent(action, target);
+    if (listBlock.blocks.length === 0) {
+      listBlock.parent.apply(new RemoveChildAction(listBlock));
+    }
+  }
+}
+
+/**
+ * Remove list item child node strategy.
+ */
+class ListItemRemoveNodeStrategy extends ActionHandleStrategy {
+  /**
+   * Remove child node from the list item, remove the list item if the list item is empty.
+   *
+   * @param {RemoveChildAction} action - The remove child action instance.
+   * @param {RTEListItemBlock} target - The list item block.
+   */
+  handleAction(action, target) {
+    target.nodes = target.nodes.filter((node) => node !== action.entityToBeRemoved);
+    if (target.nodes.length === 0 && (!target.children || !target.children.length)) {
+      target.parent.apply(new RemoveChildAction(target));
+    }
+  }
+}
+
+/**
+ * Remove list item nest list block strategy.
+ */
+class ListItemRemoveNestListStrategy extends ActionHandleStrategy {
+  /**
+   * Remove the nest list block from the list item, clear the property children when the children is empty.
+   *
+   * @param {RemoveNestListAction} action - The action instance.
+   * @param {RTEListItemBlock} target - The list item block.
+   */
+  handleAction(action, target) {
+    if (target.children) {
+      if (target.children.length > 1) {
+        target.children = target.children.filter((child) => child !== action.nestListBlockToBeRemoved);
+      }
+      else {
+        target.children = undefined;
+      }
+    }
+  }
+}
+
+/**
+ * Replace list item nest list strategy.
+ */
+class ListItemReplaceNestListStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newList.forEach((listBlock) => {
+      listBlock.parent = target;
+    });
+    target.children = action.newList;
+  }
+}
+
+/**
+ * Insert new paragraph into current list item block at special position.
+ */
+class ListItemInsertNewParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    action.newBlock = this.breakSingleListItemBlock(action.startContainerNode, action.startOffset, target);
+  }
+  /**
+   * Breaks a single list item block at a specific position.
+   *
+   * @param {RTETextNode} splitNode - The node that needs to be split within a list item block.
+   * @param {number} startOffsetOfNode - The index within the `splitNode` where the break operation should occur.
+   * @param {RTEListItemBlock} target - The list item block.
+   * @returns {Nullable<RTEBlock>} Returns either a new `RTEListItemBlock` if the caret
+   * position is at the end of the `splitNode`, or it returns the result of splitting the block at the
+   * caret position if it is neither at the start nor at the end.
+   */
+  breakSingleListItemBlock(splitNode, startOffsetOfNode, target) {
+    const newListItem = target.createNewListItem();
+    const newBreakNode = this.copyInlineStyleToNewNode(splitNode);
+    newListItem.apply(new AppendChildNodesAction([newBreakNode]));
+    if (this.isCaretPositionAtTextBlockEnd(target, splitNode, startOffsetOfNode)) {
+      return this.breakListItemAtEnd(newListItem, target);
+    }
+    else if (this.isCaretPositionAtTextBlockStart(target, splitNode, startOffsetOfNode)) {
+      target.parent.apply(new InsertBlocksBeforeAction(target, newListItem));
+    }
+    else {
+      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
+      target.apply(splitBlockAction);
+      return splitBlockAction.newBlock;
+    }
+    return newListItem;
+  }
+  /**
+   * Breaks a list item at the end and handles the insertion of a new list item or paragraph accordingly.
+   *
+   * @param {RTEListItemBlock} newListItem - Item that represents a new list item to be added to the existing list.
+   * @param {RTEListItemBlock} target - The list item block.
+   * @returns {RTEBlock} Returns a `RTEBlock`.
+   */
+  breakListItemAtEnd(newListItem, target) {
+    const lastItem = target.parent.blocks[target.parent.blocks.length - 1];
+    const currentItemIsEmpty = target.nodes.length === 1 && target.nodes[0].isEmpty();
+    if (target === lastItem && currentItemIsEmpty) {
+      const parentParent = target.parent.parent;
+      if (parentParent['type'] !== 'list-item') {
+        const newParagraph = RTETextBlock.from({
+          id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+          type: 'paragraph',
+          nodes: [],
+        });
+        newParagraph.apply(new AppendChildNodesAction(newListItem.nodes));
+        parentParent.apply(new InsertBlocksAfterAction(target.parent, newParagraph));
+        target.parent.apply(new RemoveChildAction(target));
+        return newParagraph;
+      }
+      else {
+        parentParent.parent.apply(new InsertBlocksAfterAction(parentParent, newListItem));
+        target.parent.apply(new RemoveChildAction(target));
+      }
+    }
+    else {
+      target.parent.apply(new InsertBlocksAfterAction(target, newListItem));
+    }
+    return newListItem;
+  }
+  /**
+   * Copy the inline style to new node
+   *
+   * @param {RTETextNode} needCopedNode - The node that needed to be copied to
+   * @returns {RTETextNode} Returns a `RTETextNode`.
+   */
+  copyInlineStyleToNewNode(needCopedNode) {
+    const textNode = needCopedNode.cloneWithText('');
+    // The link annotation doesn't need to inherit
+    textNode.annotationMap.delete(exports.NodeAnnotationTypeEnum.LINK);
+    return textNode;
+  }
+}
+
+/**
+ * Insert image node to list item block strategy.
+ */
+class ListItemInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * The image node can not insert into list item block, so insert image after parent list block.
+   *
+   * @param {InsertImageToBlockAction} action - The action instance.
+   * @param {RTEListItemBlock} target - The list item block.
+   */
+  handleAction(action, target) {
+    target.parent.apply(action);
+  }
+}
+
+/**
+ * List item block
+ */
+class RTEListItemBlock extends RTETextBlock {
+  constructor(id, children) {
+    super(id, 'list-item');
+    this.children = [];
+    this.children = children;
+  }
+  /**
+   * Converts a VegaRTEListItemBlock object to an RTEListItemBlock
+   *
+   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListItemBlock` object into an `RTEListItemBlock`.
+   * @returns {RTEListItemBlock} Return an instance of `RTEListItemBlock`
+   */
+  static from(block) {
+    const listItemBlock = new RTEListItemBlock(block.id);
+    listItemBlock.nodes = block.nodes.map((richText) => RTETextNode.from(richText, listItemBlock));
+    if (block.children) {
+      listItemBlock.children = block.children.map((child) => {
+        const listBlock = RTEListBlock.from(child);
+        listBlock.parent = listItemBlock;
+        return listBlock;
+      });
+    }
+    const { annotations } = block;
+    if (annotations) {
+      Object.entries(annotations).forEach(([type, value]) => {
+        const item = this.createAnnotationEntity(type, value);
+        if (typeGuard.isNonNullable(item)) {
+          listItemBlock.annotationMap.set(...item);
+        }
+      });
+    }
+    return listItemBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    var _a;
+    return Object.assign(Object.assign({}, super.toJSON()), { type: 'list-item', children: (_a = this.children) === null || _a === void 0 ? void 0 : _a.map((block) => block.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  cloneWithNodes(nodes) {
+    const block = new RTEListItemBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
+    block.nodes = [];
+    block.apply(new AppendChildNodesAction(nodes));
+    return block;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    if (this.children && this.children.length > 0) {
+      const childListBlock = this.children[this.children.length - 1];
+      return childListBlock.getLastNode();
+    }
+    return super.getLastNode();
+  }
+  /**
+   * Create a new list item block.
+   *
+   * @returns {RTEListItemBlock} - A list item block.
+   */
+  createNewListItem() {
+    return new RTEListItemBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_BLOCK_CONTENT, RTEListItemBlock.name, new ListItemDeleteTextContentStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new BlockInsertLineBreakStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEListItemBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, RTEListItemBlock.name, new ListItemRemoveNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_NEST_LIST, RTEListItemBlock.name, new ListItemRemoveNestListStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, RTEListItemBlock.name, new BlockAppendNodesStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEListItemBlock.name, new BlockSplitWithTextNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_CHILD_NODES, RTEListItemBlock.name, new BlockReplaceNodesStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_NEST_LIST, RTEListItemBlock.name, new ListItemReplaceNestListStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEListItemBlock.name, new BlockMergeNodesStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new ListItemInsertNewParagraphStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListItemBlock.name, new ListItemInsertImageStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_NODES_BEFORE, RTEListItemBlock.name, new BlockInsertNodesBeforeNodeStrategy());
+})();
+
+/**
+ * Insert block array at the front of the block strategy.
+ */
+class BlockInsertBlocksBeforeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.replaceBlockWithBlocks(target, action.referBlock, [
+      ...action.blocksToBeInserted,
+      action.referBlock,
+    ]);
+  }
+  /**
+   * Replaces a specific block with an array of blocks within a RTEContentBlock array.
+   *
+   * @param {RTEListBlock|VegaRTEContent} target - The list block or the VegaRTEContent instance.
+   * @param {RTEBlock} referBlock - Used as a reference block to identify the block that needs to be replaced in the `blocks` array.
+   * @param {RTEBlock[]} blocks - An array of RTEBlock objects that you want to replace the `referBlock` with in the `blocks` array.
+   */
+  replaceBlockWithBlocks(target, referBlock, blocks) {
+    if (target.blocks) {
+      blocks.forEach((block) => {
+        block.parent = target;
+      });
+      const arrayFixed = target.blocks;
+      target.blocks = arrayFixed.flatMap((block) => {
+        if (block === referBlock) {
+          return blocks;
+        }
+        else {
+          return block;
+        }
+      });
+    }
+  }
+}
+
+/**
+ * Insert block array at the behind of the block strategy.
+ */
+class BlockInsertBlocksAfterStrategy extends BlockInsertBlocksBeforeStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    this.replaceBlockWithBlocks(target, action.referBlock, [
+      action.referBlock,
+      ...action.blocksToBeInserted,
+    ]);
+  }
+}
+
+/**
+ * Append new block array to list block or VegaRTEContent instance strategy.
+ */
+class BlockAppendBlocksStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const newBlocks = action.entityToBeAppended;
+    if (target.blocks) {
+      newBlocks.forEach((block) => {
+        block.parent = target;
+      });
+      const arrayFixed = target.blocks;
+      target.blocks = arrayFixed.concat(newBlocks);
+    }
+  }
+}
+
+/**
+ * Delete the nest list block action
+ *
+ * @example needRemovedNestList.parent.apply(new RemoveNestListAction(needRemovedNestList))
+ */
+class RemoveNestListAction extends ModifyContentAction {
+  constructor(childList) {
+    super();
+    this.type = exports.ModifyContentActionType.DELETE_NEST_LIST;
+    this.nestListBlockToBeRemoved = childList;
+  }
+}
+
+/**
+ * List block or VegaRTEContent remove child block strategy.
+ */
+class BlockRemoveChildBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const blockToBeRemoved = action.entityToBeRemoved;
+    if (target.blocks) {
+      target.blocks = target.blocks.filter((block) => block !== blockToBeRemoved);
+    }
+  }
+}
+
+/**
+ * List remove list item strategy.
+ */
+class ListRemoveListItemStrategy extends BlockRemoveChildBlockStrategy {
+  /**
+   * Remove the list item, check the list item and remove self if the list item is empty.
+   *
+   * @param {RemoveChildAction} action - The remove action instance.
+   * @param {RTEListBlock} target - The list block.
+   */
+  handleAction(action, target) {
+    super.handleAction(action, target);
+    const parent = target.parent;
+    if (target.blocks.length === 0 && parent) {
+      // The parent is a list item mean the current block is a nest list, so we need to use RemoveNestListAction to remove the item
+      if (parent['type'] === 'list-item') {
+        parent.apply(new RemoveNestListAction(target));
+      }
+      else {
+        parent.apply(new RemoveChildAction(target));
+      }
+    }
+  }
+}
+
+/**
+ * Convert the selected blocks to list strategy.
+ */
+class ListTransformToListStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const selectedBlocks = action.selectedBlocks;
+    const bulletList = target.parent.createList(action.listType);
+    const isSameList = selectedBlocks.every((block) => block.parent === target);
+    if (isSameList) {
+      // Select one or more list items belonging to the same list, and all items in this list should be updated
+      bulletList.apply(new AppendChildNodesAction(target.blocks));
+      target.parent.apply(new InsertBlocksAfterAction(target, bulletList));
+      target.parent.apply(new RemoveChildAction(target));
+      selectedBlocks.forEach((block) => block.nodes.map((node) => node.apply(new SyncUpSelectionAction())));
+    }
+    else {
+      const listItems = action.selectedBlocks.map((block) => target.parent.toListItem(block));
+      bulletList.apply(new AppendChildNodesAction(listItems));
+      target.parent.apply(new InsertBlocksAfterAction(target, bulletList));
+      action.selectedBlocks.forEach((block) => {
+        block.parent.apply(new RemoveChildAction(block));
+      });
+      if (target.blocks.length === 0) {
+        target.parent.apply(new RemoveChildAction(target));
+      }
+    }
+  }
+}
+
+/**
+ * Convert the selected list block to paragraph strategy.
+ */
+class ListTransformToParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    let isSelectedFirstBlock = false;
+    let isSelectedLastBlock = false;
+    const selectedBlocks = action.selectedBlocks;
+    const currentParagraph = selectedBlocks.map((block) => {
+      block.nodes.map((node) => node.apply(new SyncUpSelectionAction()));
+      if (block === target.blocks[0])
+        isSelectedFirstBlock = true;
+      if (block === target.blocks[target.blocks.length - 1])
+        isSelectedLastBlock = true;
+      return this.toParagraph(block);
+    });
+    if (isSelectedFirstBlock) {
+      target.parent.apply(new InsertBlocksBeforeAction(target, ...currentParagraph));
+    }
+    else if (isSelectedLastBlock) {
+      target.parent.apply(new InsertBlocksAfterAction(target, ...currentParagraph));
+    }
+    else {
+      const startIndex = target.blocks.indexOf(selectedBlocks[0]);
+      const lastIndex = target.blocks.indexOf(selectedBlocks[selectedBlocks.length - 1]);
+      const firstBulletList = target.parent.createList(target.type);
+      firstBulletList.apply(new AppendChildNodesAction(target.blocks.slice(0, startIndex)));
+      const lastBulletList = target.parent.createList(target.type);
+      lastBulletList.apply(new AppendChildNodesAction(target.blocks.slice(lastIndex + 1)));
+      target.parent.apply(new InsertBlocksBeforeAction(target, firstBulletList, ...currentParagraph, lastBulletList));
+      target.parent.apply(new RemoveChildAction(target));
+    }
+    selectedBlocks.map((block) => {
+      target.apply(new RemoveChildAction(block));
+    });
+    if (target.blocks.length === 0) {
+      target.parent.apply(new RemoveChildAction(target));
+    }
+  }
+  /**
+   * Converts a RTEListItemBlock to a RTETextBlock representing a paragraph.
+   *
+   * @param {RTEListItemBlock} block - The block that will be covered
+   * @returns {RTETextBlock} Returns a `RTETextBlock`.
+   */
+  toParagraph(block) {
+    const textBlock = new RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
+    textBlock.apply(new AppendChildNodesAction(block['nodes']));
+    textBlock['annotationMap'] = block['annotationMap'];
+    return textBlock;
+  }
+}
+
+/**
+ * Insert image to list block strategy.
+ */
+class ListInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * Insert image block at behind of the list item block.
+   *
+   * @param {InsertImageToBlockAction} action - The insert image action instance.
+   * @param {RTEListBlock} target - The list block.
+   */
+  handleAction(action, target) {
+    const imageBlock = action.imageBlockToBeInserted;
+    if (target.parent['type'] !== 'list-item') {
+      target.parent.apply(new InsertBlocksAfterAction(target, imageBlock));
+    }
+    else {
+      target.parent.apply(action);
+    }
+  }
+}
+
+/**
+ * List block
+ */
+class RTEListBlock extends RTEBlock {
+  constructor(id, type) {
+    super(id);
+    this.type = 'bullet-list';
+    this.blocks = [];
+    this.type = type;
+  }
+  /**
+   * Converts a VegaRTEListBlock object to an RTEListBlock
+   *
+   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListBlock` object into an `RTEListBlock`.
+   * @returns {RTEListBlock} Return an instance of `RTEListBlock`
+   */
+  static from(block) {
+    const listBlock = new RTEListBlock(block.id, block.type);
+    listBlock.blocks = block.blocks.map((item) => {
+      const listItemBlock = RTEListItemBlock.from(item);
+      listItemBlock.parent = listBlock;
+      return listItemBlock;
+    });
+    return listBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, blocks: this.blocks.map((block) => block.toJSON()) });
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.blocks.length > 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.blocks[this.blocks.length - 1].getLastNode();
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, RTEListBlock.name, new ListRemoveListItemStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_BLOCKS_BEFORE, RTEListBlock.name, new BlockInsertBlocksBeforeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_BLOCKS_AFTER, RTEListBlock.name, new BlockInsertBlocksAfterStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, RTEListBlock.name, new BlockAppendBlocksStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTEListBlock.name, new ListTransformToListStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK, RTEListBlock.name, new ListTransformToParagraphStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListBlock.name, new ListInsertImageStrategy());
+})();
+
+/**
+ * Class representing the content state of the rich text editor.
+ */
+class VegaRTEContent {
+  constructor(blocks) {
+    blocks.forEach((block) => {
+      block.parent = this;
+    });
+    this.blocks = blocks;
+  }
+  /**
+   * Converts a JSON array of blocks to a class array of RTEContentBlock.
+   *
+   * @param {VegaRTEContentBlock[]} value The JSON array of blocks to convert.
+   * @returns {VegaRTEContent} The converted array of RTEContentBlock.
+   */
+  static fromJSON(value) {
+    const blocks = value.map((block) => {
+      switch (block.type) {
+        case 'paragraph':
+        case 'title':
+        case 'subtitle':
+        case 'heading-1':
+        case 'heading-2':
+        case 'heading-3': {
+          return RTETextBlock.from(block);
+        }
+        case 'image':
+          return RTEImageBlock.from(block);
+        case 'bullet-list':
+        case 'number-list':
+          return RTEListBlock.from(block);
+        default: {
+          throw new Error(`[Vega] Unknown block type: ${block.type}`);
+        }
+      }
+    });
+    return new VegaRTEContent(blocks);
+  }
+  /**
+   * Create an empty content state
+   *
+   * @returns {VegaRTEContent} An empty content state
+   */
+  static createEmptyContent() {
+    return VegaRTEContent.fromJSON([
+      {
+        id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+        type: 'paragraph',
+        nodes: [
+          {
+            id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+            type: 'text',
+            text: '',
+          },
+        ],
+      },
+    ]);
+  }
+  /**
+   * 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) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+  /**
+   * Convert text to list.
+   *
+   * @param {RTETextBlock} block - block
+   * @returns {RTEListItemBlock} list item block dto.
+   */
+  toListItem(block) {
+    block.nodes.map((node) => node.apply(new SyncUpSelectionAction()));
+    const listItemBlock = new RTEListItemBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
+    listItemBlock.apply(new AppendChildNodesAction(block['nodes']));
+    listItemBlock['annotationMap'] = block['annotationMap'];
+    return listItemBlock;
+  }
+  /**
+   * create list.
+   *
+   * @param {ListType} type - type
+   * @returns {RTEListBlock} list block dto.
+   */
+  createList(type) {
+    return new RTEListBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), type);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, VegaRTEContent.name, new BlockRemoveChildBlockStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, VegaRTEContent.name, new BlockAppendBlocksStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_BLOCKS_BEFORE, VegaRTEContent.name, new BlockInsertBlocksBeforeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_BLOCKS_AFTER, VegaRTEContent.name, new BlockInsertBlocksAfterStrategy());
+})();
+
+exports.AnnotationAction = AnnotationAction;
+exports.AppendChildNodesAction = AppendChildNodesAction;
+exports.BlockAnnotation = BlockAnnotation;
+exports.BoldAnnotation = BoldAnnotation;
+exports.BoldAnnotationAction = BoldAnnotationAction;
+exports.BreakSingleBlockAction = BreakSingleBlockAction;
+exports.ClearFormattingAnnotationAction = ClearFormattingAnnotationAction;
+exports.CodeAnnotationAction = CodeAnnotationAction;
+exports.HorizontalAlignmentAnnotation = HorizontalAlignmentAnnotation;
+exports.ImageAnnotation = ImageAnnotation;
+exports.IndentAnnotation = IndentAnnotation;
+exports.InsertBlocksAfterAction = InsertBlocksAfterAction;
+exports.InsertBlocksBeforeAction = InsertBlocksBeforeAction;
+exports.ItalicAnnotation = ItalicAnnotation;
+exports.LinkAnnotationAction = LinkAnnotationAction;
+exports.MergeTwoBlocksNodesAction = MergeTwoBlocksNodesAction;
+exports.ModifyContentAction = ModifyContentAction;
+exports.NodeAnnotation = NodeAnnotation;
+exports.RTEBlock = RTEBlock;
+exports.RTEImageBlock = RTEImageBlock;
+exports.RTEImageNode = RTEImageNode;
+exports.RTEListBlock = RTEListBlock;
+exports.RTEListItemBlock = RTEListItemBlock;
+exports.RTENode = RTENode;
+exports.RTETextBlock = RTETextBlock;
+exports.RTETextNode = RTETextNode;
+exports.RTE_TEXT_COLORS = RTE_TEXT_COLORS;
+exports.RemoveChildAction = RemoveChildAction;
+exports.ReplaceChildNodesAction = ReplaceChildNodesAction;
+exports.SelectionRangeAnnotation = SelectionRangeAnnotation;
+exports.SplitBlockWithNodeAction = SplitBlockWithNodeAction;
+exports.StrikethroughAnnotation = StrikethroughAnnotation;
+exports.TextColorAnnotation = TextColorAnnotation;
+exports.TextSplittableAction = TextSplittableAction;
+exports.TextStyleAnnotation = TextStyleAnnotation;
+exports.TextStyleAnnotationAction = TextStyleAnnotationAction;
+exports.UnderlineAnnotation = UnderlineAnnotation;
+exports.UpdateTextAction = UpdateTextAction;
+exports.VegaRTEContent = VegaRTEContent;
+exports.ZERO_WIDTH_SPACE = ZERO_WIDTH_SPACE;
+exports.stateEntityRenderingRegistry = stateEntityRenderingRegistry;