@globalpayments/vega 2.49.1 → 2.51.0

package/dist/cjs/{content-state-6a48bcb5.js → code-block-2d014e17.js}

@@ -1,12 +1,12 @@
 'use strict';
 
+const typeGuard = require('./type-guard-4ba85fdc.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-d5826bff.js');
-const vegaInternalEventId = require('./vega-internal-event-id-bfea9b93.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-769dd00f.js');
+const vegaInternalEventId = require('./vega-internal-event-id-6cdc95fe.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
-const typeGuard = require('./type-guard-4ba85fdc.js');
 const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
-const darkModeStyleController = require('./dark-mode-style-controller-4adb7fb2.js');
+const darkModeStyleController = require('./dark-mode-style-controller-f9a32d68.js');
 
 exports.InternalAnnotationTypeEnum = void 0;
 (function (InternalAnnotationTypeEnum) {
@@ -103,6 +103,10 @@ exports.ModifyContentActionType = void 0;
   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";
 })(exports.ModifyContentActionType || (exports.ModifyContentActionType = {}));
 /**
  * Abstract class for update node content, delete node, insert node
@@ -367,6 +371,7 @@ var NodeTypeEnum;
 (function (NodeTypeEnum) {
   NodeTypeEnum["TEXT"] = "TEXT";
   NodeTypeEnum["IMAGE"] = "IMAGE";
+  NodeTypeEnum["CODE_BLOCK_NODE"] = "CODE_BLOCK_NODE";
 })(NodeTypeEnum || (NodeTypeEnum = {}));
 /**
  * Abstract class for all nodes
@@ -858,58 +863,6 @@ class BlockDeleteNodeContentStrategy extends ActionHandleStrategy {
   }
 }
 
-/**
- * The image block delete the image node strategy.
- */
-class BlockDeleteImageStrategy extends BlockDeleteNodeContentStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    this.deleteNodeContent(action, target);
-  }
-  /**
-   * Deletes content from a block node based on specific conditions.
-   *
-   * @param {DeleteBlockContentAction} action - Delete block content action
-   * @param {RTEImageBlock} target - The image block.
-   */
-  deleteNodeContent(action, target) {
-    const startContainerNode = action
-      .startContainerNode, startOffset = action.startOffset;
-    let previousNode = this.getPreviousNode(startContainerNode);
-    let nextNode = null;
-    if (startOffset === 1) {
-      const parentBlock = target;
-      if (this.isContentFirstNode(startContainerNode)) {
-        nextNode = this.getNextNode(startContainerNode);
-      }
-      if (parentBlock.nodes.length === 1) {
-        parentBlock.parent.apply(new RemoveChildAction(parentBlock));
-      }
-      else {
-        parentBlock.apply(new RemoveChildAction(startContainerNode));
-      }
-    }
-    else {
-      const shouldRemoveNode = previousNode;
-      if (shouldRemoveNode && shouldRemoveNode instanceof RTEImageNode) {
-        previousNode = this.getPreviousNode(shouldRemoveNode);
-        shouldRemoveNode.parentBlock.apply(new RemoveChildAction(shouldRemoveNode));
-        if (!previousNode) {
-          action.nextNode = startContainerNode;
-        }
-      }
-    }
-    if (previousNode) {
-      action.previousNode = previousNode;
-    }
-    else if (nextNode) {
-      action.nextNode = nextNode;
-    }
-  }
-}
-
 /** Append blocks or nodes to a block */
 class AppendChildNodesAction extends ModifyContentAction {
   constructor(childNodes) {
@@ -951,7 +904,7 @@ class BlockRemoveNodeStrategy extends ActionHandleStrategy {
    * Remove the block if the block nodes is empty after delete the current node.
    *
    * @param {RemoveChildAction} action - The remove child action instance.
-   * @param {RTETextBlock | RTEImageBlock} target - The parent block of the node that will be removed.
+   * @param {RTEBlockWithNodes} target - The parent block of the node that will be removed.
    */
   handleAction(action, target) {
     const arrayFixed = target.nodes;
@@ -1026,51 +979,6 @@ class ReplaceChildNodesAction extends ModifyContentAction {
   }
 }
 
-/**
- * Split the current image block with a special position strategy.
- */
-class BlockSplitWithImageNodeStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    action.newBlock = this.splitImageNodes(action.splitPointNode, action.startOffsetOfNode, target);
-  }
-  /**
-   * The image offset should be 0 or 1
-   * <vega-rich-text-image-editor><img /></vega-rich-text-image-editor>
-   *
-   * @param {RTEImageNode} imageNode The split point image node.
-   * @param {number} imageOffset The cursor point 0 | 1.
-   * @param {RTEImageBlock} target The image block.
-   * @returns {Nullable<RTEBlock>} The new block after split
-   */
-  splitImageNodes(imageNode, imageOffset, target) {
-    const nodesSplitIndex = target.nodes.indexOf(imageNode);
-    if (nodesSplitIndex > -1) {
-      const beforeNodes = target.nodes.slice(0, nodesSplitIndex + imageOffset);
-      const afterNodes = target.nodes.slice(nodesSplitIndex + imageOffset);
-      target.apply(new ReplaceChildNodesAction(beforeNodes));
-      const newBlock = this.cloneWithNodes(afterNodes, target);
-      target.parent.apply(new InsertBlocksAfterAction(target, newBlock));
-      return newBlock;
-    }
-  }
-  /**
-   * Creates a new RTEImageBlock instance with the provided RTEImageNode instances appended to it.
-   *
-   * @param {RTEImageNode[]} nodes - An array of RTEImageNode objects that will be used to create a new RTEImageBlock instance.
-   * @param {RTEImageBlock} target The image block.
-   * @returns {RTEImageBlock} A new `RTEImageBlock` object with the provided `nodes` appended to it.
-   */
-  cloneWithNodes(nodes, target) {
-    const block = target.createNewImageBlock();
-    block.nodes = [];
-    block.apply(new AppendChildNodesAction(nodes));
-    return block;
-  }
-}
-
 /**
  * Insert a new block before a existing block
  *
@@ -2516,7 +2424,9 @@ class BlockDeleteTextContentStrategy extends BlockDeleteNodeContentStrategy {
         if (startContainerNode.isEmpty()) {
           target.apply(new RemoveChildAction(startContainerNode));
         }
-        previousNode.parentBlock.apply(new MergeTwoBlocksNodesAction(target));
+        if (target.type === previousNode.parentBlock.type) {
+          previousNode.parentBlock.apply(new MergeTwoBlocksNodesAction(target));
+        }
       }
       else {
         if (this.isContentFirstNode(startContainerNode) && startContainerNode.isEmpty()) {
@@ -2830,1002 +2740,329 @@ class RTETextBlock extends RTEBlock {
 })();
 
 /**
- * Insert a new paragraph at the image block special position strategy.
+ * Remove the code block from the value, call this action if want to flush value after action.
  */
-class ImageInsertNewParagraphStrategy extends ActionHandleStrategy {
+class CodeBlockRemoveSelfStrategy extends BlockDeleteNodeContentStrategy {
   /**
    * @inheritDoc
    */
-  handleAction(action, target) {
-    action.newBlock = this.breakSingleBlock(action.startContainerNode, action.startOffset, target);
+  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: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+          type: 'paragraph',
+          nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '' }],
+        });
+        target.parent.apply(new AppendChildNodesAction([defaultParagraph]));
+        focusNode = defaultParagraph.nodes[0];
+        offset = 0;
+      }
+      this.notifyUpdateSelection(focusNode, focusElement, offset, target);
+    }
   }
   /**
-   * Used to split a block of text at a specific position and insert a new paragraph block.
+   * Update the rich text next selection range.
    *
-   * @param {RTEImageNode} splitNode - The node that needs to be split into separate blocks.
-   * @param {number} startOffsetOfNode - The index or position within the `splitNode` where the block should be broken or split.
-   * @param {RTEImageBlock} target - The image block.
-   * @returns {Nullable<RTEBlock>} Returns either a new paragraph block or the new block created after splitting the original block.
+   * @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.
    */
-  breakSingleBlock(splitNode, startOffsetOfNode, target) {
-    const newParagraph = RTETextBlock.from({
-      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
-      type: 'paragraph',
-      nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '' }],
-    });
-    if (this.isCaretPositionAtImageBlockEnd(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksAfterAction(target, newParagraph));
-    }
-    else if (this.isCaretPositionAtImageBlockStart(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksBeforeAction(target, newParagraph));
+  notifyUpdateSelection(focusNode, focusElement, offset, target) {
+    const targetDom = stateEntityRenderingRegistry.getDOMByEntity(target);
+    if (targetDom) {
+      const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(targetDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.ChangeManager.notify(nodeSubject, {
+          node: focusNode,
+          updateDirectly: focusElement ? true : false,
+          offset,
+        });
+      }
     }
-    else {
-      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
-      target.apply(splitBlockAction);
-      return splitBlockAction.newBlock;
+  }
+  /**
+   * 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 newParagraph;
+    return 0;
   }
 }
 
 /**
- * Break the current block after press enter, this action is similar with the SplitBlockWithNodeAction,
- * The SplitBlockWithNodeAction split the current block to two same type blocks, but this action will create new paragraph or list item when break at start or end.
- * The property `newBlock` use to store the new create block if need.
+ * Update the code block content or language action.
  *
- * @example currentBlock.apply(new BreakSingleBlockAction(startContainerNode, startOffset))
+ * @example codeNode.apply(new UpdateCodeBlockAction(content, language))
  */
-class BreakSingleBlockAction extends ModifyContentAction {
-  constructor(startContainerNode, startOffset) {
+class UpdateCodeBlockAction extends ModifyContentAction {
+  constructor(content, language) {
     super();
-    this.type = exports.ModifyContentActionType.BREAK_SINGLE_BLOCK;
-    this.startContainerNode = startContainerNode;
-    this.startOffset = startOffset;
+    this.isFlushable = true;
+    this.type = exports.ModifyContentActionType.UPDATE_CODE_BLOCK;
+    this.content = content;
+    this.language = language;
   }
 }
 
 /**
- * The image block insert line break strategy.
+ * Remove the line break and insert new paragraph after code block.
  */
-class ImageInsertLineBreakStrategy extends ActionHandleStrategy {
+class SwitchOutFromCodeBlockStrategy extends ActionHandleStrategy {
   /**
-   * The image block not support insert the line break node, so invoke the insert new paragraph logic directly.
-   *
-   * @param {LineBreakSingleBlockAction} action - The action instance.
-   * @param {RTEImageBlock} target - The image block.
+   * @inheritDoc
    */
   handleAction(action, target) {
-    const insertNewParagraphAction = new BreakSingleBlockAction(action.startContainerNode, action.startOffset);
-    target.apply(insertNewParagraphAction);
-    const newBlock = insertNewParagraphAction.newBlock;
-    if (newBlock) {
-      action.lineBreakNode = newBlock.nodes[0];
+    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: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'paragraph',
+      nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.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.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(currentNodeDom, vegaInternalEventId.VegaInternalRichTextEditorSelectionRangeChange);
+      if (nodeSubject) {
+        changeManager.ChangeManager.notify(nodeSubject, { node: textBlock.nodes[0] });
+      }
     }
   }
 }
 
 /**
- * Insert a line break node into multiple blocks selection at special position strategy.
+ * Update the language or content of code block strategy.
  */
-class ImageInsertLineBreakWithBlocksStrategy extends ActionHandleStrategy {
+class UpdateCodeBlockStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
   handleAction(action, target) {
-    action.lineBreakNode = this.lineBreakMultipleBlocks(action.selectedBlocks, target);
-  }
-  /**
-   * Inserts a new paragraph block with a line break after a selected block of text in a rich text editor.
-   *
-   * @param {RTEBlock[]} selectedBlocks - An array of RTEBlock objects that represent the blocks that have been selected for a specific action in the Rich Text Editor.
-   * @param {RTEImageBlock} target - The image block.
-   * @returns {Nullable<RTETextNode>} Returns a Nullable RTETextNode.
-   */
-  lineBreakMultipleBlocks(selectedBlocks, target) {
-    const newParagraph = RTETextBlock.from({
-      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
-      type: 'paragraph',
-      nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '\n' }],
-    });
-    target.parent.apply(new InsertBlocksAfterAction(target, newParagraph));
-    const afterNodes = this.concatBlocksNodes(selectedBlocks.slice(1));
-    if (afterNodes.length === 0 || (afterNodes[0] && afterNodes[0].text === '')) {
-      afterNodes.push(new RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', newParagraph));
-    }
-    newParagraph.apply(new AppendChildNodesAction(afterNodes));
-    return newParagraph['nodes'][0];
-  }
-  /**
-   * Concat the child nodes of multiple RTEBlocks if both are not images.
-   *
-   * @param {RTEBlock[]} blocks - multiple block of content in a rich text editor, such as a paragraph, heading, image, etc.
-   * @returns {RTENode[]} Array of connected block nodes
-   */
-  concatBlocksNodes(blocks) {
-    const nodes = [];
-    blocks.map((block) => {
-      if (block.type !== 'image') {
-        nodes.push(...block['nodes']);
-        block.parent.apply(new RemoveChildAction(block));
-      }
-    });
-    return nodes;
+    const { content, language } = action;
+    target.language = language;
+    target.text = content;
   }
 }
 
 /**
- * Insert a image node at the special position of image block.
+ * Action to change the selection range
  */
-class ImageBlockInsertImageStrategy extends ActionHandleStrategy {
+class SelectionChangeAction extends AnnotationAction {
+  constructor(range) {
+    super();
+    this.isFlushable = false;
+    this.range = range;
+  }
   /**
-   * @inheritDoc
+   * Converts the action to an annotation
+   *
+   * @returns {SelectionRangeAnnotation} The annotation
    */
-  handleAction(action, target) {
-    const splitNode = action.splitPointNode;
-    const startOffsetOfNode = action.startOffsetOfNode;
-    const newImageBlock = action.imageBlockToBeInserted;
-    const newImageNodes = newImageBlock.nodes;
-    if (target.nodes.length < 1) {
-      target.apply(new AppendChildNodesAction(newImageNodes));
-    }
-    else if (this.isCaretPositionAtImageBlockEnd(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksAfterAction(target, newImageBlock));
-    }
-    else if (this.isCaretPositionAtImageBlockStart(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksBeforeAction(target, newImageBlock));
-    }
-    else {
-      target.apply(new SplitBlockWithNodeAction(splitNode, startOffsetOfNode));
-      target.parent.apply(new InsertBlocksAfterAction(target, newImageBlock));
-    }
+  toAnnotation() {
+    return new SelectionRangeAnnotation(this.range);
   }
 }
 
 /**
- * Insert some text nodes at the behind of the node strategy.
+ * Update the code block node annotation map strategy.
  */
-class BlockInsertNodesAfterNodeStrategy extends BlockReplaceNodeWithNodesStrategy {
+class CodeNodeSetSelectionRangeAnnotationStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
   handleAction(action, target) {
-    const referNode = action.referNode;
-    const nodes = [referNode, ...action.nodesToBeInserted];
-    this.replaceNodeWithNodes(target, referNode, nodes);
+    target.annotationMap.set(exports.InternalAnnotationTypeEnum.SELECTION_RANGE, action.toAnnotation());
   }
 }
 
 /**
- * Image block
+ * RTE code node DTO class.
  */
-class RTEImageBlock extends RTEBlock {
-  constructor(id) {
+class RTECodeBlockNode extends RTENode {
+  constructor(id, content, language, parentBlock) {
     super(id);
-    this.type = 'image';
-    this.nodes = [];
+    this.type = NodeTypeEnum.CODE_BLOCK_NODE;
+    this.text = '';
+    this.annotationMap = new Map();
+    this.text = content;
+    this.parentBlock = parentBlock;
+    this.language = language;
   }
   /**
-   * Converts a VegaRTEImageBlock object into an RTEImageBlock object by mapping nodes and creating annotations.
+   * The code node toJSON method will called internal.
    *
-   * @param {VegaRTEImageBlock} block - The block object to be converted.
-   * @returns {RTEImageBlock} An instance of `RTEImageBlock`
-   */
-  static from(block) {
-    const imageBlock = new RTEImageBlock(block.id);
-    const { annotations } = block;
-    imageBlock.nodes = block.nodes.map((image) => RTEImageNode.from(image, imageBlock));
-    if (annotations) {
-      Object.entries(annotations).forEach(([type, value]) => {
-        const item = this.createAnnotationEntity(type, value);
-        if (typeGuard.isNonNullable(item)) {
-          imageBlock.annotationMap.set(...item);
-        }
-      });
-    }
-    return imageBlock;
-  }
-  /**
-   * @inheritDoc
+   * @returns {VegaRTECodeNode} - An object contains content property.
    */
   toJSON() {
-    return Object.assign(Object.assign({}, super.toJSON()), { type: 'image', nodes: this.nodes.map((node) => node.toJSON()) });
+    return { id: this.id, type: 'text', text: this.text, language: this.language };
   }
   /**
    * @inheritDoc
    */
-  isNotEmpty() {
-    return this.nodes.length > 0 && this.nodes.some((node) => node.url.length > 0);
+  clone() {
+    return new RTECodeBlockNode(this.id, this.text, this.language, this.parentBlock);
   }
   /**
    * @inheritDoc
    */
-  getLastNode() {
-    return this.nodes[this.nodes.length - 1];
-  }
-  /**
-   * Create a new image block.
-   *
-   * @returns {RTEImageBlock} - The empty image block.
-   */
-  createNewImageBlock() {
-    return new RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
+  doAnnotationActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
   }
   /**
    * @inheritDoc
    */
-  clone() {
-    const clonedBlock = new RTEImageBlock(this.id);
-    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;
+  doModifyActionApply(action) {
+    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
   }
 }
 (() => {
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_BLOCK_CONTENT, RTEImageBlock.name, new BlockDeleteImageStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEImageBlock.name, new BlockMergeNodesStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, RTEImageBlock.name, new BlockRemoveNodeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, RTEImageBlock.name, new BlockAppendNodesStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_CHILD_NODES, RTEImageBlock.name, new BlockReplaceNodesStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEImageBlock.name, new BlockSplitWithImageNodeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertNewParagraphStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEImageBlock.name, new ImageInsertLineBreakStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEImageBlock.name, new ImageInsertLineBreakWithBlocksStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEImageBlock.name, new ImageBlockInsertImageStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_NODES_BEFORE, RTEImageBlock.name, new BlockInsertNodesBeforeNodeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_NODES_AFTER, RTEImageBlock.name, new BlockInsertNodesAfterNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.UPDATE_CODE_BLOCK, RTECodeBlockNode.name, new UpdateCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(SelectionChangeAction.name, RTECodeBlockNode.name, new CodeNodeSetSelectionRangeAnnotationStrategy());
 })();
 
 /**
- * The list item block block delete text content strategy.
+ * Insert image behind after code block strategy.
  */
-class ListItemDeleteTextContentStrategy extends BlockDeleteTextContentStrategy {
+class CodeBlockInsertImageStrategy extends ActionHandleStrategy {
   /**
-   * Delete the list item content and delete the parent list after delete the last item.
+   * Insert image block at behind of the RTE code block.
    *
-   * @param {DeleteBlockContentAction} action - The delete block content action instance.
-   * @param {RTEListItemBlock} target - The list item block.
+   * @param {InsertImageToBlockAction} action - The insert image action instance.
+   * @param {RTECodeBlock} target - The code block.
    */
   handleAction(action, target) {
-    const listBlock = target.parent;
-    this.deleteNodeContent(action, target);
-    if (listBlock.blocks.length === 0) {
-      listBlock.parent.apply(new RemoveChildAction(listBlock));
-    }
+    const imageBlock = action.imageBlockToBeInserted;
+    target.parent.apply(new InsertBlocksAfterAction(target, imageBlock));
   }
 }
 
 /**
- * Remove list item child node strategy.
+ * The code block DTO class.
  */
-class ListItemRemoveNodeStrategy extends ActionHandleStrategy {
-  /**
-   * Remove child node from the list item, remove the list item if the list item is empty.
-   *
-   * @param {RemoveChildAction} action - The remove child action instance.
-   * @param {RTEListItemBlock} target - The list item block.
-   */
-  handleAction(action, target) {
-    target.nodes = target.nodes.filter((node) => node !== action.entityToBeRemoved);
-    if (target.nodes.length === 0 && (!target.children || !target.children.length)) {
-      target.parent.apply(new RemoveChildAction(target));
-    }
+class RTECodeBlock extends RTEBlock {
+  constructor(id, content, language) {
+    super(id);
+    this.type = 'code-block';
+    this.nodes = [new RTECodeBlockNode(`${id}-1`, content, language, this)];
   }
-}
-
-/**
- * Remove list item nest list block strategy.
- */
-class ListItemRemoveNestListStrategy extends ActionHandleStrategy {
   /**
-   * Remove the nest list block from the list item, clear the property children when the children is empty.
+   * Converts a VegaRTECodeBlock into an RTECodeBlock.
    *
-   * @param {RemoveNestListAction} action - The action instance.
-   * @param {RTEListItemBlock} target - The list item block.
+   * @param {VegaRTECodeBlock} block - The block object
+   * @returns {RTECodeBlock} A RTECodeBlock class
    */
-  handleAction(action, target) {
-    if (target.children) {
-      if (target.children.length > 1) {
-        target.children = target.children.filter((child) => child !== action.nestListBlockToBeRemoved);
-      }
-      else {
-        target.children = undefined;
-      }
-    }
+  static from(block) {
+    return new RTECodeBlock(block.id, block.content, block.language);
   }
-}
-
-/**
- * Replace list item nest list strategy.
- */
-class ListItemReplaceNestListStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
-  handleAction(action, target) {
-    action.newList.forEach((listBlock) => {
-      listBlock.parent = target;
-    });
-    target.children = action.newList;
+  toJSON() {
+    const { language, text } = this.nodes[0];
+    return {
+      id: this.id,
+      type: 'code-block',
+      content: text,
+      language,
+    };
   }
-}
-
-/**
- * Insert new paragraph into current list item block at special position.
- */
-class ListItemInsertNewParagraphStrategy extends ActionHandleStrategy {
   /**
    * @inheritDoc
    */
-  handleAction(action, target) {
-    action.newBlock = this.breakSingleListItemBlock(action.startContainerNode, action.startOffset, target);
+  clone() {
+    const cloneCodeBlock = RTECodeBlock.from(this.toJSON());
+    cloneCodeBlock.parent = this.parent;
+    return cloneCodeBlock;
   }
   /**
-   * Breaks a single list item block at a specific position.
+   * Apply action to block
    *
-   * @param {RTETextNode} splitNode - The node that needs to be split within a list item block.
-   * @param {number} startOffsetOfNode - The index within the `splitNode` where the break operation should occur.
-   * @param {RTEListItemBlock} target - The list item block.
-   * @returns {Nullable<RTEBlock>} Returns either a new `RTEListItemBlock` if the caret
-   * position is at the end of the `splitNode`, or it returns the result of splitting the block at the
-   * caret position if it is neither at the start nor at the end.
+   * @param {ModifyContentAction} action - modify content action.
    */
-  breakSingleListItemBlock(splitNode, startOffsetOfNode, target) {
-    const newListItem = target.createNewListItem();
-    const newBreakNode = this.copyInlineStyleToNewNode(splitNode);
-    newListItem.apply(new AppendChildNodesAction([newBreakNode]));
-    if (this.isCaretPositionAtTextBlockEnd(target, splitNode, startOffsetOfNode)) {
-      return this.breakListItemAtEnd(newListItem, target);
-    }
-    else if (this.isCaretPositionAtTextBlockStart(target, splitNode, startOffsetOfNode)) {
-      target.parent.apply(new InsertBlocksBeforeAction(target, newListItem));
+  apply(action) {
+    if (action instanceof ModifyContentAction) {
+      ActionHandleStrategyRegistry.executeTheStrategy(action, this);
     }
-    else {
-      const splitBlockAction = new SplitBlockWithNodeAction(splitNode, startOffsetOfNode);
-      target.apply(splitBlockAction);
-      return splitBlockAction.newBlock;
+    if (action.isFlushable) {
+      const domNode = stateEntityRenderingRegistry.getDOMByEntity(this);
+      if (domNode) {
+        const nodeSubject = domNodeSubjectFactory.domNodeSubjectFactory.getSubjectFromParentNodeByEventId(domNode, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges);
+        if (nodeSubject) {
+          changeManager.ChangeManager.notify(nodeSubject, {});
+        }
+      }
     }
-    return newListItem;
   }
   /**
-   * Breaks a list item at the end and handles the insertion of a new list item or paragraph accordingly.
-   *
-   * @param {RTEListItemBlock} newListItem - Item that represents a new list item to be added to the existing list.
-   * @param {RTEListItemBlock} target - The list item block.
-   * @returns {RTEBlock} Returns a `RTEBlock`.
+   * @inheritDoc
    */
-  breakListItemAtEnd(newListItem, target) {
-    const lastItem = target.parent.blocks[target.parent.blocks.length - 1];
-    const currentItemIsEmpty = target.nodes.length === 1 && target.nodes[0].isEmpty();
-    if (target === lastItem && currentItemIsEmpty) {
-      const parentParent = target.parent.parent;
-      if (parentParent['type'] !== 'list-item') {
-        const newParagraph = RTETextBlock.from({
-          id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
-          type: 'paragraph',
-          nodes: [],
-        });
-        newParagraph.apply(new AppendChildNodesAction(newListItem.nodes));
-        parentParent.apply(new InsertBlocksAfterAction(target.parent, newParagraph));
-        target.parent.apply(new RemoveChildAction(target));
-        return newParagraph;
-      }
-      else {
-        parentParent.parent.apply(new InsertBlocksAfterAction(parentParent, newListItem));
-        target.parent.apply(new RemoveChildAction(target));
-      }
-    }
-    else {
-      target.parent.apply(new InsertBlocksAfterAction(target, newListItem));
-    }
-    return newListItem;
+  isNotEmpty() {
+    return !!this.nodes.length;
   }
   /**
-   * Copy the inline style to new node
-   *
-   * @param {RTETextNode} needCopedNode - The node that needed to be copied to
-   * @returns {RTETextNode} Returns a `RTETextNode`.
-   */
-  copyInlineStyleToNewNode(needCopedNode) {
-    const textNode = needCopedNode.cloneWithText('');
-    // The link annotation doesn't need to inherit
-    textNode.annotationMap.delete(exports.NodeAnnotationTypeEnum.LINK);
-    return textNode;
-  }
-}
-
-/**
- * Insert image node to list item block strategy.
- */
-class ListItemInsertImageStrategy extends ActionHandleStrategy {
-  /**
-   * The image node can not insert into list item block, so insert image after parent list block.
-   *
-   * @param {InsertImageToBlockAction} action - The action instance.
-   * @param {RTEListItemBlock} target - The list item block.
-   */
-  handleAction(action, target) {
-    target.parent.apply(action);
-  }
-}
-
-/**
- * List item block
- */
-class RTEListItemBlock extends RTETextBlock {
-  constructor(id, children) {
-    super(id, 'list-item');
-    this.children = [];
-    this.children = children;
-  }
-  /**
-   * Converts a VegaRTEListItemBlock object to an RTEListItemBlock
-   *
-   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListItemBlock` object into an `RTEListItemBlock`.
-   * @returns {RTEListItemBlock} Return an instance of `RTEListItemBlock`
-   */
-  static from(block) {
-    const listItemBlock = new RTEListItemBlock(block.id);
-    listItemBlock.nodes = block.nodes.map((richText) => RTETextNode.from(richText, listItemBlock));
-    if (block.children) {
-      listItemBlock.children = block.children.map((child) => {
-        const listBlock = RTEListBlock.from(child);
-        listBlock.parent = listItemBlock;
-        return listBlock;
-      });
-    }
-    const { annotations } = block;
-    if (annotations) {
-      Object.entries(annotations).forEach(([type, value]) => {
-        const item = this.createAnnotationEntity(type, value);
-        if (typeGuard.isNonNullable(item)) {
-          listItemBlock.annotationMap.set(...item);
-        }
-      });
-    }
-    return listItemBlock;
-  }
-  /**
-   * @inheritDoc
-   */
-  toJSON() {
-    var _a;
-    return Object.assign(Object.assign({}, super.toJSON()), { type: 'list-item', children: (_a = this.children) === null || _a === void 0 ? void 0 : _a.map((block) => block.toJSON()) });
-  }
-  /**
-   * @inheritDoc
-   */
-  cloneWithNodes(nodes) {
-    const block = new RTEListItemBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
-    block.nodes = [];
-    block.apply(new AppendChildNodesAction(nodes));
-    return block;
-  }
-  /**
-   * @inheritDoc
-   */
-  getLastNode() {
-    if (this.children && this.children.length > 0) {
-      const childListBlock = this.children[this.children.length - 1];
-      return childListBlock.getLastNode();
-    }
-    return super.getLastNode();
-  }
-  /**
-   * Create a new list item block.
-   *
-   * @returns {RTEListItemBlock} - A list item block.
-   */
-  createNewListItem() {
-    return new RTEListItemBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
-  }
-  /**
-   * @inheritDoc
-   */
-  clone() {
-    var _a;
-    const block = new RTEListItemBlock(this.id);
-    block.nodes = this.nodes.map((node) => {
-      const clonedNode = node.clone();
-      clonedNode.parentBlock = block;
-      return clonedNode;
-    });
-    block.annotationMap = super.cloneAnnotations();
-    block.children = (_a = this.children) === null || _a === void 0 ? void 0 : _a.map((child) => {
-      const clonedChild = child.clone();
-      clonedChild.parent = block;
-      return clonedChild;
-    });
-    block.parent = this.parent;
-    return block;
-  }
-}
-(() => {
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_BLOCK_CONTENT, RTEListItemBlock.name, new ListItemDeleteTextContentStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new BlockInsertLineBreakStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS, RTEListItemBlock.name, new BlockInsertLineBreakWithBlocksStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, RTEListItemBlock.name, new ListItemRemoveNodeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_NEST_LIST, RTEListItemBlock.name, new ListItemRemoveNestListStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, RTEListItemBlock.name, new BlockAppendNodesStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.SPLIT_BLOCK_WITH_NODE, RTEListItemBlock.name, new BlockSplitWithTextNodeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_CHILD_NODES, RTEListItemBlock.name, new BlockReplaceNodesStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.REPLACE_NEST_LIST, RTEListItemBlock.name, new ListItemReplaceNestListStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.MERGE_TWO_BLOCKS_NODES, RTEListItemBlock.name, new BlockMergeNodesStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.BREAK_SINGLE_BLOCK, RTEListItemBlock.name, new ListItemInsertNewParagraphStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListItemBlock.name, new ListItemInsertImageStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_NODES_BEFORE, RTEListItemBlock.name, new BlockInsertNodesBeforeNodeStrategy());
-})();
-
-/**
- * Insert block array at the front of the block strategy.
- */
-class BlockInsertBlocksBeforeStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    this.replaceBlockWithBlocks(target, action.referBlock, [
-      ...action.blocksToBeInserted,
-      action.referBlock,
-    ]);
-  }
-  /**
-   * Replaces a specific block with an array of blocks within a RTEContentBlock array.
-   *
-   * @param {RTEListBlock|VegaRTEContent} target - The list block or the VegaRTEContent instance.
-   * @param {RTEBlock} referBlock - Used as a reference block to identify the block that needs to be replaced in the `blocks` array.
-   * @param {RTEBlock[]} blocks - An array of RTEBlock objects that you want to replace the `referBlock` with in the `blocks` array.
-   */
-  replaceBlockWithBlocks(target, referBlock, blocks) {
-    if (target.blocks) {
-      blocks.forEach((block) => {
-        block.parent = target;
-      });
-      const arrayFixed = target.blocks;
-      target.blocks = arrayFixed.flatMap((block) => {
-        if (block === referBlock) {
-          return blocks;
-        }
-        else {
-          return block;
-        }
-      });
-    }
-  }
-}
-
-/**
- * Insert block array at the behind of the block strategy.
- */
-class BlockInsertBlocksAfterStrategy extends BlockInsertBlocksBeforeStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    this.replaceBlockWithBlocks(target, action.referBlock, [
-      action.referBlock,
-      ...action.blocksToBeInserted,
-    ]);
-  }
-}
-
-/**
- * Append new block array to list block or VegaRTEContent instance strategy.
- */
-class BlockAppendBlocksStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    const newBlocks = action.entityToBeAppended;
-    if (target.blocks) {
-      newBlocks.forEach((block) => {
-        block.parent = target;
-      });
-      const arrayFixed = target.blocks;
-      target.blocks = arrayFixed.concat(newBlocks);
-    }
-  }
-}
-
-/**
- * Delete the nest list block action
- *
- * @example needRemovedNestList.parent.apply(new RemoveNestListAction(needRemovedNestList))
- */
-class RemoveNestListAction extends ModifyContentAction {
-  constructor(childList) {
-    super();
-    this.type = exports.ModifyContentActionType.DELETE_NEST_LIST;
-    this.nestListBlockToBeRemoved = childList;
-  }
-}
-
-/**
- * List block or VegaRTEContent remove child block strategy.
- */
-class BlockRemoveChildBlockStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    const blockToBeRemoved = action.entityToBeRemoved;
-    if (target.blocks) {
-      target.blocks = target.blocks.filter((block) => block !== blockToBeRemoved);
-    }
-  }
-}
-
-/**
- * List remove list item strategy.
- */
-class ListRemoveListItemStrategy extends BlockRemoveChildBlockStrategy {
-  /**
-   * Remove the list item, check the list item and remove self if the list item is empty.
-   *
-   * @param {RemoveChildAction} action - The remove action instance.
-   * @param {RTEListBlock} target - The list block.
-   */
-  handleAction(action, target) {
-    super.handleAction(action, target);
-    const parent = target.parent;
-    if (target.blocks.length === 0 && parent) {
-      // The parent is a list item mean the current block is a nest list, so we need to use RemoveNestListAction to remove the item
-      if (parent['type'] === 'list-item') {
-        parent.apply(new RemoveNestListAction(target));
-      }
-      else {
-        parent.apply(new RemoveChildAction(target));
-      }
-    }
-  }
-}
-
-/**
- * Convert the selected blocks to list strategy.
- */
-class ListTransformToListStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    const selectedBlocks = action.selectedBlocks;
-    const bulletList = target.parent.createList(action.listType);
-    const isSameList = selectedBlocks.every((block) => block.parent === target);
-    if (isSameList) {
-      // Select one or more list items belonging to the same list, and all items in this list should be updated
-      bulletList.apply(new AppendChildNodesAction(target.blocks));
-      target.parent.apply(new InsertBlocksAfterAction(target, bulletList));
-      target.parent.apply(new RemoveChildAction(target));
-      selectedBlocks.forEach((block) => block.nodes.map((node) => node.apply(new SyncUpSelectionAction())));
-    }
-    else {
-      const listItems = action.selectedBlocks.map((block) => target.parent.toListItem(block));
-      bulletList.apply(new AppendChildNodesAction(listItems));
-      target.parent.apply(new InsertBlocksAfterAction(target, bulletList));
-      action.selectedBlocks.forEach((block) => {
-        block.parent.apply(new RemoveChildAction(block));
-      });
-      if (target.blocks.length === 0) {
-        target.parent.apply(new RemoveChildAction(target));
-      }
-    }
-  }
-}
-
-/**
- * Convert the selected list block to paragraph strategy.
- */
-class ListTransformToParagraphStrategy extends ActionHandleStrategy {
-  /**
-   * @inheritDoc
-   */
-  handleAction(action, target) {
-    let isSelectedFirstBlock = false;
-    let isSelectedLastBlock = false;
-    const selectedBlocks = action.selectedBlocks;
-    const currentParagraph = selectedBlocks.map((block) => {
-      block.nodes.map((node) => node.apply(new SyncUpSelectionAction()));
-      if (block === target.blocks[0])
-        isSelectedFirstBlock = true;
-      if (block === target.blocks[target.blocks.length - 1])
-        isSelectedLastBlock = true;
-      return this.toParagraph(block);
-    });
-    if (isSelectedFirstBlock) {
-      target.parent.apply(new InsertBlocksBeforeAction(target, ...currentParagraph));
-    }
-    else if (isSelectedLastBlock) {
-      target.parent.apply(new InsertBlocksAfterAction(target, ...currentParagraph));
-    }
-    else {
-      const startIndex = target.blocks.indexOf(selectedBlocks[0]);
-      const lastIndex = target.blocks.indexOf(selectedBlocks[selectedBlocks.length - 1]);
-      const firstBulletList = target.parent.createList(target.type);
-      firstBulletList.apply(new AppendChildNodesAction(target.blocks.slice(0, startIndex)));
-      const lastBulletList = target.parent.createList(target.type);
-      lastBulletList.apply(new AppendChildNodesAction(target.blocks.slice(lastIndex + 1)));
-      target.parent.apply(new InsertBlocksBeforeAction(target, firstBulletList, ...currentParagraph, lastBulletList));
-      target.parent.apply(new RemoveChildAction(target));
-    }
-    selectedBlocks.map((block) => {
-      target.apply(new RemoveChildAction(block));
-    });
-    if (target.blocks.length === 0) {
-      target.parent.apply(new RemoveChildAction(target));
-    }
-  }
-  /**
-   * Converts a RTEListItemBlock to a RTETextBlock representing a paragraph.
-   *
-   * @param {RTEListItemBlock} block - The block that will be covered
-   * @returns {RTETextBlock} Returns a `RTETextBlock`.
-   */
-  toParagraph(block) {
-    const textBlock = new RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
-    textBlock.apply(new AppendChildNodesAction(block['nodes']));
-    textBlock['annotationMap'] = block['annotationMap'];
-    return textBlock;
-  }
-}
-
-/**
- * Insert image to list block strategy.
- */
-class ListInsertImageStrategy extends ActionHandleStrategy {
-  /**
-   * Insert image block at behind of the list item block.
-   *
-   * @param {InsertImageToBlockAction} action - The insert image action instance.
-   * @param {RTEListBlock} target - The list block.
-   */
-  handleAction(action, target) {
-    const imageBlock = action.imageBlockToBeInserted;
-    if (target.parent['type'] !== 'list-item') {
-      target.parent.apply(new InsertBlocksAfterAction(target, imageBlock));
-    }
-    else {
-      target.parent.apply(action);
-    }
-  }
-}
-
-/**
- * List block
- */
-class RTEListBlock extends RTEBlock {
-  constructor(id, type) {
-    super(id);
-    this.type = 'bullet-list';
-    this.blocks = [];
-    this.type = type;
-  }
-  /**
-   * Converts a VegaRTEListBlock object to an RTEListBlock
-   *
-   * @param {VegaRTEListBlock} block - Converts a `VegaRTEListBlock` object into an `RTEListBlock`.
-   * @returns {RTEListBlock} Return an instance of `RTEListBlock`
-   */
-  static from(block) {
-    const listBlock = new RTEListBlock(block.id, block.type);
-    listBlock.blocks = block.blocks.map((item) => {
-      const listItemBlock = RTEListItemBlock.from(item);
-      listItemBlock.parent = listBlock;
-      return listItemBlock;
-    });
-    return listBlock;
-  }
-  /**
-   * @inheritDoc
-   */
-  toJSON() {
-    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, blocks: this.blocks.map((block) => block.toJSON()) });
-  }
-  /**
-   * @inheritDoc
-   */
-  isNotEmpty() {
-    return this.blocks.length > 0;
-  }
-  /**
-   * @inheritDoc
+   * @inheritDoc
    */
   getLastNode() {
-    return this.blocks[this.blocks.length - 1].getLastNode();
-  }
-  /**
-   * @inheritDoc
-   */
-  clone() {
-    const clonedListBlock = new RTEListBlock(this.id, this.type);
-    clonedListBlock.blocks = this.blocks.map((item) => {
-      const clonedListItemBlock = item.clone();
-      clonedListItemBlock.parent = clonedListBlock;
-      return clonedListItemBlock;
-    });
-    clonedListBlock.annotationMap = super.cloneAnnotations();
-    clonedListBlock.parent = this.parent;
-    return clonedListBlock;
-  }
-}
-(() => {
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, RTEListBlock.name, new ListRemoveListItemStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_BLOCKS_BEFORE, RTEListBlock.name, new BlockInsertBlocksBeforeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_BLOCKS_AFTER, RTEListBlock.name, new BlockInsertBlocksAfterStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, RTEListBlock.name, new BlockAppendBlocksStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.TRANSFORM_LIST_BLOCK, RTEListBlock.name, new ListTransformToListStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK, RTEListBlock.name, new ListTransformToParagraphStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTEListBlock.name, new ListInsertImageStrategy());
-})();
-
-/**
- * Class representing the content state of the rich text editor.
- */
-class VegaRTEContent {
-  constructor(blocks) {
-    blocks.forEach((block) => {
-      block.parent = this;
-    });
-    this.blocks = blocks;
-  }
-  /**
-   * Converts a JSON array of blocks to a class array of RTEContentBlock.
-   *
-   * @param {VegaRTEContentBlock[]} value The JSON array of blocks to convert.
-   * @returns {VegaRTEContent} The converted array of RTEContentBlock.
-   */
-  static fromJSON(value) {
-    const blocks = value.map((block) => {
-      switch (block.type) {
-        case 'paragraph':
-        case 'title':
-        case 'subtitle':
-        case 'heading-1':
-        case 'heading-2':
-        case 'heading-3': {
-          return RTETextBlock.from(block);
-        }
-        case 'image':
-          return RTEImageBlock.from(block);
-        case 'bullet-list':
-        case 'number-list':
-          return RTEListBlock.from(block);
-        default: {
-          throw new Error(`[Vega] Unknown block type: ${block.type}`);
-        }
-      }
-    });
-    return new VegaRTEContent(blocks);
+    return this.nodes[0];
   }
   /**
-   * Create an empty content state
+   * The code block is selected or not.
    *
-   * @returns {VegaRTEContent} An empty content state
+   * @returns {boolean} - The boolean result.
    */
-  static createEmptyContent() {
-    return VegaRTEContent.fromJSON([
-      {
-        id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
-        type: 'paragraph',
-        nodes: [
-          {
-            id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
-            type: 'text',
-            text: '',
-          },
-        ],
-      },
-    ]);
-  }
-  /**
-   * Clones the content state.
-   *
-   * @param {boolean} deep - If true, performs a deep clone of the content state.
-   * @returns {VegaRTEContent} The cloned content state.
-   */
-  clone(deep = false) {
-    return deep
-      ? new VegaRTEContent(this.blocks.map((block) => block.clone()))
-      : new VegaRTEContent([...this.blocks]);
-  }
-  /**
-   * Converts the content state to a JSON array of blocks.
-   *
-   * @returns {VegaRTEContentBlock[]} The JSON array of blocks.
-   */
-  toJSON() {
-    return this.blocks.map((block) => block.toJSON());
-  }
-  /**
-   * Internal method to add the block item, remove the block item
-   *
-   * @param {ModifyContentAction} action - Modify content action
-   */
-  apply(action) {
-    ActionHandleStrategyRegistry.executeTheStrategy(action, this);
-  }
-  /**
-   * Convert text to list.
-   *
-   * @param {RTETextBlock} block - block
-   * @returns {RTEListItemBlock} list item block dto.
-   */
-  toListItem(block) {
-    block.nodes.map((node) => node.apply(new SyncUpSelectionAction()));
-    const listItemBlock = new RTEListItemBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
-    listItemBlock.apply(new AppendChildNodesAction(block['nodes']));
-    listItemBlock['annotationMap'] = block['annotationMap'];
-    return listItemBlock;
-  }
-  /**
-   * create list.
-   *
-   * @param {ListType} type - type
-   * @returns {RTEListBlock} list block dto.
-   */
-  createList(type) {
-    return new RTEListBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), type);
-  }
-  /**
-   * Finds a node by its ID in the content.
-   *
-   * @param {string} id - The ID of the node to find.
-   * @returns {Nullable<RTENode>} The found node or null if not found.
-   */
-  findNodeById(id) {
-    return this.findNodeInBlocksById(id, this.blocks);
-  }
-  /**
-   * Recursively searches for a node by its ID in the given blocks.
-   *
-   * @param {string} id - The ID of the node to find.
-   * @param {RTEContentBlock[]} blocks - The blocks to search within.
-   * @returns {Nullable<RTENode>} The found node or null if not found.
-   */
-  findNodeInBlocksById(id, blocks) {
-    for (const block of blocks) {
-      if ('nodes' in block) {
-        for (const node of block.nodes) {
-          if (node.id === id) {
-            return node;
-          }
-        }
-      }
-      if (block instanceof RTEListItemBlock && block.children) {
-        for (const cBlock of block.children) {
-          const foundNode = this.findNodeInBlocksById(id, cBlock.blocks);
-          if (foundNode) {
-            return foundNode;
-          }
-        }
-      }
-      if (block instanceof RTEListBlock && block.blocks) {
-        const foundNode = this.findNodeInBlocksById(id, block.blocks);
-        if (foundNode) {
-          return foundNode;
-        }
-      }
-    }
-    return null;
+  isSelected() {
+    return this.nodes[0].annotationMap.has(exports.InternalAnnotationTypeEnum.SELECTION_RANGE);
   }
 }
 (() => {
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, VegaRTEContent.name, new BlockRemoveChildBlockStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.APPEND_CHILD_NODES, VegaRTEContent.name, new BlockAppendBlocksStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_BLOCKS_BEFORE, VegaRTEContent.name, new BlockInsertBlocksBeforeStrategy());
-  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_BLOCKS_AFTER, VegaRTEContent.name, new BlockInsertBlocksAfterStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CODE_BLOCK, RTECodeBlock.name, new CodeBlockRemoveSelfStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.DELETE_CHILD, RTECodeBlock.name, new BlockRemoveNodeStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.SWITCH_OUT_FROM_CODE_BLOCK, RTECodeBlock.name, new SwitchOutFromCodeBlockStrategy());
+  ActionHandleStrategyRegistry.register(exports.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK, RTECodeBlock.name, new CodeBlockInsertImageStrategy());
 })();
+RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME = 'code-block-placeholder-element';
 
+exports.ActionHandleStrategy = ActionHandleStrategy;
+exports.ActionHandleStrategyRegistry = ActionHandleStrategyRegistry;
 exports.AnnotationAction = AnnotationAction;
 exports.AppendChildNodesAction = AppendChildNodesAction;
 exports.BlockAnnotation = BlockAnnotation;
+exports.BlockAppendNodesStrategy = BlockAppendNodesStrategy;
+exports.BlockDeleteNodeContentStrategy = BlockDeleteNodeContentStrategy;
+exports.BlockDeleteTextContentStrategy = BlockDeleteTextContentStrategy;
+exports.BlockInsertLineBreakStrategy = BlockInsertLineBreakStrategy;
+exports.BlockInsertLineBreakWithBlocksStrategy = BlockInsertLineBreakWithBlocksStrategy;
+exports.BlockInsertNodesBeforeNodeStrategy = BlockInsertNodesBeforeNodeStrategy;
+exports.BlockMergeNodesStrategy = BlockMergeNodesStrategy;
+exports.BlockRemoveNodeStrategy = BlockRemoveNodeStrategy;
+exports.BlockReplaceNodeWithNodesStrategy = BlockReplaceNodeWithNodesStrategy;
+exports.BlockReplaceNodesStrategy = BlockReplaceNodesStrategy;
+exports.BlockSplitWithTextNodeStrategy = BlockSplitWithTextNodeStrategy;
 exports.BoldAnnotation = BoldAnnotation;
 exports.BoldAnnotationAction = BoldAnnotationAction;
-exports.BreakSingleBlockAction = BreakSingleBlockAction;
 exports.ClearFormattingAnnotationAction = ClearFormattingAnnotationAction;
 exports.CodeAnnotationAction = CodeAnnotationAction;
 exports.HorizontalAlignmentAnnotation = HorizontalAlignmentAnnotation;
@@ -3839,25 +3076,25 @@ exports.MergeTwoBlocksNodesAction = MergeTwoBlocksNodesAction;
 exports.ModifyContentAction = ModifyContentAction;
 exports.NodeAnnotation = NodeAnnotation;
 exports.RTEBlock = RTEBlock;
-exports.RTEImageBlock = RTEImageBlock;
+exports.RTECodeBlock = RTECodeBlock;
+exports.RTECodeBlockNode = RTECodeBlockNode;
 exports.RTEImageNode = RTEImageNode;
-exports.RTEListBlock = RTEListBlock;
-exports.RTEListItemBlock = RTEListItemBlock;
 exports.RTENode = RTENode;
 exports.RTETextBlock = RTETextBlock;
 exports.RTETextNode = RTETextNode;
 exports.RTE_TEXT_COLORS = RTE_TEXT_COLORS;
 exports.RemoveChildAction = RemoveChildAction;
 exports.ReplaceChildNodesAction = ReplaceChildNodesAction;
-exports.SelectionRangeAnnotation = SelectionRangeAnnotation;
+exports.SelectionChangeAction = SelectionChangeAction;
 exports.SplitBlockWithNodeAction = SplitBlockWithNodeAction;
 exports.StrikethroughAnnotation = StrikethroughAnnotation;
+exports.SyncUpSelectionAction = SyncUpSelectionAction;
 exports.TextColorAnnotation = TextColorAnnotation;
 exports.TextSplittableAction = TextSplittableAction;
 exports.TextStyleAnnotation = TextStyleAnnotation;
 exports.TextStyleAnnotationAction = TextStyleAnnotationAction;
 exports.UnderlineAnnotation = UnderlineAnnotation;
+exports.UpdateCodeBlockAction = UpdateCodeBlockAction;
 exports.UpdateTextAction = UpdateTextAction;
-exports.VegaRTEContent = VegaRTEContent;
 exports.ZERO_WIDTH_SPACE = ZERO_WIDTH_SPACE;
 exports.stateEntityRenderingRegistry = stateEntityRenderingRegistry;