@globalpayments/vega 2.13.0 → 2.50.0

package/dist/esm/code-block-527df049.js

@@ -0,0 +1,3046 @@
+import { i as isNonNullable } from './type-guard-158f6d7a.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { d as domNodeSubjectFactory } from './dom-node-subject-factory-eb6bba5d.js';
+import { a as VegaInternalRichTextEditorFlushChanges, b as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-178b2743.js';
+import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8ada793f.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-2ada8e22.js';
+
+var InternalAnnotationTypeEnum;
+(function (InternalAnnotationTypeEnum) {
+  InternalAnnotationTypeEnum["SELECTION_RANGE"] = "SELECTION_RANGE";
+  InternalAnnotationTypeEnum["CLEAR_FORMATTING"] = "CLEAR_FORMATTING";
+  InternalAnnotationTypeEnum["LINK_GROUP"] = "LINK_GROUP";
+})(InternalAnnotationTypeEnum || (InternalAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+class Annotation {
+}
+
+var BlockAnnotationTypeEnum;
+(function (BlockAnnotationTypeEnum) {
+  BlockAnnotationTypeEnum["ALIGNMENT"] = "ALIGNMENT";
+  BlockAnnotationTypeEnum["TEXT_STYLE"] = "TEXT_STYLE";
+  BlockAnnotationTypeEnum["INDENT"] = "INDENT";
+})(BlockAnnotationTypeEnum || (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();
+
+var ModifyContentActionType;
+(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";
+  ModifyContentActionType["TRANSFORM_TO_CODE_BLOCK"] = "TRANSFORM_TO_CODE_BLOCK";
+  ModifyContentActionType["UPDATE_CODE_BLOCK"] = "UPDATE_CODE_BLOCK";
+  ModifyContentActionType["SWITCH_OUT_FROM_CODE_BLOCK"] = "SWITCH_OUT_FROM_CODE_BLOCK";
+  ModifyContentActionType["DELETE_CODE_BLOCK"] = "DELETE_CODE_BLOCK";
+})(ModifyContentActionType || (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 = BlockAnnotationTypeEnum.ALIGNMENT;
+    this.textAlign = textAlign;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {VegaRTEBlockAlignment} textAlign - Text alignment
+   * @returns {[BlockAnnotationTypeEnum.ALIGNMENT, HorizontalAlignmentAnnotation]} Map item for the annotation
+   */
+  static from(textAlign) {
+    return [BlockAnnotationTypeEnum.ALIGNMENT, new HorizontalAlignmentAnnotation(textAlign)];
+  }
+  /**
+   * Generate the 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}`;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new HorizontalAlignmentAnnotation(this.textAlign);
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation for block indentation
+ */
+class IndentAnnotation extends BlockAnnotation {
+  constructor(indent) {
+    super();
+    this.type = BlockAnnotationTypeEnum.INDENT;
+    this.indent = Math.max(0, indent);
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {number} indent - Text alignment
+   * @returns {[BlockAnnotationTypeEnum.INDENT, IndentAnnotation]} Map item for the annotation
+   */
+  static from(indent) {
+    return [BlockAnnotationTypeEnum.INDENT, new IndentAnnotation(indent)];
+  }
+  /**
+   * Generate the JSON item of the annotation
+   *
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   */
+  toJSON() {
+    return this.indent > 0 ? { indent: this.indent } : null;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new IndentAnnotation(this.indent);
+  }
+  /**
+   * 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 {
+      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.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          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);
+  }
+  /**
+   * clone annotations of the block
+   *
+   * @returns {BlockAnnotations} - Cloned annotations
+   */
+  cloneAnnotations() {
+    return new Map(Array.from(this.annotationMap.entries()).map(([key, value]) => [key, value.clone()]));
+  }
+}
+
+var NodeTypeEnum;
+(function (NodeTypeEnum) {
+  NodeTypeEnum["TEXT"] = "TEXT";
+  NodeTypeEnum["IMAGE"] = "IMAGE";
+  NodeTypeEnum["CODE_BLOCK_NODE"] = "CODE_BLOCK_NODE";
+})(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.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, {});
+      }
+    }
+  }
+  /**
+   * Clones the annotations of the current RTETextNode.
+   *
+   * @returns {NodeAnnotations} A new Map containing cloned annotations.
+   */
+  cloneAnnotations() {
+    return new Map(Array.from(this.annotationMap.entries()).map(([key, value]) => [key, value.clone()]));
+  }
+}
+
+var NodeAnnotationTypeEnum;
+(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";
+})(NodeAnnotationTypeEnum || (NodeAnnotationTypeEnum = {}));
+/**
+ * Abstract class for all annotations
+ */
+class NodeAnnotation extends Annotation {
+}
+
+/**
+ * Annotation for image
+ */
+class ImageAnnotation extends NodeAnnotation {
+  constructor(size = 'md', alt) {
+    super();
+    this.type = NodeAnnotationTypeEnum.IMAGE;
+    this.size = size;
+    this.alt = alt;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string} size - Image size
+   * @param {string} alt - Image alt
+   * @returns {[NodeAnnotationTypeEnum.IMAGE, ImageAnnotation]} Map item for the annotation
+   */
+  static from(size, alt) {
+    return [NodeAnnotationTypeEnum.IMAGE, new ImageAnnotation(size, alt)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   */
+  toJSON() {
+    return isNonNullable(this.alt)
+      ? {
+        size: this.size,
+        alt: this.alt,
+      }
+      : {
+        size: this.size,
+      };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new ImageAnnotation(this.size, this.alt);
+  }
+  /**
+   * 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) {
+    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(isNonNullable));
+    return imageNode;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    const imageAnnotation = this.annotationMap.get(NodeAnnotationTypeEnum.IMAGE);
+    const annotations = {};
+    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.size) {
+      annotations.size = imageAnnotation.size;
+    }
+    if (imageAnnotation === null || imageAnnotation === void 0 ? void 0 : imageAnnotation.alt) {
+      annotations.alt = imageAnnotation.alt;
+    }
+    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'image', url: this.url });
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTEImageNode(this.id, this.url, this.parentBlock, super.cloneAnnotations());
+  }
+  /**
+   * @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(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 = 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);
+      }
+    }
+  }
+}
+
+/** Append blocks or nodes to a block */
+class AppendChildNodesAction extends ModifyContentAction {
+  constructor(childNodes) {
+    super();
+    this.type = 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 {RTEBlockWithNodes} 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 = 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 = ModifyContentActionType.REPLACE_CHILD_NODES;
+    this.newChildNodes = newChildNodes;
+  }
+}
+
+/**
+ * Insert a new block before a existing block
+ *
+ * @example currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, newBlock, ...))
+ */
+class InsertBlocksBeforeAction extends ModifyContentAction {
+  constructor(referBlock, ...blocksToBeInserted) {
+    super();
+    this.type = ModifyContentActionType.INSERT_BLOCKS_BEFORE;
+    this.referBlock = referBlock;
+    this.blocksToBeInserted = blocksToBeInserted;
+  }
+}
+
+/**
+ * Split the block with a split point node.
+ * The property `newBlock` use to store the new create block if need.
+ *
+ * @example block.apply(new SplitBlockWithNodeAction(node, offset))
+ */
+class SplitBlockWithNodeAction extends ModifyContentAction {
+  constructor(splitPointNode, startOffsetOfNode) {
+    super();
+    this.type = ModifyContentActionType.SPLIT_BLOCK_WITH_NODE;
+    this.splitPointNode = splitPointNode;
+    this.startOffsetOfNode = startOffsetOfNode;
+  }
+}
+
+/**
+ * Abstract class for which can be splittable
+ */
+class TextSplittableAction extends AnnotationAction {
+  constructor() {
+    super(...arguments);
+    /**
+     * Whether the action should split the node
+     */
+    this.doSplit = true;
+  }
+}
+
+/**
+ * Annotation to represent a selection range
+ */
+class SelectionRangeAnnotation extends Annotation {
+  constructor(range) {
+    super();
+    this.type = InternalAnnotationTypeEnum.SELECTION_RANGE;
+    this.range = range;
+  }
+  /**
+   * Clone the selection range annotation
+   *
+   * @returns {SelectionRangeAnnotation} A cloned instance of the selection range annotation
+   */
+  clone() {
+    return new SelectionRangeAnnotation(this.range);
+  }
+}
+
+/**
+ * Annotation to make text with strikethrough
+ */
+class StrikethroughAnnotation extends NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = NodeAnnotationTypeEnum.STRIKETHROUGH;
+    this.strikethrough = underline;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {Nullable<boolean>} strikethrough - Strikethrough annotation
+   * @returns {[NodeAnnotationTypeEnum.STRIKETHROUGH, StrikethroughAnnotation]} Map item for the annotation
+   */
+  static from(strikethrough) {
+    return [NodeAnnotationTypeEnum.STRIKETHROUGH, new StrikethroughAnnotation(strikethrough)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      strikethrough: this.strikethrough,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new StrikethroughAnnotation(this.strikethrough);
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.strikethrough ? 'v-rte--strikethrough' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation to make text with underline
+ */
+class UnderlineAnnotation extends NodeAnnotation {
+  constructor(underline) {
+    super();
+    this.type = NodeAnnotationTypeEnum.UNDERLINE;
+    this.underline = underline;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} underline - Underline annotation
+   * @returns {[NodeAnnotationTypeEnum.UNDERLINE, UnderlineAnnotation]} Map item for the annotation
+   */
+  static from(underline) {
+    return [NodeAnnotationTypeEnum.UNDERLINE, new UnderlineAnnotation(underline)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      underline: this.underline,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new UnderlineAnnotation(this.underline);
+  }
+  /**
+   * Generate the class for the annotation
+   *
+   * @returns {Nullable<string>} - Annotation class
+   */
+  renderClass() {
+    return this.underline ? 'v-rte--underline' : null;
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} - Annotation style
+   */
+  render() {
+    return null;
+  }
+}
+
+/**
+ * Annotation to make text Italic
+ */
+class ItalicAnnotation extends NodeAnnotation {
+  constructor(italic) {
+    super();
+    this.type = NodeAnnotationTypeEnum.ITALIC;
+    this.italic = italic;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} italic - Italic annotation
+   * @returns {[NodeAnnotationTypeEnum.ITALIC, ItalicAnnotation]} Map item for the annotation
+   */
+  static from(italic) {
+    return [NodeAnnotationTypeEnum.ITALIC, new ItalicAnnotation(italic)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      italic: this.italic,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new ItalicAnnotation(this.italic);
+  }
+  /**
+   * Generate the style for the annotation
+   *
+   * @returns {Nullable<AnnotationStyle>} Italic style
+   */
+  render() {
+    return this.italic ? { 'font-style': 'italic' } : null;
+  }
+}
+
+/**
+ * Annotation to make text bold
+ */
+class BoldAnnotation extends NodeAnnotation {
+  constructor(bold) {
+    super();
+    this.type = NodeAnnotationTypeEnum.BOLD;
+    this.bold = bold;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} bold - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.BOLD, BoldAnnotation]} Map item for the annotation
+   */
+  static from(bold) {
+    return [NodeAnnotationTypeEnum.BOLD, new BoldAnnotation(bold)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      bold: this.bold,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new BoldAnnotation(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 = NodeAnnotationTypeEnum.CODE;
+    this.code = code;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {boolean} code - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.CODE, CodeAnnotation]} Map item for the annotation
+   */
+  static from(code) {
+    return [NodeAnnotationTypeEnum.CODE, new CodeAnnotation(code)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      code: this.code,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new CodeAnnotation(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 = NodeAnnotationTypeEnum.TEXT_COLOR;
+    this.textColor = this.formatTextColor(textColor);
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {string} textColor - text color annotation
+   * @returns {[NodeAnnotationTypeEnum.TEXT_COLOR, TextColorAnnotation]} Map item for the annotation
+   */
+  static from(textColor) {
+    return [NodeAnnotationTypeEnum.TEXT_COLOR, new TextColorAnnotation(textColor)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<string, unknown>} JSON representation of the annotation
+   */
+  toJSON() {
+    return {
+      textColor: this.textColor.key,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new TextColorAnnotation(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: 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 = NodeAnnotationTypeEnum.LINK;
+    this.link = link;
+  }
+  /**
+   * Generate the map item for the annotation
+   *
+   * @param {VegaRTELink} link - Bold annotation
+   * @returns {[NodeAnnotationTypeEnum.LINK, LinkAnnotation]} Map item for the annotation
+   */
+  static from(link) {
+    return [
+      NodeAnnotationTypeEnum.LINK,
+      new LinkAnnotation({ href: link.href, groupKey: link.groupKey }),
+    ];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Record<'link', VegaRTELink>} JSON representation of the annotation
+   */
+  toJSON() {
+    return { link: { href: this.link.href, groupKey: this.link.groupKey } };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new LinkAnnotation(this.link);
+  }
+  /**
+   * 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 = InternalAnnotationTypeEnum.LINK_GROUP;
+    this.linkGroups = new Map();
+    this.linkGroups = new Map([[groupKey, []]]);
+  }
+  clone() {
+    const clonedAnnotation = new LinkGroupAnnotation('');
+    this.linkGroups.forEach((nodes, key) => {
+      clonedAnnotation.linkGroups.set(key, nodes.map((node) => node.clone()));
+    });
+    return clonedAnnotation;
+  }
+}
+
+/**
+ * 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(NodeAnnotationTypeEnum.LINK);
+    }
+  }
+}
+
+/**
+ * Update the text node property text action
+ *
+ * @example textNode.apply(new UpdateTextAction(newText))
+ */
+class UpdateTextAction extends ModifyContentAction {
+  constructor(text) {
+    super();
+    this.type = ModifyContentActionType.UPDATE_TEXT;
+    this.newTextContent = '';
+    this.newTextContent = text;
+  }
+}
+
+/**
+ * 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(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 = InternalAnnotationTypeEnum.CLEAR_FORMATTING;
+    this.items = [
+      NodeAnnotationTypeEnum.BOLD,
+      NodeAnnotationTypeEnum.ITALIC,
+      NodeAnnotationTypeEnum.UNDERLINE,
+      NodeAnnotationTypeEnum.STRIKETHROUGH,
+      NodeAnnotationTypeEnum.TEXT_COLOR,
+      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 (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 (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(isNonNullable));
+    }
+    return textNode;
+  }
+  /**
+   * Creates different types of text annotations based on the provided type and value.
+   *
+   * @param {keyof VegaRTETextAnnotations} type - The key of the type.
+   * @param {unknown} value - The value that will be used to create the specific type of annotation entity based on the `type` provided.
+   * @returns {Nullable<[RTENodeAnnotationMapKey, RTENodeAnnotationMapValue]>} Returning a nullable tuple containing a key and a
+   * value from the `RTENodeAnnotationMapKey` and `RTENodeAnnotationMapValue` types.
+   */
+  static createAnnotationEntity(type, value) {
+    switch (type) {
+      case 'bold':
+        return BoldAnnotation.from(value);
+      case 'italic':
+        return ItalicAnnotation.from(value);
+      case 'underline':
+        return UnderlineAnnotation.from(value);
+      case 'strikethrough':
+        return StrikethroughAnnotation.from(value);
+      case 'code':
+        return CodeAnnotation.from(value);
+      case 'textColor':
+        return TextColorAnnotation.from(value);
+      case 'link':
+        return LinkAnnotation.from(value);
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    const annotations = Array.from(this.annotationMap.values())
+      .filter((annotation) => annotation instanceof NodeAnnotation)
+      .reduce((record, annotation) => {
+      return Object.assign(Object.assign({}, record), annotation.toJSON());
+    }, {});
+    return Object.assign(Object.assign({ id: this.id }, (Object.keys(annotations).length > 0 ? { annotations } : {})), { type: 'text', text: this.text });
+  }
+  /**
+   * Creates a new RTETextNode with the specified text and copies the parent block and annotation map from the original node.
+   *
+   * @param {string} text - The text content of the RTETextNode that will be created.
+   * @returns {RTETextNode} An new RTETextNode
+   */
+  cloneWithText(text) {
+    return new RTETextNode(generateUUID(), text, this.parentBlock, super.cloneAnnotations());
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETextNode(this.id, this.text, this.parentBlock, super.cloneAnnotations());
+  }
+  /**
+   * Checks if a node is empty
+   *
+   * @returns {boolean}  It returns `true` if the node is empty
+   */
+  isEmpty() {
+    return !this.text || this.text === ZERO_WIDTH_SPACE || this.text === '\n';
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    const selectionRangeAnnotation = this.getAnnotationByType(InternalAnnotationTypeEnum.SELECTION_RANGE);
+    if (action instanceof TextSplittableAction && action.doSplit && selectionRangeAnnotation) {
+      const 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.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, { node: selectedNode });
+      }
+    }
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_TEXT, RTETextNode.name, new NodeUpdateTextStrategy());
+  ActionHandleStrategyRegistry.register(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 = BlockAnnotationTypeEnum.TEXT_STYLE;
+    this.textStyle = textStyle;
+  }
+  /**
+   * Generate the map item for the annotations
+   *
+   * @param {VegaRTETextStyleType} textStyle - the text style type
+   * @returns {[BlockAnnotationTypeEnum.TEXT_STYLE, TextStyleAnnotation]} Map item for the annotation
+   */
+  static from(textStyle) {
+    return [BlockAnnotationTypeEnum.TEXT_STYLE, new TextStyleAnnotation(textStyle)];
+  }
+  /**
+   * Generate the JSON representation of the annotation
+   *
+   * @returns {Nullable<Record<string, unknown>>} JSON representation of the annotation
+   */
+  toJSON() {
+    return { textStyle: this.textStyle };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new TextStyleAnnotation(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' };
+      }
+      case 'heading-4': {
+        return { fontFamily: 'Inter', fontSize: '16px', lineHeight: '22px', fontWeight: '500' };
+      }
+      case 'heading-5': {
+        return { fontFamily: 'Inter', fontSize: '14px', lineHeight: '22px', fontWeight: '500' };
+      }
+      case 'heading-6': {
+        return { fontFamily: 'Inter', fontSize: '12px', 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(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(InternalAnnotationTypeEnum.LINK_GROUP);
+    if (linkGroupAnnotation) {
+      const linkGroup = linkGroupAnnotation.linkGroups.get(action.groupKey);
+      linkGroupAnnotation.linkGroups.set(action.groupKey, [...linkGroup, ...action.nodes]);
+      target.annotationMap.set(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(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(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(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(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(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 = 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));
+        }
+        if (target.type === previousNode.parentBlock.type) {
+          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 (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',
+      'heading-4',
+      'heading-5',
+      'heading-6',
+    ].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(NodeAnnotationTypeEnum.LINK);
+        const curNodeLinkAnnotation = cur.getAnnotationByType(NodeAnnotationTypeEnum.LINK);
+        if (lastNodeLinkAnnotation &&
+          curNodeLinkAnnotation &&
+          lastNodeLinkAnnotation.toEqual(curNodeLinkAnnotation)) {
+          return prev;
+        }
+      }
+      // TODO: handle other cases like merge bold nodes
+      return [...prev, cur];
+    }, []);
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, nodes: this.nodes.map((node) => node.toJSON()) });
+  }
+  /**
+   * Clone the nodes to a new block
+   *
+   * @param {RTEBlock} nodes - The nodes will be copied
+   * @returns {RTEBlock} New block
+   */
+  cloneWithNodes(nodes) {
+    const block = new RTETextBlock(generateUUID(), this.type);
+    block.nodes = [];
+    block.apply(new AppendChildNodesAction(nodes));
+    return block;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    const clonedBlock = new RTETextBlock(this.id, this.type);
+    clonedBlock.nodes = this.nodes.map((node) => {
+      const clonedNode = node.clone();
+      clonedNode.parentBlock = clonedBlock;
+      return clonedNode;
+    });
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    clonedBlock.parent = this.parent;
+    return clonedBlock;
+  }
+  /**
+   * @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(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(ModifyContentActionType.DELETE_CHILD, RTETextBlock.name, new BlockRemoveNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.APPEND_CHILD_NODES, RTETextBlock.name, new BlockAppendNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTETextBlock.name, new BlockSplitWithTextNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.REPLACE_CHILD_NODES, RTETextBlock.name, new BlockReplaceNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTETextBlock.name, new BlockMergeNodesStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.BREAK_SINGLE_BLOCK, RTETextBlock.name, new BlockInsertNewParagraphStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTETextBlock.name, new BlockInsertLineBreakStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTETextBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_BLOCK_CONTENT, RTETextBlock.name, new BlockDeleteTextContentStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTETextBlock.name, new BlockInsertImageIntoTextStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_NODES_BEFORE, RTETextBlock.name, new BlockInsertNodesBeforeNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTETextBlock.name, new BlockTransformToListStrategy());
+})();
+
+/**
+ * Remove the code block from the value, call this action if want to flush value after action.
+ */
+class CodeBlockRemoveSelfStrategy extends BlockDeleteNodeContentStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(_action, target) {
+    const node = target.nodes[0];
+    const parent = target.parent;
+    if (parent) {
+      let focusNode = this.getPreviousNode(node);
+      let offset = this.getRTENodeEndOffset(focusNode);
+      if (!focusNode) {
+        focusNode = this.getNextNode(node);
+        offset = 0;
+      }
+      parent.apply(new RemoveChildAction(target));
+      const focusElement = focusNode
+        ? stateEntityRenderingRegistry.getDOMByEntity(focusNode)
+        : null;
+      if (parent.blocks.length === 0) {
+        const defaultParagraph = RTETextBlock.from({
+          id: generateUUID(),
+          type: 'paragraph',
+          nodes: [{ id: generateUUID(), type: 'text', text: '' }],
+        });
+        target.parent.apply(new AppendChildNodesAction([defaultParagraph]));
+        focusNode = defaultParagraph.nodes[0];
+        offset = 0;
+      }
+      this.notifyUpdateSelection(focusNode, focusElement, offset, target);
+    }
+  }
+  /**
+   * Update the rich text next selection range.
+   *
+   * @param {RTENode} focusNode - The next focus node dto.
+   * @param {Nullable<HTMLElement>} focusElement - The next focus element. The update selection task could run directly when the element is exist.
+   * @param {number} offset - The next focus text offset.
+   * @param {RTECodeBlock} target - The code block dto.
+   */
+  notifyUpdateSelection(focusNode, focusElement, offset, target) {
+    const targetDom = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (targetDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(targetDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, {
+          node: focusNode,
+          updateDirectly: focusElement ? true : false,
+          offset,
+        });
+      }
+    }
+  }
+  /**
+   * Get the node content end offset.
+   *
+   * @param {Nullable<RTENode>} node - The RTENode.
+   * @returns {number} - The number value.
+   */
+  getRTENodeEndOffset(node) {
+    if (node && node.type !== 'CODE_BLOCK_NODE') {
+      return node['type'] !== 'IMAGE' ? node['text'].length : 1;
+    }
+    return 0;
+  }
+}
+
+/**
+ * Update the code block content or language action.
+ *
+ * @example codeNode.apply(new UpdateCodeBlockAction(content, language))
+ */
+class UpdateCodeBlockAction extends ModifyContentAction {
+  constructor(content, language) {
+    super();
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.UPDATE_CODE_BLOCK;
+    this.content = content;
+    this.language = language;
+  }
+}
+
+/**
+ * Remove the line break and insert new paragraph after code block.
+ */
+class SwitchOutFromCodeBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { content, language } = action;
+    const textArray = content.split('\n');
+    const updateAction = new UpdateCodeBlockAction(textArray.slice(0, textArray.length - 2).join('\n'), language);
+    updateAction.isFlushable = false;
+    target.nodes[0].apply(updateAction);
+    const textBlock = RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: generateUUID(), text: '', type: 'text' }],
+    });
+    target.parent.apply(new InsertBlocksAfterAction(target, textBlock));
+    // Focus the next text node after value update.
+    const currentNodeDom = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (currentNodeDom) {
+      const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        ChangeManager.notify(nodeSubject, { node: textBlock.nodes[0] });
+      }
+    }
+  }
+}
+
+/**
+ * Update the language or content of code block strategy.
+ */
+class UpdateCodeBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { content, language } = action;
+    target.language = language;
+    target.text = content;
+  }
+}
+
+/**
+ * Action to change the selection range
+ */
+class SelectionChangeAction extends AnnotationAction {
+  constructor(range) {
+    super();
+    this.isFlushable = false;
+    this.range = range;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {SelectionRangeAnnotation} The annotation
+   */
+  toAnnotation() {
+    return new SelectionRangeAnnotation(this.range);
+  }
+}
+
+/**
+ * Update the code block node annotation map strategy.
+ */
+class CodeNodeSetSelectionRangeAnnotationStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    target.annotationMap.set(InternalAnnotationTypeEnum.SELECTION_RANGE, action.toAnnotation());
+  }
+}
+
+/**
+ * RTE code node DTO class.
+ */
+class RTECodeBlockNode extends RTENode {
+  constructor(id, content, language, parentBlock) {
+    super(id);
+    this.type = NodeTypeEnum.CODE_BLOCK_NODE;
+    this.text = '';
+    this.annotationMap = new Map();
+    this.text = content;
+    this.parentBlock = parentBlock;
+    this.language = language;
+  }
+  /**
+   * The code node toJSON method will called internal.
+   *
+   * @returns {VegaRTECodeNode} - An object contains content property.
+   */
+  toJSON() {
+    return { id: this.id, type: 'text', text: this.text, language: this.language };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTECodeBlockNode(this.id, this.text, this.language, this.parentBlock);
+  }
+  /**
+   * @inheritDoc
+   */
+  doAnnotationActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+  /**
+   * @inheritDoc
+   */
+  doModifyActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.UPDATE_CODE_BLOCK, RTECodeBlockNode.name, new UpdateCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(SelectionChangeAction.name, RTECodeBlockNode.name, new CodeNodeSetSelectionRangeAnnotationStrategy());
+})();
+
+/**
+ * Insert image behind after code block strategy.
+ */
+class CodeBlockInsertImageStrategy extends ActionHandleStrategy {
+  /**
+   * Insert image block at behind of the RTE code block.
+   *
+   * @param {InsertImageToBlockAction} action - The insert image action instance.
+   * @param {RTECodeBlock} target - The code block.
+   */
+  handleAction(action, target) {
+    const imageBlock = action.imageBlockToBeInserted;
+    target.parent.apply(new InsertBlocksAfterAction(target, imageBlock));
+  }
+}
+
+/**
+ * The code block DTO class.
+ */
+class RTECodeBlock extends RTEBlock {
+  constructor(id, content, language) {
+    super(id);
+    this.type = 'code-block';
+    this.nodes = [new RTECodeBlockNode(`${id}-1`, content, language, this)];
+  }
+  /**
+   * Converts a VegaRTECodeBlock into an RTECodeBlock.
+   *
+   * @param {VegaRTECodeBlock} block - The block object
+   * @returns {RTECodeBlock} A RTECodeBlock class
+   */
+  static from(block) {
+    return new RTECodeBlock(block.id, block.content, block.language);
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    const { language, text } = this.nodes[0];
+    return {
+      id: this.id,
+      type: 'code-block',
+      content: text,
+      language,
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    const cloneCodeBlock = RTECodeBlock.from(this.toJSON());
+    cloneCodeBlock.parent = this.parent;
+    return cloneCodeBlock;
+  }
+  /**
+   * Apply action to block
+   *
+   * @param {ModifyContentAction} action - modify content action.
+   */
+  apply(action) {
+    if (action instanceof ModifyContentAction) {
+      ActionHandleStrategyRegistry.executeTheStrategy(action, this);
+    }
+    if (action.isFlushable) {
+      const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (domNode) {
+        const nodeSubject = domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          ChangeManager.notify(nodeSubject, {});
+        }
+      }
+    }
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return !!this.nodes.length;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.nodes[0];
+  }
+  /**
+   * The code block is selected or not.
+   *
+   * @returns {boolean} - The boolean result.
+   */
+  isSelected() {
+    return this.nodes[0].annotationMap.has(InternalAnnotationTypeEnum.SELECTION_RANGE);
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CODE_BLOCK, RTECodeBlock.name, new CodeBlockRemoveSelfStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.DELETE_CHILD, RTECodeBlock.name, new BlockRemoveNodeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.SWITCH_OUT_FROM_CODE_BLOCK, RTECodeBlock.name, new SwitchOutFromCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTECodeBlock.name, new CodeBlockInsertImageStrategy());
+})();
+RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME = 'code-block-placeholder-element';
+
+export { IndentAnnotation as $, ActionHandleStrategy as A, BlockDeleteNodeContentStrategy as B, ImageAnnotation as C, SelectionChangeAction as D, TextColorAnnotation as E, RTE_TEXT_COLORS as F, RTECodeBlockNode as G, AnnotationAction as H, InsertBlocksAfterAction as I, BoldAnnotationAction as J, ItalicAnnotation as K, LinkAnnotationAction as L, ModifyContentAction as M, NodeAnnotationTypeEnum as N, UnderlineAnnotation as O, TextStyleAnnotationAction as P, TextStyleAnnotation as Q, RemoveChildAction as R, SplitBlockWithNodeAction as S, TextSplittableAction as T, UpdateCodeBlockAction as U, BoldAnnotation as V, BlockAnnotationTypeEnum as W, ClearFormattingAnnotationAction as X, CodeAnnotationAction as Y, ZERO_WIDTH_SPACE as Z, StrikethroughAnnotation as _, RTEImageNode as a, HorizontalAlignmentAnnotation as a0, UpdateTextAction as a1, MergeTwoBlocksNodesAction as a2, ReplaceChildNodesAction as b, AppendChildNodesAction as c, RTETextBlock as d, InsertBlocksBeforeAction as e, ModifyContentActionType as f, RTETextNode as g, BlockReplaceNodeWithNodesStrategy as h, RTEBlock as i, ActionHandleStrategyRegistry as j, BlockMergeNodesStrategy as k, BlockRemoveNodeStrategy as l, BlockAppendNodesStrategy as m, BlockReplaceNodesStrategy as n, BlockInsertNodesBeforeNodeStrategy as o, BlockDeleteTextContentStrategy as p, BlockInsertLineBreakStrategy as q, BlockInsertLineBreakWithBlocksStrategy as r, BlockSplitWithTextNodeStrategy as s, SyncUpSelectionAction as t, RTECodeBlock as u, RTENode as v, stateEntityRenderingRegistry as w, BlockAnnotation as x, NodeAnnotation as y, InternalAnnotationTypeEnum as z };