@globalpayments/vega 2.49.1 → 2.51.0

package/dist/esm/vega-rich-text-editor_4.entry.js

@@ -1,41 +1,42 @@
-import { h, H as Host, F as Fragment, r as registerInstance, c as createEvent, g as getElement } from './index-187f71d1.js';
-import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer, L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
+import { h, H as Host, F as Fragment, r as registerInstance, c as createEvent, g as getElement } from './index-d0a47531.js';
+import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
-import { g as getActiveElement, s as sanitizeVegaComponent } from './component-cae24190.js';
+import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { d as domNodeSubjectFactory, b as VegaDropdownClick, f as VegaChange, P as VegaImageInserted, a as VegaClick, M as VegaPopoverShow, N as VegaPopoverHide } from './dom-node-subject-factory-f77cf9cc.js';
-import { V as VegaInternalComponentDidRender, b as VegaInternalRichTextEditorSelectionRangeChange, a as VegaInternalRichTextEditorFlushChanges, u as VegaInternalRichTextEditDeleteSelectedNodes, v as VegaInternalRichTextImageClick, w as VegaInternalRichTextImageDeleteButtonClicked, q as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-85ad403f.js';
-import { b as ToolbarButtonSlimmer, I as ImageAnnotationAction, T as TextNodeRenderingRegistry, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-1aa938ab.js';
+import { d as domNodeSubjectFactory, b as VegaDropdownClick, f as VegaChange, P as VegaImageInserted, a as VegaClick, M as VegaPopoverShow, N as VegaPopoverHide } from './dom-node-subject-factory-6374611f.js';
+import { V as VegaInternalComponentDidRender, a as VegaInternalRichTextEditorFlushChanges, v as VegaInternalRichTextEditDeleteSelectedNodes, w as VegaInternalRichTextImageClick, x as VegaInternalRichTextImageDeleteButtonClicked, r as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-178b2743.js';
+import { b as ToolbarButtonSlimmer, I as ImageAnnotationAction, T as TextNodeRenderingRegistry, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-1497f70e.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-58cf8aa6.js';
-import { f as RTETextNode, l as BoldAnnotationAction, h as NodeAnnotationTypeEnum, T as TextSplittableAction, m as ItalicAnnotation, U as UnderlineAnnotation, R as RTETextBlock, n as TextStyleAnnotationAction, o as TextStyleAnnotation, p as BoldAnnotation, q as BlockAnnotationTypeEnum, C as ClearFormattingAnnotationAction, r as CodeAnnotationAction, S as StrikethroughAnnotation, A as AnnotationAction, t as SelectionRangeAnnotation, L as LinkAnnotationAction, u as IndentAnnotation, e as RTEImageNode, M as ModifyContentAction, v as ModifyContentActionType, b as RTEListItemBlock, H as HorizontalAlignmentAnnotation, g as RTENode, s as stateEntityRenderingRegistry, Z as ZERO_WIDTH_SPACE, I as InternalAnnotationTypeEnum, V as VegaRTEContent, w as AppendChildNodesAction, x as UpdateTextAction, y as MergeTwoBlocksNodesAction, z as SplitBlockWithNodeAction, D as BreakSingleBlockAction, E as RemoveChildAction, F as ReplaceChildNodesAction, G as InsertBlocksBeforeAction, k as RTE_TEXT_COLORS, c as RTEListBlock, a as RTEImageBlock, J as InsertBlocksAfterAction } from './content-state-dbc9f635.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-715dccf9.js';
+import { g as RTETextNode, J as BoldAnnotationAction, N as NodeAnnotationTypeEnum, G as RTECodeBlockNode, T as TextSplittableAction, K as ItalicAnnotation, O as UnderlineAnnotation, d as RTETextBlock, P as TextStyleAnnotationAction, Q as TextStyleAnnotation, V as BoldAnnotation, W as BlockAnnotationTypeEnum, X as ClearFormattingAnnotationAction, Y as CodeAnnotationAction, _ as StrikethroughAnnotation, D as SelectionChangeAction, L as LinkAnnotationAction, H as AnnotationAction, $ as IndentAnnotation, a as RTEImageNode, M as ModifyContentAction, f as ModifyContentActionType, a0 as HorizontalAlignmentAnnotation, c as AppendChildNodesAction, Z as ZERO_WIDTH_SPACE, a1 as UpdateTextAction, a2 as MergeTwoBlocksNodesAction, S as SplitBlockWithNodeAction, R as RemoveChildAction, b as ReplaceChildNodesAction, e as InsertBlocksBeforeAction, F as RTE_TEXT_COLORS, u as RTECodeBlock, I as InsertBlocksAfterAction, w as stateEntityRenderingRegistry } from './code-block-ef2f04ca.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-c345ca2e.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8ada793f.js';
-import { a as waitForComponentDidRender } from './index-4aa167d6.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-89a72ee7.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-b7d511f6.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-4e3cf09d.js';
-import { d as debounce } from './timer-9321173b.js';
-import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
-import { O as Observer } from './observer-3959f9dd.js';
-import { f as findParent, r as rgbToHex } from './ui-ed1283bb.js';
+import { a as waitForComponentDidRender } from './index-f5d2fe61.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-87d80e46.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-7428cc01.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-b6c8051c.js';
+import { a as RTEListItemBlock, V as VegaRTEContent, B as BreakSingleBlockAction, b as RTEListBlock, R as RTEImageBlock } from './content-state-69d29a07.js';
+import { R as RTESelectionState, A as AutoRunWhenReRenderTaskQueueSlimmer, a as SelectionController } from './selection-controller-3d6dfc87.js';
 import { b as FORM_ELEMENT_VALUE_CHANGE, D as DARK_MODE_CHANGE } from './static-subject-title-ca83d6b6.js';
+import { O as Observer } from './observer-3959f9dd.js';
+import { d as debounce } from './timer-9321173b.js';
 import { D as DarkModeStateControllerSlimmer } from './dark-mode-state-controller-slimmer-f1c2c299.js';
 import { i as isNonNullable } from './type-guard-158f6d7a.js';
-import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-6a7cd3ee.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-5d45361e.js';
-import { T as TranslationSlimmer } from './translation-slimmer-88966d5c.js';
-import { V as VegaInternalThemeManager } from './dark-mode-style-controller-2ada8e22.js';
-import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-42bf9773.js';
+import { r as rgbToHex, f as findParent } from './ui-7d177fb0.js';
+import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-cc5b6a2d.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-2b975cbf.js';
+import { T as TranslationSlimmer } from './translation-slimmer-e6b130bf.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-ea798fc8.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-2218e6ba.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
 import { t as trashCan } from './trash-can-8819a939.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
 import './icon-manager-638dd4d4.js';
 import './dynamic-slimmer-90b8af32.js';
-import './wait-for-vega-handler-b18eb955.js';
+import './wait-for-vega-handler-e0a928cd.js';
 import './string-be824360.js';
-import './translation-cf7f020a.js';
-import './page-resize-observer-slimmer-15a84d26.js';
+import './translation-71e0711d.js';
+import './page-resize-observer-slimmer-c51f1912.js';
 import './ui-8424715a.js';
 import './breakpoints-d9faf11c.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
@@ -43,15 +44,16 @@ import './mutation-observer-slimmer-6cef9549.js';
 import './mutation-observer-filters-1a054fb0.js';
 import './array-7888f339.js';
 import './number-4398f2e1.js';
-import './sub-state-observer-slimmer-be7a6ce3.js';
-import './internal-vega-event-manager-87dc436c.js';
+import './sub-state-observer-slimmer-93eeb87d.js';
+import './internal-vega-event-manager-d80c53c5.js';
+import './synchronize-task-queue-ac8acc3b.js';
 import './regex-dfe11abf.js';
 import './typography-396de03f.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-0fbe8fb0.js';
 import './index-44c794b4.js';
 import './_commonjsHelpers-9943807e.js';
-import './keyboard-manager-262be5ce.js';
+import './keyboard-manager-9564ad83.js';
 
 var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -213,6 +215,8 @@ class ToolbarRenderer extends VegaSlimmer {
           return this.bulletsNumbersToolbarButtonSlimmer;
         case 'horizontalAlignment':
           return this.horizontalAlignmentToolbarButtonSlimmer;
+        case 'codeBlock':
+          return this.codeBlockToolbarButtonSlimmer;
       }
     };
   }
@@ -269,6 +273,9 @@ __decorate$z([
 __decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);
+__decorate$z([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "codeBlockToolbarButtonSlimmer", void 0);
 
 const bold = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>`,
@@ -308,7 +315,8 @@ class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }
@@ -375,7 +383,8 @@ class ItalicToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }
@@ -445,7 +454,8 @@ class UnderlineToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }
@@ -518,7 +528,8 @@ class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
+      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
   addDropdownObserver(dropdownRef) {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, this.handleDropdownItemClick);
@@ -611,7 +622,8 @@ class ClearStyleToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
+      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
 }
 (() => {
@@ -658,7 +670,8 @@ class CodeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
+      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
         node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
 }
@@ -727,7 +740,8 @@ class StrikethroughToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }
@@ -743,25 +757,6 @@ const link = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M562.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L405.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C189.5 251.2 196 330 246 380c56.5 56.5 148 56.5 204.5 0L562.8 267.7zM43.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C57 372 57 321 88.5 289.5L200.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C416.5 260.8 410 182 360 132c-56.5-56.5-148-56.5-204.5 0L43.2 244.3z"/></svg>`,
 };
 
-/**
- * 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);
-  }
-}
-
 var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -893,7 +888,7 @@ class MoreIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => node.type === 'list-item') ||
+      selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
       selectedNodes.some((node) => node instanceof RTEImageNode));
   }
   onClick() {
@@ -937,7 +932,7 @@ class LessIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => node.type === 'list-item') ||
+      selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
       selectedNodes.some((node) => node instanceof RTEImageNode));
   }
   onClick() {
@@ -1104,7 +1099,8 @@ class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof RTEImageNode || node instanceof RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'bullet-list') {
     return (selectedBlocks.length > 0 &&
@@ -1167,7 +1163,8 @@ class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof RTEImageNode || node instanceof RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'number-list') {
     return (selectedBlocks.length > 0 &&
@@ -1242,7 +1239,8 @@ class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof RTEImageNode || node instanceof RTECodeBlockNode));
   }
 }
 (() => {
@@ -1518,6 +1516,12 @@ class HorizontalAlignmentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isSelected() {
     return false;
   }
+  isDisabled() {
+    return (super.isDisabled() ||
+      this.selectionController
+        .getSelectedBlocks()
+        .some((block) => block.type === 'code-block'));
+  }
 }
 __decorate$g([
   MapToComponentField()
@@ -1538,944 +1542,249 @@ __decorate$g([
   MapToComponentMethod('componentWillRender')
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
-let processing = false;
 /**
- * Simulate a selection for browsers that don't support shadow selection.
- * Cypress test case added in https://github.com/heartlandpayments/Vega/pull/1561/files#diff-83bdbaaf47fc156ab878099aa1f21b0e8ab92abe5852521299f1fb6efab001c2R300
+ * Represents the state of the RTE
  */
-class ShadowSelection {
-  constructor() {
-    this.rangeCount = 0;
-    this.ranges = [];
+class RTEEditorState {
+  constructor(content, selection) {
+    this.content = content.clone(true);
+    this.selection = selection.clone();
+    this.refreshSelectionNodes();
   }
   /**
-   * Returns a Range object at a specified index.
+   * Clones the editor state, updating the content and selection based on the provided content.
    *
-   * @param {number} index - A specified index.
-   * @returns {Range} - A Range object.
+   * @returns {RTEEditorState} A new instance of RTEEditorState with the updated content and selection.
    */
-  getRangeAt(index) {
-    return this.ranges[index];
-  }
-  /**
-   * Adds a Range to ranges array.
-   *
-   * @param {Range} range - The range of selection.
-   */
-  addRange(range) {
-    this.ranges.push(range);
-    this.rangeCount = this.ranges.length;
-    if (!processing) {
-      const windowSelection = window.getSelection();
-      windowSelection.removeAllRanges();
-      windowSelection.setBaseAndExtent(range.startContainer, range.startOffset, range.endContainer, range.endOffset);
-    }
+  clone() {
+    return new RTEEditorState(this.content, this.selection);
   }
   /**
-   * Clears all ranges.
+   * Refreshes the selection nodes in the editor state.
    */
-  removeAllRanges() {
-    this.ranges = [];
-    this.rangeCount = 0;
+  refreshSelectionNodes() {
+    const { startNode: oldStartNode, endNode: oldEndNode, startOffset, endOffset, } = this.selection.range;
+    if (oldStartNode && oldEndNode) {
+      const startNode = this.content.findNodeById(oldStartNode.id);
+      const endNode = this.content.findNodeById(oldEndNode.id);
+      if (startNode && endNode) {
+        this.selection.range.updateRTERange({
+          startNode,
+          endNode,
+          startOffset,
+          endOffset,
+        });
+      }
+    }
   }
 }
+
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
- * Due to the ShadowRoot.getSelection is not a standard API, we add this polyfill to achieve this function.
- *
- * - On Chromium, calling document.getSelection will not pierce into the Shadow DOM and gives you some unhelpful high-level element.
- *   But it does expose the non-standard getSelection method on the ShadowRoot.
- *
- * - On Firefox, it does not implement ShadowRoot.getSelection,
- *   but document.getSelection will pierce through shadow dom and give you the exact element.
- *
- * - On Safari, Selection.getComposedRanges is supported as of v17. On versions before that,
- *   ShadowRoot.getSelection is not supported and apparently document.getSelection does not pierce the Shadow DOM, meaning you are just out of luck.
- *
- * https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot#shadowroot.getselection
- * https://stackoverflow.com/a/70523247
+ * The value controller is responsible for updating the value of the rich text editor.
  */
-class ShadowSelectionPolyfill {
-  constructor() {
-    this.supportShadowSelection = typeof window.ShadowRoot.prototype['getSelection'] === 'function';
-    this.supportBeforeInput = typeof window.InputEvent.prototype.getTargetRanges === 'function';
-    this.isFirefox = window.navigator.userAgent.toLowerCase().indexOf('firefox') > 0;
-    this.listen();
-  }
+class ValueController extends VegaSlimmer {
   /**
-   * For Firefox, we directly use document.getSelection()
-   * For other browser which not support shadowroot.getSelection, we use this.selection which is built by us.
-   * For browser which supported shadowroot.getSelection, we use shadowRoot.getselection().
-   *
-   * @param {ShadowRoot} shadow - A shadow.
-   * @returns {Nullable<Selection>} - The shadow selection.
+   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
    */
-  getSelection(shadow) {
-    if (this.supportShadowSelection) {
-      return shadow['getSelection']();
-    }
-    else {
-      return this.isFirefox
-        ? this.getFirefoxSelection()
-        : this.polyfilledShadowSelection;
-    }
+  connectedCallback() {
+    const flushChangesWithDebounce = debounce(() => {
+      void this.valueController.flushChanges(this.value);
+    }, ValueController.VALUE_CHANGE_DEBOUNCE_TIME, this);
+    this.flushChangeObserver = new Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
+    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
   }
   /**
-   * Get selection in firefox.
-   *
-   * Example:
-   *
-   * <span>span1</span><span>span2</span><span>span3</span>
-   *
-   * In firefox, while selected `span2`, the range be likely to:
-   * range:
-   *   startContainer: #text 'span1'
-   *   startOffset: 5
-   * 	 endContainer: #text 'span3'
-   *   endOffset: 0
-   * start is end of brefore node and end is start of after node.
-   *
-   * So we should modify the startContainer and endContainer here.
-   *
-   * modified range:
-   *   startContainer: #text 'span2'
-   *   startOffset: 0
-   * 	 endContainer: #text 'span2'
-   *   endOffset: 5
-   *
-   * @returns {Selection} - document selection
-   */
-  getFirefoxSelection() {
-    const selection = document.getSelection();
-    const range = selection.getRangeAt(0);
-    const startNode = range.startContainer;
-    const endNode = range.endContainer;
-    if (startNode !== endNode && startNode.textContent.length === range.startOffset) {
-      const nextSibling = startNode.nodeType === Node.TEXT_NODE
-        ? startNode.parentNode.nextSibling
-        : startNode.nextSibling;
-      range.setStart(nextSibling.firstChild, 0);
-    }
-    if (endNode !== startNode && range.endOffset === 0) {
-      const previousSibling = endNode.nodeType === Node.TEXT_NODE
-        ? endNode.parentNode.previousSibling
-        : endNode.previousSibling;
-      range.setEnd(previousSibling.lastChild, previousSibling.lastChild.textContent.length);
-    }
-    return selection;
-  }
-  /**
-   * Sets up event listeners for `selectionchange` and `beforeinput` events to simulate shadow selection.
-   */
-  listen() {
-    if (this.isFirefox || this.supportShadowSelection || !this.supportBeforeInput)
-      return;
-    this.polyfilledShadowSelection = new ShadowSelection();
-    window.addEventListener('selectionchange', () => {
-      if (!processing) {
-        processing = true;
-        const active = getActiveElement();
-        if (active && active.hasAttribute('contenteditable')) {
-          // This command will not actually work, it only trigger the `beforeinput` event,
-          // the `beforeinput` event will prevented this command work.
-          document.execCommand('indent');
-        }
-        else {
-          this.polyfilledShadowSelection.removeAllRanges();
-        }
-        processing = false;
-      }
-    }, true);
-    window.addEventListener('beforeinput', (event) => {
-      if (processing) {
-        const ranges = event.getTargetRanges();
-        const range = ranges[0];
-        const newRange = new Range();
-        newRange.setStart(range.startContainer, range.startOffset);
-        newRange.setEnd(range.endContainer, range.endOffset);
-        this.polyfilledShadowSelection.removeAllRanges();
-        this.polyfilledShadowSelection.addRange(newRange);
-        event.preventDefault();
-        event.stopImmediatePropagation();
-      }
-    }, true);
+   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
   }
-}
-const ShadowSelectionPolyfill$1 = new ShadowSelectionPolyfill();
-
-/** Manages selection range for a rich text editor, providing methods to set, sync, and create native ranges based on RTENodes and Nodes. */
-class RTERange {
   /**
-   * Initial the rte range properties
-   *
-   * @param {Node} [startContainer] The range start element.
-   * @param {Node} [endContainer] The range end element.
-   * @param {number} [startOffset] The range start element content offset, default value is 0.
-   * @param {number} [endOffset]  The range end element content offset, default value is 0.
-   * @param {RTENode} [startNode] The range start node, the start node could be null if the start element is root element.
-   * @param {RTENode} [endNode]  The range start node, the start node could be null if the start element is root element.
-   * @param {Range} [nativeRange] The browser native range instance.
-   */
-  constructor(startContainer, endContainer, startOffset = 0, endOffset = 0, startNode, endNode, nativeRange) {
-    this._startOffset = 0;
-    this._endOffset = 0;
-    this._startContainer = startContainer;
-    this._endContainer = endContainer;
-    this._startOffset = startOffset;
-    this._endOffset = endOffset;
-    this._startNode = startNode;
-    this._endNode = endNode;
-    if (nativeRange) {
-      this._oldNativeRange = nativeRange;
+   * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
+   */
+  componentWillLoad() {
+    if (this.value && !(this.value instanceof VegaRTEContent)) {
+      this.value = VegaRTEContent.fromJSON(this.value);
     }
   }
   /**
-   * Returns the start container as a Node or null if it is not set.
-   * The start container could be null when the dom node should be create after re-render.
-   *
-   * @returns {Nullable<Node>} The range start element.
+   * Watches the value of the editor and updates the internal value.
    */
-  get startContainer() {
-    return this._startContainer;
+  watchValueUpdate() {
+    if (this.value && !(this.value instanceof VegaRTEContent)) {
+      this.value = VegaRTEContent.fromJSON(this.value);
+    }
+    else if (!this.value || this.value.blocks.length === 0) {
+      this.value = VegaRTEContent.createEmptyContent();
+    }
+    else {
+      this.changeEventEmitter.emit(this.value);
+      ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+        host: this.host,
+        detail: this.value,
+      });
+    }
   }
   /**
-   * Returns the end container as a Node or null if it is not set.
-   * The end container could be null when the dom node should be create after re-render.
+   * Updates the value of the editor and restore the selection.
    *
-   * @returns {Nullable<Node>} The range start element.
+   * @param {VegaRTEContent} newValue The new value to set.
+   * @param {boolean} recordHistory - Whether to record the change in history.
    */
-  get endContainer() {
-    return this._endContainer;
+  async flushChanges(newValue, recordHistory = true) {
+    if (recordHistory) {
+      this.historyController.registerHistory(new RTEEditorState(newValue, new RTESelectionState(this.selectionController.getCurrentRange())));
+    }
+    this.value = newValue.clone();
+    await waitForComponentDidRender(this.host);
   }
   /**
-   * Returns the range start RTE node as a RTENode or null if it is not set.
-   * The start RTENode could be null when the range start node is the root element of the rich text editor.
+   * Determines whether the observer should accept changes.
    *
-   * @returns {Nullable<RTENode>} The range start element.
+   * @returns {boolean} Always returns true in the current implementation.
    */
-  get startNode() {
-    return this._startNode;
+  isAcceptableFlushChange() {
+    return true;
+  }
+}
+ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
+__decorate$f([
+  MapToComponentField()
+], ValueController.prototype, "host", void 0);
+__decorate$f([
+  MapToComponentField({ writable: true })
+], ValueController.prototype, "value", void 0);
+__decorate$f([
+  MapToComponentField()
+], ValueController.prototype, "changeEventEmitter", void 0);
+__decorate$f([
+  MapToComponentField()
+], ValueController.prototype, "valueController", void 0);
+__decorate$f([
+  MapToComponentField()
+], ValueController.prototype, "historyController", void 0);
+__decorate$f([
+  MapToComponentField()
+], ValueController.prototype, "selectionController", void 0);
+__decorate$f([
+  MapToComponentMethod('connectedCallback')
+], ValueController.prototype, "connectedCallback", null);
+__decorate$f([
+  MapToComponentMethod('disconnectedCallback')
+], ValueController.prototype, "disconnectedCallback", null);
+__decorate$f([
+  MapToComponentMethod('componentWillLoad')
+], ValueController.prototype, "componentWillLoad", null);
+__decorate$f([
+  MapToComponentMethod('watchValueUpdate')
+], ValueController.prototype, "watchValueUpdate", null);
+
+/**
+ * The rich text content controller
+ */
+class RichTextContentController {
+  constructor(editor) {
+    this.editor = editor;
   }
   /**
-   * Returns the range end RTE node as a RTENode or null if it is not set.
-   * The end RTENode could be null when the range end node is the root element of the rich text editor.
+   * Sync rich text content editable with disabled property
    *
-   * @returns {Nullable<RTENode>} The range start element.
    */
-  get endNode() {
-    return this._endNode;
+  syncRichTextContentEditable() {
+    this.editor.richTextContentEditable = !this.editor.disabled;
   }
+}
+
+const ROOT_CONTAINER_CLASS_NAME = 'rich-text-content';
+/** This code snippet is defining an abstract class named `BaseHandler` with an abstract method `execute`. */
+class BaseHandler {
   /**
-   * Returns range's start offset.
+   * The function `execute` initializes the current state and selection, and then handles an event if provided.
    *
-   * @returns {number} The character length in text node or the element index of parent element.
+   * @param {VegaRTEContent} currentState - The current state of the VegaRTE content.
+   * @param {SelectionController} selectionController - Manages the selection of items in the user interface.
+   * @param {HTMLElement} richTextEditor - The current rich text editor component
+   * @param {InputEvent} [event] - It is used to pass an input event to the method for handling.
    */
-  get startOffset() {
-    return this._startOffset;
+  execute(currentState, selectionController, richTextEditor, event) {
+    this.initCurrentStateAndSelection(currentState, selectionController);
+    this.setCurrentRichTextEditor(richTextEditor);
+    this.handleEvent(event);
   }
   /**
-   * Returns range's start offset.
+   * The function `isRootContainer` checks if an HTML element is a root container with a class of 'rich-text-content'.
    *
-   * @returns {number} The character length in text node or the element index of parent element.
+   * @param {HTMLElement} element - HTMLElement
+   * @returns {boolean} The boolean value
    */
-  get endOffset() {
-    return this._endOffset;
+  isRootContainer(element) {
+    return (element &&
+      element.nodeType === Node.ELEMENT_NODE &&
+      element.classList.contains(ROOT_CONTAINER_CLASS_NAME));
   }
   /**
-   * Updates the range options for a Rich Text Editor.
-   * This method will called after modify the content, the start node and end node should be rte node.
-   * This method will called after selectionchange event emit, the start node and end node should be the html node.
+   * Checks if a given HTML element represents an empty paragraph containing only a line break element.
    *
-   * @param {RTERangeOptions} options - An object that contains the following properties:
-   * @param {Range} [nativeRange] - The native range instance
-   * @returns {RTERange} - The new RTERange instance
-   */
-  updateRTERange(options, nativeRange) {
-    const { startOffset, endOffset } = options;
-    this._startOffset = startOffset;
-    this._endOffset = endOffset;
-    const startNode = options.startNode;
-    const endNode = options.endNode;
-    if (startNode instanceof RTENode) {
-      this._startNode = startNode;
-      this._endNode = endNode;
-      const startContainer = this.getElementByRTENode(this._startNode);
-      const endContainer = this._startNode === this._endNode ? startContainer : this.getElementByRTENode(this._endNode);
-      if (startContainer) {
-        this._startContainer = startContainer;
-        this._endContainer = endContainer;
-      }
-    }
-    else {
-      // The selectionchange callback has a 50 ms delay, so we need to check the next range is the same as the current ret range.
-      this._startContainer = startNode;
-      this._endContainer = endNode;
-      this._startNode = this.getRTENodeByElement(this._startContainer);
-      this._endNode =
-        this._startContainer === this._endContainer
-          ? this._startNode
-          : this.getRTENodeByElement(this._endContainer);
-      if (nativeRange) {
-        this._oldNativeRange = nativeRange;
-      }
-    }
-    return new RTERange(this._startContainer, this._endContainer, this._startOffset, this._endOffset, this._startNode, this._endNode, this._oldNativeRange);
+   * @param {HTMLElement} node - An HTMLElement node that represents a paragraph element in the HTML document.
+   * @returns {boolean} boolean result
+   */
+  isEmptyParagraph(node) {
+    return node && node.childNodes && node.childNodes.length === 0;
   }
   /**
-   * Creates a new instance of the `RTERange` class with the same properties as the current instance.
+   * Removes selected nodes within a range in a rich text editor content.
+   * The method is only used for different nodes are selected
    *
-   * @returns {RTERange} A new `RTERange` instance with the same start and end containers, offsets, and nodes.
+   * @param {boolean} [mergeNode] Merge start node and end node or not, default value is false.
+   * @returns {RTENode} The range start node, usually the start node is the first item of selectedNodes, if the selectedNodes is all removed, the start node will be a new text node.
    */
-  clone() {
-    return new RTERange(this._startContainer, this._endContainer, this._startOffset, this._endOffset, this._startNode, this._endNode, this._oldNativeRange);
+  removeSelectionRange(mergeNode = false) {
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.richTextEditorRef, VegaInternalRichTextEditDeleteSelectedNodes), { host: this.richTextEditorRef, detail: mergeNode });
+    const range = this.selectionController.getCurrentRange();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return range.startNode || selectedNodes[0];
   }
   /**
-   * Creates a Range object based on start and end nodes and offsets.
-   * Invoke this method to get the future range state if the range content modified.
-   * Invoke this method to get the native range instance if range start node and end node not defined
+   * Creates a new paragraph with an empty text node and returns it.
    *
-   * @returns {Nullable<Range>} The range instance. The return value could be null if the start node or end node are not rendered.
+   * @returns {RTETextBlock} An empty paragraph with a unique identifier and a text node appended to it.
    */
-  toNativeRange() {
-    const startContainer = this.getElementByRTENode(this._startNode);
-    const endContainer = this._startNode === this._endNode ? startContainer : this.getElementByRTENode(this._endNode);
-    const range = new Range();
-    if (startContainer && endContainer) {
-      range.setStart(startContainer, this._startOffset);
-      range.setEnd(endContainer, this._endOffset);
-      this._startContainer = startContainer;
-      this._endContainer = endContainer;
-      this._oldNativeRange = range;
-      return range;
-    }
-    else if (this._oldNativeRange) {
-      return this._oldNativeRange;
-    }
+  createEmptyParagraph() {
+    const paragraph = new RTETextBlock(generateUUID(), 'paragraph');
+    const textNode = new RTETextNode(`${paragraph.id}1`, '', paragraph);
+    paragraph.apply(new AppendChildNodesAction([textNode]));
+    return paragraph;
   }
   /**
-   * Retrieves the DOM element associated with a given RTENode entity.
+   * The function initializes the current state and selection controller in TypeScript.
    *
-   * @param {Nullable<RTENode>} node - Represents a node in a Rich Text Editor.
-   * @returns {Nullable<Node>} a Node object or null.
-   */
-  getElementByRTENode(node) {
-    if (node) {
-      const element = stateEntityRenderingRegistry.getDOMByEntity(node);
-      if (element) {
-        return node instanceof RTEImageNode
-          ? findParent(element, 'vega-rich-text-image-editor')
-          : element.firstChild;
-      }
-    }
+   * @param {VegaRTEContent} currentState - The current state of a Vega runtime environment content.
+   * @param {SelectionController} selectionController - It is used to manage the selection of content within the VegaRTE editor.
+   */
+  initCurrentStateAndSelection(currentState, selectionController) {
+    this.currentState = currentState;
+    this.selectionController = selectionController;
   }
   /**
-   * Retrieves an RTENode based on the given element by checking its type and parent elements.
+   * Queries the rich text editor element from the input event target.
    *
-   * @param {Node} element - An element in the DOM (Document Object Model).
-   * @returns { Nullable<RTENode>} Returns a nullable `RTENode` object.
-   */
-  getRTENodeByElement(element) {
-    if (element) {
-      const registerElement = element.nodeType === Node.TEXT_NODE
-        ? element.parentElement
-        : element.nodeName === 'VEGA-RICH-TEXT-IMAGE-EDITOR'
-          ? element.querySelector('img')
-          : element;
-      return stateEntityRenderingRegistry.getEntityByDOM(registerElement);
-    }
+   * @param {HTMLElement} richTextEditor - The current rich text editor component
+   */
+  setCurrentRichTextEditor(richTextEditor) {
+    this.richTextEditorRef = richTextEditor;
   }
 }
 
 /**
- * Represents the state of the selection in the RTE.
- */
-class RTESelectionState {
-  constructor(range) {
-    this.range = range;
-  }
-  /**
-   * Clones the selection state, updating the range nodes based on the provided content.
-   *
-   * @returns {RTESelectionState} A new instance of RTESelectionState with the updated range.
-   */
-  clone() {
-    const newRange = this.range.clone();
-    return new RTESelectionState(newRange);
-  }
-}
-
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/**
- * The text selection controller
- */
-class SelectionController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.currentRange = new RTERange();
-    this.updateCaretPositionTaskQueue = new SynchronizeTaskQueue(1);
-    this.handleSelectionWithDebounce = debounce(this.handleSelectionChange, SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, this);
-    this.pendingRestoreSelectionNodes = [];
-    /**
-     * Sets the next selection state with specified start and end nodes, offsets, and a timestamp.
-     *
-     * Example:
-     * Before insert text start offset is 0, the new start offset should update to 1
-     * Before delete text start offset is 1, the new start offset should update to 0
-     *
-     */
-    this.createUpdateSelectionRangeTask = async () => {
-      // add await Promise.resolve to put the code behind to a micro task
-      await Promise.resolve();
-      const range = this.currentRange.toNativeRange();
-      if (range) {
-        this.setSelectionRange(range);
-      }
-    };
-  }
-  /**
-   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
-   */
-  connectedCallback() {
-    this.registerSelectionRangeChangeObserver();
-  }
-  /**
-   * Component lifecycle - [disconnectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
-   */
-  disconnectedCallback() {
-    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
-  }
-  /**
-   * Component lifecycle - [componentDidLoad]{@link VegaRichTextEditor.componentDidLoad}
-   */
-  componentDidLoad() {
-    document.addEventListener('selectionchange', this.handleSelectionWithDebounce);
-  }
-  /**
-   * Watches the internal value of the editor
-   */
-  watchValueUpdate() {
-    this.prepareRestoreSelectionState();
-    this.restoreSelection();
-  }
-  /**
-   * Update the caret position after the component re-render
-   */
-  async updateCaretPosition() {
-    if (this.updateCaretPositionTaskQueue.queue.length) {
-      await this.updateCaretPositionTaskQueue.runTask();
-    }
-  }
-  /**
-   * Get the current RTE selection range
-   *
-   * @returns {RTERange} - The current RTE selection range
-   */
-  getCurrentRange() {
-    return this.currentRange;
-  }
-  /**
-   * Get the selected rich text node
-   *
-   * @returns {RTENode[]} Selected rich text nodes
-   */
-  getSelectedNodes() {
-    return Array.from(this.selectionMap.values()).flat();
-  }
-  /**
-   * Get the selected rich text blocks
-   *
-   * @returns {RTEBlock[]} Selected rich text blocks
-   */
-  getSelectedBlocks() {
-    return Array.from(this.selectionMap.keys());
-  }
-  /**
-   * Set the selection state
-   *
-   * @param {RTESelectionState} state - The selection state to set
-   */
-  setSelectionState(state) {
-    this.selectionState = state;
-  }
-  /**
-   * Sets the next selection state with specified start and end nodes, offsets, push the update task to a queue
-   *
-   * @param {SelectionStateType['startNode']} startNode - The starting node of the selection range. It is a Node object representing the node where the selection range starts.
-   * @param {number} startOffset - The `startNode` where the selection range should start. It indicates the position within the `startNode` where the selection should begin.
-   * @param {SelectionStateType['endNode']} [endNode] - The ending node of the selection range. If a value is provided for `endNode`, it will be used as the ending node of the selection range.
-   * @param {number} [endOffset] - The ending offset within the `endNode` where the selection range should end.
-   * @param {boolean} [immediatelyRun] - Should the task run immediately. default is false
-   */
-  enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset, immediatelyRun = false) {
-    endNode = endNode || startNode;
-    endOffset = endOffset || endOffset === 0 ? endOffset : startOffset;
-    this.currentRange = this.currentRange.updateRTERange({ startNode, endNode, startOffset, endOffset });
-    void this.updateCaretPositionTaskQueue.enqueue({
-      /** Add task to the queue and run it until component did render */
-      run: async () => {
-        try {
-          await this.createUpdateSelectionRangeTask();
-        }
-        catch (e) {
-          LogUtility.error('Set range error.', e);
-        }
-      },
-    }, immediatelyRun);
-  }
-  /**
-   * Set selection with a new range
-   *
-   * @param {Range} range - The range to set
-   */
-  setSelectionRange(range) {
-    const selection = this.getSelection();
-    if (selection) {
-      selection.removeAllRanges();
-      selection.addRange(range);
-      this.saveSelection();
-    }
-  }
-  /**
-   * Save the current selection range detail
-   */
-  saveSelection() {
-    const selection = this.getSelection();
-    // The range is out of date if the queue is not empty, or the range is update by the composition text insert, so we should not update the RTERange
-    if (selection &&
-      selection.rangeCount > 0 &&
-      this.updateCaretPositionTaskQueue.queue.length === 0 &&
-      !this.insertCompositionTextController.isComposing()) {
-      const range = selection.getRangeAt(0);
-      const { startContainer: startNode, endContainer: endNode, startOffset, endOffset } = range;
-      this.currentRange = this.currentRange.updateRTERange({ startNode, endNode, startOffset, endOffset }, range);
-    }
-  }
-  /**
-   * Restore the selection to the current selected nodes
-   */
-  restoreSelection() {
-    if (this.selectionState) {
-      const { startNode, endNode, startOffset, endOffset } = this.selectionState.range;
-      if (startNode instanceof RTETextNode && startNode === endNode && startNode.text.length === 0) {
-        this.enqueueSelectionRangeFutureState(startNode, ZERO_WIDTH_SPACE.length);
-      }
-      else {
-        this.enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset);
-      }
-      this.selectionState = null;
-    }
-  }
-  /**
-   * Get the rich text content selected range
-   *
-   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
-   */
-  getSelection() {
-    const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
-    return ShadowSelectionPolyfill$1.getSelection(richTextContentRef.shadowRoot);
-  }
-  /**
-   * Get selected rich text
-   */
-  handleSelectionChange() {
-    if (this.disabled)
-      return;
-    const selection = this.getSelection();
-    if (!selection || selection.rangeCount === 0)
-      return;
-    this.clearSelectionMap();
-    this.saveSelection();
-    const range = selection.getRangeAt(0);
-    const commonAncestor = range.commonAncestorContainer;
-    const selectedNodes = [];
-    /**
-     * Rich text node filter
-     *
-     * @param {Node} node - Start node
-     */
-    const filterNode = (node) => {
-      if (!range.intersectsNode(node)) {
-        return;
-      }
-      if (node.nodeType === Node.TEXT_NODE) {
-        const currentNode = node.parentElement;
-        const nodeEntity = stateEntityRenderingRegistry.getEntityByDOM(currentNode);
-        if (nodeEntity instanceof RTENode) {
-          selectedNodes.push(nodeEntity);
-          return;
-        }
-      }
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        const entityElement = node.nodeName === 'VEGA-RICH-TEXT-IMAGE-EDITOR'
-          ? node.querySelector('img')
-          : node;
-        const nodeEntity = stateEntityRenderingRegistry.getEntityByDOM(entityElement);
-        if (nodeEntity instanceof RTENode) {
-          selectedNodes.push(nodeEntity);
-          return;
-        }
-      }
-      node.childNodes.forEach(filterNode);
-    };
-    filterNode(commonAncestor);
-    selectedNodes.forEach((node) => {
-      if (this.selectionMap.has(node.parentBlock)) {
-        this.selectionMap.get(node.parentBlock).push(node);
-      }
-      else {
-        this.selectionMap.set(node.parentBlock, [node]);
-      }
-    });
-    this.getSelectedNodes().forEach((node) => node.apply(new SelectionChangeAction(range)));
-  }
-  /**
-   * Clear the selection map
-   */
-  clearSelectionMap() {
-    this.getSelectedNodes().forEach((node) => {
-      node.annotationMap.delete(InternalAnnotationTypeEnum.SELECTION_RANGE);
-    });
-    this.selectionMap = new Map();
-  }
-  /**
-   * Check if the selection range change is acceptable
-   *
-   * @returns {boolean} - Returns a boolean value.
-   */
-  isAcceptableSelectionRangeChange() {
-    return true;
-  }
-  /**
-   * Register the selection range change observer
-   */
-  registerSelectionRangeChangeObserver() {
-    this.selectionRangeChangeObserver = new Observer(this.isAcceptableSelectionRangeChange.bind(this), (payload) => {
-      this.pendingRestoreSelectionNodes.push(payload.node);
-    });
-    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
-  }
-  /**
-   * Prepare the selection state to restore
-   */
-  prepareRestoreSelectionState() {
-    if (this.pendingRestoreSelectionNodes.length > 0) {
-      const startNode = this.pendingRestoreSelectionNodes[0];
-      const endNode = this.pendingRestoreSelectionNodes.length > 1
-        ? this.pendingRestoreSelectionNodes[this.pendingRestoreSelectionNodes.length - 1]
-        : startNode;
-      const { startOffset, endOffset, endContainer, startContainer } = this.currentRange;
-      const nodesInCurrentRange = stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
-        stateEntityRenderingRegistry.getDOMByEntity(endNode) === endContainer.parentElement;
-      if (nodesInCurrentRange) {
-        this.currentRange = this.currentRange.updateRTERange({
-          startNode,
-          endNode,
-          startOffset,
-          endOffset,
-        });
-        this.selectionState = new RTESelectionState(this.currentRange);
-      }
-      else {
-        this.currentRange = this.currentRange.updateRTERange({
-          startNode,
-          endNode,
-          startOffset: 0,
-          endOffset: endNode.text.length,
-        });
-        this.selectionState = new RTESelectionState(this.currentRange);
-      }
-      this.pendingRestoreSelectionNodes = [];
-    }
-  }
-}
-SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME = 50;
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$f([
-  MapToComponentField({ writable: true })
-], SelectionController.prototype, "selectionMap", void 0);
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "host", void 0);
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "value", void 0);
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "disabled", void 0);
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "valueController", void 0);
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "insertCompositionTextController", void 0);
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "historyController", void 0);
-__decorate$f([
-  MapToComponentMethod('connectedCallback')
-], SelectionController.prototype, "connectedCallback", null);
-__decorate$f([
-  MapToComponentMethod('disconnectedCallback')
-], SelectionController.prototype, "disconnectedCallback", null);
-__decorate$f([
-  MapToComponentMethod('componentDidLoad')
-], SelectionController.prototype, "componentDidLoad", null);
-__decorate$f([
-  MapToComponentMethod('watchValueUpdate')
-], SelectionController.prototype, "watchValueUpdate", null);
-__decorate$f([
-  MapToComponentMethod('componentDidUpdate')
-], SelectionController.prototype, "updateCaretPosition", null);
-
-/**
- * Represents the state of the RTE
- */
-class RTEEditorState {
-  constructor(content, selection) {
-    this.content = content.clone(true);
-    this.selection = selection.clone();
-    this.refreshSelectionNodes();
-  }
-  /**
-   * Clones the editor state, updating the content and selection based on the provided content.
-   *
-   * @returns {RTEEditorState} A new instance of RTEEditorState with the updated content and selection.
-   */
-  clone() {
-    return new RTEEditorState(this.content, this.selection);
-  }
-  /**
-   * Refreshes the selection nodes in the editor state.
-   */
-  refreshSelectionNodes() {
-    const { startNode: oldStartNode, endNode: oldEndNode, startOffset, endOffset, } = this.selection.range;
-    if (oldStartNode && oldEndNode) {
-      const startNode = this.content.findNodeById(oldStartNode.id);
-      const endNode = this.content.findNodeById(oldEndNode.id);
-      if (startNode && endNode) {
-        this.selection.range.updateRTERange({
-          startNode,
-          endNode,
-          startOffset,
-          endOffset,
-        });
-      }
-    }
-  }
-}
-
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/**
- * The value controller is responsible for updating the value of the rich text editor.
- */
-class ValueController extends VegaSlimmer {
-  /**
-   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
-   */
-  connectedCallback() {
-    const flushChangesWithDebounce = debounce(() => {
-      void this.valueController.flushChanges(this.value);
-    }, ValueController.VALUE_CHANGE_DEBOUNCE_TIME, this);
-    this.flushChangeObserver = new Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
-    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
-  }
-  /**
-   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
-   */
-  disconnectedCallback() {
-    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
-  }
-  /**
-   * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
-   */
-  componentWillLoad() {
-    if (this.value && !(this.value instanceof VegaRTEContent)) {
-      this.value = VegaRTEContent.fromJSON(this.value);
-    }
-  }
-  /**
-   * Watches the value of the editor and updates the internal value.
-   */
-  watchValueUpdate() {
-    if (this.value && !(this.value instanceof VegaRTEContent)) {
-      this.value = VegaRTEContent.fromJSON(this.value);
-    }
-    else if (!this.value || this.value.blocks.length === 0) {
-      this.value = VegaRTEContent.createEmptyContent();
-    }
-    else {
-      this.changeEventEmitter.emit(this.value);
-      ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
-        host: this.host,
-        detail: this.value,
-      });
-    }
-  }
-  /**
-   * Updates the value of the editor and restore the selection.
-   *
-   * @param {VegaRTEContent} newValue The new value to set.
-   * @param {boolean} recordHistory - Whether to record the change in history.
-   */
-  async flushChanges(newValue, recordHistory = true) {
-    if (recordHistory) {
-      this.historyController.registerHistory(new RTEEditorState(newValue, new RTESelectionState(this.selectionController.getCurrentRange())));
-    }
-    this.value = newValue.clone();
-    await waitForComponentDidRender(this.host);
-  }
-  /**
-   * Determines whether the observer should accept changes.
-   *
-   * @returns {boolean} Always returns true in the current implementation.
-   */
-  isAcceptableFlushChange() {
-    return true;
-  }
-}
-ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
-__decorate$e([
-  MapToComponentField()
-], ValueController.prototype, "host", void 0);
-__decorate$e([
-  MapToComponentField({ writable: true })
-], ValueController.prototype, "value", void 0);
-__decorate$e([
-  MapToComponentField()
-], ValueController.prototype, "changeEventEmitter", void 0);
-__decorate$e([
-  MapToComponentField()
-], ValueController.prototype, "valueController", void 0);
-__decorate$e([
-  MapToComponentField()
-], ValueController.prototype, "historyController", void 0);
-__decorate$e([
-  MapToComponentField()
-], ValueController.prototype, "selectionController", void 0);
-__decorate$e([
-  MapToComponentMethod('connectedCallback')
-], ValueController.prototype, "connectedCallback", null);
-__decorate$e([
-  MapToComponentMethod('disconnectedCallback')
-], ValueController.prototype, "disconnectedCallback", null);
-__decorate$e([
-  MapToComponentMethod('componentWillLoad')
-], ValueController.prototype, "componentWillLoad", null);
-__decorate$e([
-  MapToComponentMethod('watchValueUpdate')
-], ValueController.prototype, "watchValueUpdate", null);
-
-/**
- * The rich text content controller
- */
-class RichTextContentController {
-  constructor(editor) {
-    this.editor = editor;
-  }
-  /**
-   * Sync rich text content editable with disabled property
-   *
-   */
-  syncRichTextContentEditable() {
-    this.editor.richTextContentEditable = !this.editor.disabled;
-  }
-}
-
-const ROOT_CONTAINER_CLASS_NAME = 'rich-text-content';
-/** This code snippet is defining an abstract class named `BaseHandler` with an abstract method `execute`. */
-class BaseHandler {
-  /**
-   * The function `execute` initializes the current state and selection, and then handles an event if provided.
-   *
-   * @param {VegaRTEContent} currentState - The current state of the VegaRTE content.
-   * @param {SelectionController} selectionController - Manages the selection of items in the user interface.
-   * @param {HTMLElement} richTextEditor - The current rich text editor component
-   * @param {InputEvent} [event] - It is used to pass an input event to the method for handling.
-   */
-  execute(currentState, selectionController, richTextEditor, event) {
-    this.initCurrentStateAndSelection(currentState, selectionController);
-    this.setCurrentRichTextEditor(richTextEditor);
-    this.handleEvent(event);
-  }
-  /**
-   * The function `isRootContainer` checks if an HTML element is a root container with a class of 'rich-text-content'.
-   *
-   * @param {HTMLElement} element - HTMLElement
-   * @returns {boolean} The boolean value
-   */
-  isRootContainer(element) {
-    return (element &&
-      element.nodeType === Node.ELEMENT_NODE &&
-      element.classList.contains(ROOT_CONTAINER_CLASS_NAME));
-  }
-  /**
-   * Checks if a given HTML element represents an empty paragraph containing only a line break element.
-   *
-   * @param {HTMLElement} node - An HTMLElement node that represents a paragraph element in the HTML document.
-   * @returns {boolean} boolean result
-   */
-  isEmptyParagraph(node) {
-    return node && node.childNodes && node.childNodes.length === 0;
-  }
-  /**
-   * Removes selected nodes within a range in a rich text editor content.
-   * The method is only used for different nodes are selected
-   *
-   * @param {boolean} [mergeNode] Merge start node and end node or not, default value is false.
-   * @returns {RTENode} The range start node, usually the start node is the first item of selectedNodes, if the selectedNodes is all removed, the start node will be a new text node.
-   */
-  removeSelectionRange(mergeNode = false) {
-    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.richTextEditorRef, VegaInternalRichTextEditDeleteSelectedNodes), { host: this.richTextEditorRef, detail: mergeNode });
-    const range = this.selectionController.getCurrentRange();
-    const selectedNodes = this.selectionController.getSelectedNodes();
-    return range.startNode || selectedNodes[0];
-  }
-  /**
-   * Creates a new paragraph with an empty text node and returns it.
-   *
-   * @returns {RTETextBlock} An empty paragraph with a unique identifier and a text node appended to it.
-   */
-  createEmptyParagraph() {
-    const paragraph = new RTETextBlock(generateUUID(), 'paragraph');
-    const textNode = new RTETextNode(`${paragraph.id}1`, '', paragraph);
-    paragraph.apply(new AppendChildNodesAction([textNode]));
-    return paragraph;
-  }
-  /**
-   * The function initializes the current state and selection controller in TypeScript.
-   *
-   * @param {VegaRTEContent} currentState - The current state of a Vega runtime environment content.
-   * @param {SelectionController} selectionController - It is used to manage the selection of content within the VegaRTE editor.
-   */
-  initCurrentStateAndSelection(currentState, selectionController) {
-    this.currentState = currentState;
-    this.selectionController = selectionController;
-  }
-  /**
-   * Queries the rich text editor element from the input event target.
-   *
-   * @param {HTMLElement} richTextEditor - The current rich text editor component
-   */
-  setCurrentRichTextEditor(richTextEditor) {
-    this.richTextEditorRef = richTextEditor;
-  }
-}
-
-/**
- * Insert a new node before a existing node
- *
- * @example currentNode.parentBlock.apply(new InsertNodesBeforeAction(currentNode, newNode, ...))
+ * Insert a new node before a existing node
+ *
+ * @example currentNode.parentBlock.apply(new InsertNodesBeforeAction(currentNode, newNode, ...))
  */
 class InsertNodesBeforeAction extends ModifyContentAction {
   constructor(referNode, ...nodesToBeInserted) {
@@ -2596,11 +1905,13 @@ class InsertParagraphHandler extends BaseHandler {
    */
   handleEvent() {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
-    if (selectedBlocks.length < 2) {
-      this.breakSingleBlock();
-    }
-    else {
-      this.breakMultipleBlocks();
+    if (selectedBlocks.length) {
+      if (selectedBlocks.length < 2) {
+        this.breakSingleBlock();
+      }
+      else {
+        this.breakMultipleBlocks();
+      }
     }
   }
   /**
@@ -2714,11 +2025,13 @@ class InsertLineBreakHandler extends BaseHandler {
     if (this.isRootContainer(range.startContainer)) {
       this.breakNewBlock();
     }
-    if (selectedBlocks.length < 2) {
-      this.breakSingleBlock();
-    }
-    else {
-      this.breakMultipleBlocks();
+    if (selectedBlocks.length) {
+      if (selectedBlocks.length < 2) {
+        this.breakSingleBlock();
+      }
+      else {
+        this.breakMultipleBlocks();
+      }
     }
   }
   /**
@@ -3622,12 +2935,117 @@ class OlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
    * @returns {boolean} - boolean.
    */
   shouldProceedToElementChildren() {
-    return true;
+    return true;
+  }
+}
+
+/** Transform img in span or other inline element to image block DTO */
+class SpanImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element.nodeType === Node.ELEMENT_NODE &&
+      element.textContent === '' &&
+      element.querySelector('img')
+      ? 1
+      : 0;
+  }
+  /**
+   * Parse to a image block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - Image block.
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0].querySelector('img');
+    return RTEImageBlock.from({
+      id: generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: generateUUID(),
+          type: 'image',
+          url: element.src,
+          annotations: {
+            size: 'md',
+            alt: element.alt,
+          },
+        },
+      ],
+      annotations: this.generateBlockAnnotations(element),
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+}
+
+/** Transform child element of UL element which are not LI element to list item block DTO */
+class ULNotLiChildToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  /**
+   * Can be handle.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @param {number} currentIndex - Current element index.
+   * @returns {number} - can be handled element count.
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    const parent = element.parentElement;
+    return element.nodeName !== 'LI' && parent && ['UL', 'OL'].includes(parent.nodeName) ? 1 : 0;
+  }
+  /**
+   * Parse to a list item block.
+   *
+   * @param {HTMLElement[]} elementsArray - Current elements.
+   * @returns {Nullable<RTEContentBlock>} - List item block.
+   */
+  handle(elementsArray) {
+    const nodes = this.generateChildNodes(elementsArray);
+    if (nodes.length === 0)
+      return null;
+    return RTEListItemBlock.from({
+      id: generateUUID(),
+      type: 'list-item',
+      nodes: nodes,
+      annotations: {},
+    });
+  }
+  /* istanbul ignore next */
+  /**
+   * Append child blocks.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * Should continue process to child elements.
+   *
+   * @returns {boolean} - boolean.
+   */
+  shouldProceedToElementChildren() {
+    return false;
   }
 }
 
-/** Transform img in span or other inline element to image block DTO */
-class SpanImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+/** Transform other editor code element which has attribute data-language to RTE code block DTO */
+class JiraCodeToRTECodeBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
    * Can be handle.
    *
@@ -3636,37 +3054,31 @@ class SpanImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
    * @returns {number} - can be handled element count.
    */
   canHandle(elementsArray, currentIndex) {
-    const element = elementsArray[currentIndex];
-    return element.nodeType === Node.ELEMENT_NODE &&
-      element.textContent === '' &&
-      element.querySelector('img')
+    return (elementsArray[currentIndex].tagName === 'PRE' ||
+      elementsArray[currentIndex].tagName === 'CODE') &&
+      elementsArray[currentIndex].hasAttribute('data-language')
       ? 1
       : 0;
   }
   /**
-   * Parse to a image block.
+   * Parse to a code block.
    *
    * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - Image block.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
    */
   handle(elementsArray) {
-    const element = elementsArray[0].querySelector('img');
-    return RTEImageBlock.from({
-      id: generateUUID(),
-      type: 'image',
-      nodes: [
-        {
-          id: generateUUID(),
-          type: 'image',
-          url: element.src,
-          annotations: {
-            size: 'md',
-            alt: element.alt,
-          },
-        },
-      ],
-      annotations: this.generateBlockAnnotations(element),
-    });
+    const codeRef = elementsArray[0];
+    if (codeRef) {
+      const content = codeRef.textContent;
+      const language = codeRef.dataset
+        .language;
+      return RTECodeBlock.from({
+        id: generateUUID(),
+        type: 'code-block',
+        content,
+        language,
+      });
+    }
   }
   /* istanbul ignore next */
   /**
@@ -3684,36 +3096,48 @@ class SpanImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   }
 }
 
-/** Transform child element of UL element which are not LI element to list item block DTO */
-class ULNotLiChildToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+/** Transform vega-code-block element to code block DTO */
+class VegaCodeBlockToRTECodeBlockStrategy extends JiraCodeToRTECodeBlockStrategy {
   /**
    * Can be handle.
    *
+   * TODO: Update the browser clipboard data to fix the issue with nested vega-code-block elements.
+   * In safari the html snippet will be like: <vega-code-block><p><span>paragraph</span></p><vega-code-block></vega-code-block></vega-code-block>
+   * The vega-code-block nested inside the vega-code-block, so we need to check the child element.
+   *
    * @param {HTMLElement[]} elementsArray - Current elements.
    * @param {number} currentIndex - Current element index.
    * @returns {number} - can be handled element count.
    */
   canHandle(elementsArray, currentIndex) {
-    const element = elementsArray[currentIndex];
-    const parent = element.parentElement;
-    return element.nodeName !== 'LI' && parent && ['UL', 'OL'].includes(parent.nodeName) ? 1 : 0;
+    return (elementsArray[currentIndex].tagName === 'VEGA-CODE-BLOCK' &&
+      !!elementsArray[currentIndex].querySelector('vega-code-block') === false) ||
+      this.isCodeBlockContainer(elementsArray[currentIndex])
+      ? 1
+      : 0;
   }
   /**
-   * Parse to a list item block.
+   * Parse to a code block.
    *
    * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - List item block.
+   * @returns {Nullable<RTECodeBlock>} - Code block.
    */
   handle(elementsArray) {
-    const nodes = this.generateChildNodes(elementsArray);
-    if (nodes.length === 0)
-      return null;
-    return RTEListItemBlock.from({
-      id: generateUUID(),
-      type: 'list-item',
-      nodes: nodes,
-      annotations: {},
-    });
+    const codeBlockElement = this.isCodeBlockContainer(elementsArray[0])
+      ? elementsArray[0].querySelector('vega-code-block')
+      : elementsArray[0];
+    const code = codeBlockElement.querySelector('code');
+    if (code) {
+      return super.handle([code]); // Call the parent method to handle the code element
+    }
+    else if (codeBlockElement.hasAttribute('data-content')) {
+      // The code element in shadow dom could be empty in firefox.
+      // eslint-disable-next-line no-restricted-globals
+      const code = document.createElement('code');
+      code.textContent = codeBlockElement.dataset.content;
+      code.dataset.language = codeBlockElement.dataset.language;
+      return super.handle([code]); // Call the parent method to handle the code element
+    }
   }
   /* istanbul ignore next */
   /**
@@ -3729,6 +3153,17 @@ class ULNotLiChildToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbst
   shouldProceedToElementChildren() {
     return false;
   }
+  /**
+   * Checks if the given element is a code block container.
+   *
+   * @param {HTMLElement} element - The element to check.
+   * @returns {boolean} - Boolean result.
+   */
+  isCodeBlockContainer(element) {
+    return (element.tagName === 'PRE' &&
+      element.classList.contains('code-block-container') &&
+      element.querySelectorAll('vega-code-block').length === 1);
+  }
 }
 
 /** Element to DTO processor */
@@ -3739,6 +3174,8 @@ class ElementToDtoStrategyProcessor {
       new OlToRTEListBlockStrategy(),
       new ULNotLiChildToRTEListItemBlockStrategy(),
       new LiToRTEListItemBlockStrategy(),
+      new VegaCodeBlockToRTECodeBlockStrategy(),
+      new JiraCodeToRTECodeBlockStrategy(),
       new InlineBlockToRTETextBlockStrategy(),
       new ImgToRTEImageBlockStrategy(),
       new VegaImageToRTEImageBlockStrategy(),
@@ -3853,8 +3290,10 @@ class InsertPasteHandler extends BaseHandler {
     const cursorNode = this.removeSelectionRange();
     /* istanbul ignore next */
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parentBlock;
-    currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, ...blocks));
-    this.switchCaretPositionToNextElement(currentBlock);
+    if (currentBlock) {
+      currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, ...blocks));
+      this.switchCaretPositionToNextElement(currentBlock);
+    }
   }
   /**
    * Format and parse elements from user paste.
@@ -3863,7 +3302,12 @@ class InsertPasteHandler extends BaseHandler {
    * @returns {RTEContentBlock[]} - RTEContentBlock.
    */
   parsePastedElements(event) {
-    const pastedHTML = event.dataTransfer.getData('text/html');
+    let pastedHTML = event.dataTransfer.getData('text/html');
+    if (!pastedHTML) {
+      const pastedText = event.dataTransfer.getData('text/plain');
+      pastedHTML = this.parsePlainText(pastedText);
+    }
+    // eslint-disable-next-line no-restricted-globals
     const tempContainer = document.createElement('div');
     tempContainer.innerHTML = pastedHTML;
     return this.elementToDTOProcessor
@@ -3882,9 +3326,23 @@ class InsertPasteHandler extends BaseHandler {
       this.selectionController.enqueueSelectionRangeFutureState(newBlock['nodes'][0], 0);
     }
   }
+  /**
+   * Parses the content of a plain text and formats it into HTML.
+   *
+   * @param {string} content - The content of plain text.
+   * @returns {string} - The formatted HTML string.
+   */
+  parsePlainText(content) {
+    const lines = content.split('\n');
+    return lines
+      .map((line) => {
+      return `<span>${line}</span>`;
+    })
+      .join('<span>\n</span>');
+  }
 }
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3909,7 +3367,8 @@ class UserInputController extends VegaSlimmer {
       e.preventDefault();
       this.initValueIfEmpty();
       // The insertCompositionText type input event can not be prevented, so we process the current action by insertCompositionTextController.
-      if (inputType === 'insertCompositionText') {
+      // If the focus node is a non-editable element, we do not process the input event.
+      if (inputType === 'insertCompositionText' || this.isFocusNodeNonEditable()) {
         return;
       }
       this.insertCompositionTextController.removeObserver();
@@ -3937,7 +3396,7 @@ class UserInputController extends VegaSlimmer {
           break;
       }
       if (updateFlag) {
-        this.notifyComponentFlushValue();
+        void this.valueController.flushChanges(this.value);
       }
     };
   }
@@ -3972,12 +3431,6 @@ class UserInputController extends VegaSlimmer {
     }
     return this.editableElementRef;
   }
-  /**
-   * Notifies a change manager with the host and value details and logs the current value.
-   */
-  notifyComponentFlushValue() {
-    void this.valueController.flushChanges(this.value);
-  }
   /**
    * Prevents the default behavior of a drag event.
    *
@@ -3998,29 +3451,46 @@ class UserInputController extends VegaSlimmer {
       void this.valueController.flushChanges(VegaRTEContent.fromJSON(defaultParagraph));
     }
   }
+  /**
+   * The code block placeholder element is non-editable, so we need to check if the focus node is a code block placeholder element.
+   *
+   * @returns {boolean} - Returns true if the focus node is a code block placeholder element, otherwise false.
+   */
+  isFocusNodeNonEditable() {
+    const { startContainer, endContainer } = this.selectionController.getCurrentRange();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    if (startContainer && startContainer === endContainer && selectedNodes.length === 0) {
+      const focusElement = startContainer.nodeType === Node.ELEMENT_NODE
+        ? startContainer
+        : startContainer.parentElement;
+      return (focusElement &&
+        focusElement.classList.contains(RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME));
+    }
+    return false;
+  }
 }
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], UserInputController.prototype, "host", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], UserInputController.prototype, "value", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], UserInputController.prototype, "valueController", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], UserInputController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], UserInputController.prototype, "selectionController", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], UserInputController.prototype, "insertCompositionTextController", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentMethod('componentDidLoad')
 ], UserInputController.prototype, "addActionListener", null);
-__decorate$d([
+__decorate$e([
   MapToComponentMethod('disconnectedCallback')
 ], UserInputController.prototype, "removeActionListener", null);
 
@@ -4040,7 +3510,7 @@ class InsertImageToBlockAction extends ModifyContentAction {
   }
 }
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4129,26 +3599,26 @@ class InsertImageController extends VegaSlimmer {
     }
   }
 }
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], InsertImageController.prototype, "selectionController", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], InsertImageController.prototype, "value", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], InsertImageController.prototype, "valueController", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], InsertImageController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentMethod('componentDidLoad')
 ], InsertImageController.prototype, "registerObserver", null);
-__decorate$c([
+__decorate$d([
   MapToComponentMethod('disconnectedCallback')
 ], InsertImageController.prototype, "unRegisterObserver", null);
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4204,20 +3674,20 @@ class FocusController extends VegaSlimmer {
     this.selectionController.setSelectionRange(range);
   }
 }
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], FocusController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], FocusController.prototype, "selectionController", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], FocusController.prototype, "valueController", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], FocusController.prototype, "value", void 0);
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4257,14 +3727,14 @@ class TextNodeColorController extends VegaSlimmer {
     return true;
   }
 }
-__decorate$a([
+__decorate$b([
   MapToComponentMethod('connectedCallback')
 ], TextNodeColorController.prototype, "connectedCallback", null);
-__decorate$a([
+__decorate$b([
   MapToComponentMethod('disconnectedCallback')
 ], TextNodeColorController.prototype, "disconnectResizeObserver", null);
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4472,35 +3942,35 @@ class InsertCompositionTextController extends VegaSlimmer {
     this.editableElementRef.dispatchEvent(inputEvent);
   }
 }
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "selectionController", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "host", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "value", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "valueController", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "userInputController", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentMethod('componentDidLoad')
 ], InsertCompositionTextController.prototype, "addCompositionTextEventListener", null);
-__decorate$9([
+__decorate$a([
   MapToComponentMethod('disconnectedCallback')
 ], InsertCompositionTextController.prototype, "removeCompositionTextEventListener", null);
-__decorate$9([
+__decorate$a([
   MapToComponentMethod('componentDidRender')
 ], InsertCompositionTextController.prototype, "reConnectObserver", null);
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4558,7 +4028,10 @@ class DeleteSelectedNodesController extends VegaSlimmer {
     if (selectedNodes.length > 1) {
       // Remove all selected nodes except start node and end node(the end image node will be removed), the start node need to get the index of the block
       const shouldRemovedItems = selectedNodes.filter((item) => {
-        if (item.type !== 'IMAGE') {
+        if (item instanceof RTECodeBlockNode) {
+          return item !== startNode;
+        }
+        else if (item.type !== 'IMAGE') {
           return item !== startNode && item !== endNode;
         }
         else {
@@ -4572,7 +4045,8 @@ class DeleteSelectedNodesController extends VegaSlimmer {
     this.removeRangeStartAndEndSelectedText();
     /**
      * if the range start node is image and the item is selected, so we need remove the image item, the image block will be removed if the item is the only item.
-     * but before remove the image block, we need insert a paragraph to make sure the start block and start node could be get correct before insert text or break paragraph action
+     * but before remove the image block, we need insert a paragraph to make sure the start block and start node could be get correct before insert text or break paragraph action.
+     * the code block node should do the same logic.
      */
     if (startNode instanceof RTEImageNode &&
       startOffset !== 1 &&
@@ -4590,6 +4064,12 @@ class DeleteSelectedNodesController extends VegaSlimmer {
         return startNode.parentBlock.nodes[0];
       }
     }
+    else if (startNode instanceof RTECodeBlockNode) {
+      const paragraph = this.createEmptyParagraph();
+      startNode.parentBlock.parent.apply(new InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
+      startNode.parentBlock.apply(new RemoveChildAction(startNode));
+      return paragraph.nodes[0];
+    }
     return startNode;
   }
   /**
@@ -4639,7 +4119,9 @@ class DeleteSelectedNodesController extends VegaSlimmer {
               endRTENode.parentBlock.apply(new RemoveChildAction(endRTENode.parentBlock.nodes[0]));
             }
           }
-          if (startRTENode.parentBlock !== endRTENode.parentBlock) {
+          if (startRTENode instanceof RTETextNode &&
+            endRTENode instanceof RTETextNode &&
+            startRTENode.parentBlock !== endRTENode.parentBlock) {
             startRTENode.parentBlock.apply(new AppendChildNodesAction(endBlock.nodes));
             endBlock.nodes = [];
           }
@@ -4660,26 +4142,28 @@ class DeleteSelectedNodesController extends VegaSlimmer {
   shouldMergeTextNode(nodeA, nodeB) {
     const { annotations: annotationsA } = nodeA.toJSON();
     const { annotations: annotationsB } = nodeB.toJSON();
-    return JSON.stringify(annotationsA) === JSON.stringify(annotationsB);
+    return (nodeA instanceof RTETextNode &&
+      nodeB instanceof RTETextNode &&
+      JSON.stringify(annotationsA) === JSON.stringify(annotationsB));
   }
 }
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "host", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "selectionController", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "value", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentMethod('connectedCallback')
 ], DeleteSelectedNodesController.prototype, "addDeleteObserver", null);
-__decorate$8([
+__decorate$9([
   MapToComponentMethod('disconnectedCallback')
 ], DeleteSelectedNodesController.prototype, "removeDeleteObserver", null);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4793,25 +4277,166 @@ class HistoryController extends KeyboardManagerSlimmer {
     ];
   }
 }
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], HistoryController.prototype, "host", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], HistoryController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], HistoryController.prototype, "valueController", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], HistoryController.prototype, "value", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], HistoryController.prototype, "selectionController", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentMethod('componentDidLoad')
 ], HistoryController.prototype, "registerInitState", null);
 
+const rectangleCode = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill='currentColor' d="M320.1 175L384.1 239C394.3 248.4 394.3 263.6 384.1 272.1L320.1 336.1C311.6 346.3 296.4 346.3 287 336.1C277.7 327.6 277.7 312.4 287 303L334.1 256L287 208.1C277.7 199.6 277.7 184.4 287 175C296.4 165.7 311.6 165.7 320.1 175V175zM177.9 256L224.1 303C234.3 312.4 234.3 327.6 224.1 336.1C215.6 346.3 200.4 346.3 191 336.1L127 272.1C117.7 263.6 117.7 248.4 127 239L191 175C200.4 165.7 215.6 165.7 224.1 175C234.3 184.4 234.3 199.6 224.1 208.1L177.9 256zM448 32C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H448zM448 80H64C55.16 80 48 87.16 48 96V416C48 424.8 55.16 432 64 432H448C456.8 432 464 424.8 464 416V96C464 87.16 456.8 80 448 80z"/></svg>`,
+};
+
+/**
+ * Transform the selected blocks to a code block.
+ *
+ * @example firstBlock.parent.apply(new TransformToCodeBlockAction(selectedBlocks))
+ */
+class TransformToCodeBlockAction extends ModifyContentAction {
+  constructor(selectedBlocks) {
+    super();
+    this.type = ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK;
+    this.selectedBlocks = selectedBlocks;
+  }
+}
+
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The code block toolbar button slimmer.
+ */
+class CodeBlockToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'rectangle-code',
+      tooltip: { text: 'Code Block' },
+    });
+  }
+  /**
+   * The selected blocks should convert to a code block.
+   */
+  onClick() {
+    const selected = this.isSelected();
+    if (!selected) {
+      const selectedBlocks = this.selectionController.getSelectedBlocks();
+      const parentBlock = selectedBlocks[0].parent;
+      const transformToCodeBlockAction = new TransformToCodeBlockAction(selectedBlocks);
+      parentBlock.apply(transformToCodeBlockAction);
+      void this.valueController.flushChanges(this.value);
+      this.selectionController.enqueueSelectionRangeFutureState(transformToCodeBlockAction.newCodeBlock.nodes[0], 0);
+    }
+  }
+  /**
+   * The button will be selected if the selected blocks all code block.
+   *
+   * @returns {boolean} - The code block should selected or not.
+   */
+  isSelected() {
+    const selectBlocks = this.selectionController.getSelectedBlocks();
+    if (selectBlocks.length && selectBlocks.every((block) => block.type === 'code-block')) {
+      return true;
+    }
+    return false;
+  }
+  isDisabled() {
+    const selectBlocks = this.selectionController.getSelectedBlocks();
+    return (super.isDisabled() ||
+      selectBlocks.some((block) => block.type === 'image' || block.type === 'list-item'));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'rectangle-code': rectangleCode });
+})();
+__decorate$7([
+  MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$7([
+  MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "valueController", void 0);
+__decorate$7([
+  MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "value", void 0);
+
+/**
+ * The rich text internal code block selection controller.
+ */
+class InternalCodeBlockSelectionController extends AutoRunWhenReRenderTaskQueueSlimmer {
+  constructor() {
+    super(1);
+    this.focusNodeOffset = 0;
+    /**
+     * The method invoke after the component re-render.
+     */
+    this.doTask = async () => {
+      await this.focusTheCodeBlock(this.shouldFocusNode);
+    };
+  }
+  /**
+   * Update the internal code block selection.
+   *
+   * @param {RTECodeBlockNode} startNode - The internal code block node DTO.
+   * @param {number} startOffset - The content offset.
+   * @param {boolean} immediatelyRun - Whether to invoke the method immediately.
+   */
+  enqueueSelectionRangeFutureState(startNode, startOffset, immediatelyRun) {
+    this.shouldFocusNode = startNode;
+    this.focusNodeOffset = startOffset;
+    super.enqueueTheTaskIntoQueue(immediatelyRun);
+  }
+  /**
+   * Check the code block is actually selected or not. Because the Code block is a shadow dom, so can't detect the content selected state.
+   * We add two placeholder spans at the begin and end position, we could check the placeholder spans selected state to make sure the code block is selected or not.
+   *
+   *
+   * @example
+   * <div>
+   * <span></span>
+   * <vega-code-block></vega-code-block>
+   * <span><span>
+   * </div>
+   * @param {RTECodeBlock} codeBlock - The code block DTO.
+   * @param {Range} range - The range instance.
+   * @returns {boolean} - The boolean result.
+   */
+  isCodeBlockSelected(codeBlock, range) {
+    const codeBlockNode = codeBlock.nodes[0];
+    const entityDom = stateEntityRenderingRegistry.getDOMByEntity(codeBlockNode);
+    return (codeBlock.isSelected() ||
+      (entityDom &&
+        range.intersectsNode(entityDom.nextSibling) &&
+        range.intersectsNode(entityDom.previousSibling)));
+  }
+  /**
+   * Focus the code block component.
+   *
+   * @param {RTECodeBlockNode} node - The code block node DTO.
+   */
+  async focusTheCodeBlock(node) {
+    await Promise.resolve();
+    const entityDom = stateEntityRenderingRegistry.getDOMByEntity(node);
+    if (entityDom) {
+      void entityDom.doFocus();
+    }
+  }
+}
+
 const vegaRichTextEditorCss = ":host{display:block}:host vega-field-label{margin-bottom:8px}:host vega-text{margin-bottom:16px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container{display:flex;box-sizing:content-box;position:relative;box-sizing:content-box;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));margin-top:12px;overflow:auto;resize:vertical;padding-top:12px;padding-right:16px;padding-bottom:32px;padding-left:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-editor-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-editor-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-editor-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .rich-text-editor-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .rich-text-editor-container:focus-within{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .rich-text-editor-container.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));cursor:not-allowed}:host .rich-text-editor-container.disabled:hover,:host .rich-text-editor-container.disabled:focus-within{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host .rich-text-editor-container.disabled:focus-within{outline:none}:host .rich-text-editor-container.disabled vega-rich-text-content{pointer-events:none;opacity:0.35}:host .rich-text-editor-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .rich-text-editor-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .rich-text-editor-container.error:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}:host .rich-text-editor-container .text-editor-counter{position:absolute;bottom:8px;right:8px;display:flex;padding-left:4px;padding-right:4px;padding-top:2px;padding-bottom:2px;border-radius:4px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));background-color:rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container .text-editor-counter.counter-exceed-max-length{background-color:rgba(var(--v-bg-textarea-counter-exceed-max-length, 214, 46, 81))}.toolbar-btn-group{display:flex;justify-content:center;align-items:center}.toolbar-btn-group>*:not(:first-child):not(:last-child) ::part(rich-text-editor-toolbar-button){border-radius:0px}.toolbar-btn-group>*:first-child:not(:last-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:4px;border-bottom-left-radius:4px;border-top-right-radius:0px;border-bottom-right-radius:0px}.toolbar-btn-group>*:last-child:not(:first-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:4px;border-bottom-right-radius:4px}.toolbar-btn-group>*:not(:first-child) ::part(rich-text-editor-toolbar-button){margin-left:-1px}.toolbar-btn-group .toolbar-btn-color-preview-box{display:flex;border:1px solid rgba(var(--v-border-chip, 205, 209, 211, 1));box-sizing:border-box;border-radius:4px;width:16px;height:16px;justify-content:center;align-items:center;margin-left:6px}.toolbar-btn-group .toolbar-btn-color-preview-box.disabled{opacity:0.35}.toolbar-btn-group .toolbar-btn-link-wrapper{position:relative}.toolbar-btn-group .toolbar-btn-link-wrapper vega-rich-text-link-editor{position:absolute;bottom:0;left:0;right:0}.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;margin-top:12px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-hidden{display:none}";
 
 var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -4868,6 +4493,7 @@ const VegaRichTextEditor = class {
     this.lessIndentToolbarButtonSlimmer = new LessIndentToolbarButtonSlimmer();
     this.bulletsNumbersToolbarButtonSlimmer = new BulletsNumbersToolbarButtonSlimmer();
     this.horizontalAlignmentToolbarButtonSlimmer = new HorizontalAlignmentToolbarButtonSlimmer();
+    this.codeBlockToolbarButtonSlimmer = new CodeBlockToolbarButtonSlimmer();
     this.placeholderNotifySlimmer = createSubStateNotifySlimmer(VegaRichTextEditor, 'placeholder', 'watchPlaceholder');
     this.disabledNotifySlimmer = createSubStateNotifySlimmer(VegaRichTextEditor, 'richTextContentEditable', 'watchRichTextContentEditable');
     this.richTextContentController = new RichTextContentController(this);
@@ -4879,6 +4505,7 @@ const VegaRichTextEditor = class {
     this.textNodeColorController = new TextNodeColorController();
     this.deleteSelectedNodesController = new DeleteSelectedNodesController();
     this.historyController = new HistoryController();
+    this.internalCodeBlockSelectionController = new InternalCodeBlockSelectionController();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
@@ -5073,6 +4700,9 @@ __decorate$6([
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "codeBlockToolbarButtonSlimmer", void 0);
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "placeholderNotifySlimmer", void 0);
@@ -5106,6 +4736,9 @@ __decorate$6([
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "historyController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "internalCodeBlockSelectionController", void 0);
 VegaRichTextEditor.style = vegaRichTextEditorCss;
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {