@globalpayments/vega 2.49.1 → 2.51.0

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

@@ -2,44 +2,45 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-09acd3c9.js');
+const index = require('./index-7700600c.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-dcb32c24.js');
-const component = require('./component-73a88c4e.js');
+const component = require('./component-1e352960.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-d5826bff.js');
-const vegaInternalEventId = require('./vega-internal-event-id-bfea9b93.js');
-const imageAnnotationAction = require('./image-annotation-action-9c2b9c8e.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-769dd00f.js');
+const vegaInternalEventId = require('./vega-internal-event-id-6cdc95fe.js');
+const imageAnnotationAction = require('./image-annotation-action-617bbb13.js');
 const internalIconManager = require('./internal-icon-manager-00f49470.js');
-const contentState = require('./content-state-6a48bcb5.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-a7a3b196.js');
+const codeBlock = require('./code-block-2d014e17.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5aa4cc83.js');
 const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-a3d17afb.js');
-const index$1 = require('./index-c4dec3aa.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-4b0af5bc.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-8247249c.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-7f437b19.js');
-const timer = require('./timer-5f33058b.js');
-const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
-const observer = require('./observer-f49483e8.js');
-const ui = require('./ui-13b42af0.js');
+const index$1 = require('./index-ebb1bb17.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-01c01946.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-36036ef7.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-f68fbf29.js');
+const contentState = require('./content-state-6a5da7ec.js');
+const selectionController = require('./selection-controller-1d7c0999.js');
 const staticSubjectTitle = require('./static-subject-title-7e7d791a.js');
+const observer = require('./observer-f49483e8.js');
+const timer = require('./timer-5f33058b.js');
 const darkModeStateControllerSlimmer = require('./dark-mode-state-controller-slimmer-add5d8a8.js');
 const typeGuard = require('./type-guard-4ba85fdc.js');
-const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-5faded94.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-cc193ee1.js');
-const translationSlimmer = require('./translation-slimmer-d1512c6d.js');
-const darkModeStyleController = require('./dark-mode-style-controller-4adb7fb2.js');
-const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-900cf2f5.js');
+const ui = require('./ui-6c069604.js');
+const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-e9c7c379.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-29020cc8.js');
+const translationSlimmer = require('./translation-slimmer-127a0f83.js');
+const darkModeStyleController = require('./dark-mode-style-controller-f9a32d68.js');
+const keyboardManagerSlimmer = require('./keyboard-manager-slimmer-eb364bee.js');
 const chevronDown = require('./chevron-down-9847bf78.js');
 const trashCan = require('./trash-can-46a5e19a.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
 require('./icon-manager-9a47399c.js');
 require('./dynamic-slimmer-f31fdfd7.js');
-require('./wait-for-vega-handler-0a0738ac.js');
+require('./wait-for-vega-handler-4491efc9.js');
 require('./string-21427167.js');
-require('./translation-212b1875.js');
-require('./page-resize-observer-slimmer-44e08878.js');
+require('./translation-e5003a00.js');
+require('./page-resize-observer-slimmer-efa79728.js');
 require('./ui-32e69595.js');
 require('./breakpoints-ebde4837.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
@@ -47,15 +48,16 @@ require('./mutation-observer-slimmer-895b3d3e.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./array-249289f2.js');
 require('./number-4816603d.js');
-require('./sub-state-observer-slimmer-e90362cd.js');
-require('./internal-vega-event-manager-c9948b59.js');
+require('./sub-state-observer-slimmer-e06cdf7e.js');
+require('./internal-vega-event-manager-e98944ac.js');
+require('./synchronize-task-queue-1ee80e94.js');
 require('./regex-c1f70fd4.js');
 require('./typography-4560e7f1.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-5e58aae4.js');
 require('./index-8b247c17.js');
 require('./_commonjsHelpers-537d719a.js');
-require('./keyboard-manager-2ccf4b16.js');
+require('./keyboard-manager-8c74eeb9.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;
@@ -217,6 +219,8 @@ class ToolbarRenderer extends globalSlimmerRegistry.VegaSlimmer {
           return this.bulletsNumbersToolbarButtonSlimmer;
         case 'horizontalAlignment':
           return this.horizontalAlignmentToolbarButtonSlimmer;
+        case 'codeBlock':
+          return this.codeBlockToolbarButtonSlimmer;
       }
     };
   }
@@ -273,6 +277,9 @@ __decorate$z([
 __decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);
+__decorate$z([
+  globalSlimmerRegistry.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>`,
@@ -297,23 +304,24 @@ class BoldToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
     const bold = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof contentState.RTETextNode)
-      .forEach((node) => node.apply(new contentState.BoldAnnotationAction(!bold)));
+      .filter((node) => node instanceof codeBlock.RTETextNode)
+      .forEach((node) => node.apply(new codeBlock.BoldAnnotationAction(!bold)));
   }
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof contentState.RTETextNode);
+      .filter((node) => node instanceof codeBlock.RTETextNode);
     return (selectedNodes.length > 0 &&
-      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.BOLD)) === null || _a === void 0 ? void 0 : _a.bold; }));
+      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.BOLD)) === null || _a === void 0 ? void 0 : _a.bold; }));
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.IMAGE);
+        return node instanceof codeBlock.RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.IMAGE);
       }));
   }
 }
@@ -331,7 +339,7 @@ const italic = {
 /**
  * Action to toggle the italic annotation
  */
-class ItalicAnnotationAction extends contentState.TextSplittableAction {
+class ItalicAnnotationAction extends codeBlock.TextSplittableAction {
   constructor(italic) {
     super();
     this.isFlushable = true;
@@ -343,7 +351,7 @@ class ItalicAnnotationAction extends contentState.TextSplittableAction {
    * @returns {ItalicAnnotation} The annotation
    */
   toAnnotation() {
-    return new contentState.ItalicAnnotation(this.italic);
+    return new codeBlock.ItalicAnnotation(this.italic);
   }
 }
 
@@ -363,15 +371,15 @@ class ItalicToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlim
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof contentState.RTETextNode);
+      .filter((node) => node instanceof codeBlock.RTETextNode);
     return (selectedNodes.length > 0 &&
-      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.ITALIC)) === null || _a === void 0 ? void 0 : _a.italic; }));
+      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.ITALIC)) === null || _a === void 0 ? void 0 : _a.italic; }));
   }
   onClick() {
     const italic = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof contentState.RTETextNode)
+      .filter((node) => node instanceof codeBlock.RTETextNode)
       .forEach((node) => node.apply(new ItalicAnnotationAction(!italic)));
   }
   isDisabled() {
@@ -379,8 +387,9 @@ class ItalicToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlim
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.IMAGE);
+        return node instanceof codeBlock.RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.IMAGE);
       }));
   }
 }
@@ -398,7 +407,7 @@ const underline = {
 /**
  * Action to toggle the underline annotation
  */
-class UnderlineAnnotationAction extends contentState.TextSplittableAction {
+class UnderlineAnnotationAction extends codeBlock.TextSplittableAction {
   constructor(underline) {
     super();
     this.isFlushable = true;
@@ -410,7 +419,7 @@ class UnderlineAnnotationAction extends contentState.TextSplittableAction {
    * @returns {Annotation} the annotation
    */
   toAnnotation() {
-    return new contentState.UnderlineAnnotation(this.underline);
+    return new codeBlock.UnderlineAnnotation(this.underline);
   }
 }
 
@@ -430,18 +439,18 @@ class UnderlineToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonS
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof contentState.RTETextNode);
+      .filter((node) => node instanceof codeBlock.RTETextNode);
     return (selectedNodes.length > 0 &&
       selectedNodes.every((node) => {
         var _a;
-        return (_a = node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.UNDERLINE)) === null || _a === void 0 ? void 0 : _a.underline;
+        return (_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.UNDERLINE)) === null || _a === void 0 ? void 0 : _a.underline;
       }));
   }
   onClick() {
     const selected = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof contentState.RTETextNode)
+      .filter((node) => node instanceof codeBlock.RTETextNode)
       .forEach((node) => node.apply(new UnderlineAnnotationAction(!selected)));
   }
   isDisabled() {
@@ -449,8 +458,9 @@ class UnderlineToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonS
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.IMAGE);
+        return node instanceof codeBlock.RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.IMAGE);
       }));
   }
 }
@@ -482,19 +492,19 @@ class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
       const boldByDefault = TextStylesToolbarButtonSlimmer.items.find((item) => item.key === selectedType).bold;
       const selectedTextBlocks = this.selectionController
         .getSelectedBlocks()
-        .filter((block) => block instanceof contentState.RTETextBlock);
+        .filter((block) => block instanceof codeBlock.RTETextBlock);
       if (selectedTextBlocks.length > 0) {
         selectedTextBlocks.forEach((item) => {
-          item.apply(new contentState.TextStyleAnnotationAction(selectedType, boldByDefault));
+          item.apply(new codeBlock.TextStyleAnnotationAction(selectedType, boldByDefault));
         });
       }
       else {
         void this.focusController.focusOnLastTextNode({ newLine: true }).then(() => {
           this.selectionController
             .getSelectedBlocks()
-            .filter((node) => node instanceof contentState.RTETextBlock)
+            .filter((node) => node instanceof codeBlock.RTETextBlock)
             .forEach((item) => {
-            item.apply(new contentState.TextStyleAnnotationAction(selectedType, boldByDefault));
+            item.apply(new codeBlock.TextStyleAnnotationAction(selectedType, boldByDefault));
           });
         });
       }
@@ -509,8 +519,8 @@ class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
   }
   renderDropdownContent() {
     return (index.h(index.Fragment, null, TextStylesToolbarButtonSlimmer.items.map((item) => {
-      const textStyleAnnotation = new contentState.TextStyleAnnotation(item.key);
-      const boldAnnotation = new contentState.BoldAnnotation(item.bold);
+      const textStyleAnnotation = new codeBlock.TextStyleAnnotation(item.key);
+      const boldAnnotation = new codeBlock.BoldAnnotation(item.bold);
       return (index.h("vega-dropdown-item", { key: item.key, itemKey: item.key },
         index.h("vega-box", { padding: { right: 'size-20' } },
           index.h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.render()), boldAnnotation.render()) }, this.translationSlimmer.t(item.label)))));
@@ -522,7 +532,8 @@ class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.IMAGE)));
+      selectedNodes.some((node) => node instanceof codeBlock.RTECodeBlockNode ||
+        node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.IMAGE)));
   }
   addDropdownObserver(dropdownRef) {
     domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, domNodeSubjectFactory.VegaDropdownClick, this.handleDropdownItemClick);
@@ -530,11 +541,11 @@ class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
   getSelectedSourceKey() {
     const currentSelectedBlocks = this.selectionController
       .getSelectedBlocks()
-      .filter((block) => block instanceof contentState.RTETextBlock);
+      .filter((block) => block instanceof codeBlock.RTETextBlock);
     const isSameType = currentSelectedBlocks.length > 0 &&
       currentSelectedBlocks.every((block) => block.type === currentSelectedBlocks[0].type);
     if (isSameType) {
-      const blockAnnotation = currentSelectedBlocks[0].getAnnotationByType(contentState.BlockAnnotationTypeEnum.TEXT_STYLE);
+      const blockAnnotation = currentSelectedBlocks[0].getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.TEXT_STYLE);
       return blockAnnotation.textStyle;
     }
     return '';
@@ -607,15 +618,16 @@ class ClearStyleToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
   onClick() {
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof contentState.RTETextNode)
+      .filter((node) => node instanceof codeBlock.RTETextNode)
       .forEach((node) => {
-      node.apply(new contentState.ClearFormattingAnnotationAction());
+      node.apply(new codeBlock.ClearFormattingAnnotationAction());
     });
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.IMAGE)));
+      selectedNodes.some((node) => node instanceof codeBlock.RTECodeBlockNode ||
+        node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.IMAGE)));
   }
 }
 (() => {
@@ -648,22 +660,23 @@ class CodeToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
     const selected = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof contentState.RTETextNode)
-      .forEach((node) => node.apply(new contentState.CodeAnnotationAction(!selected)));
+      .filter((node) => node instanceof codeBlock.RTETextNode)
+      .forEach((node) => node.apply(new codeBlock.CodeAnnotationAction(!selected)));
   }
   isSelected() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (selectedNodes.length > 0 &&
       selectedNodes
-        .filter((node) => node instanceof contentState.RTETextNode)
-        .map((node) => node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.CODE))
+        .filter((node) => node instanceof codeBlock.RTETextNode)
+        .map((node) => node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE))
         .every((annotation) => annotation && annotation.code));
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.LINK) ||
-        node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.IMAGE)));
+      selectedNodes.some((node) => node instanceof codeBlock.RTECodeBlockNode ||
+        node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.LINK) ||
+        node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.IMAGE)));
   }
 }
 (() => {
@@ -680,7 +693,7 @@ const strikethrough = {
 /**
  * Action to toggle the strikethrough annotation
  */
-class StrikethroughAnnotationAction extends contentState.TextSplittableAction {
+class StrikethroughAnnotationAction extends codeBlock.TextSplittableAction {
   constructor(underline) {
     super();
     this.isFlushable = true;
@@ -692,7 +705,7 @@ class StrikethroughAnnotationAction extends contentState.TextSplittableAction {
    * @returns {Annotation} the annotation
    */
   toAnnotation() {
-    return new contentState.StrikethroughAnnotation(this.strikethrough);
+    return new codeBlock.StrikethroughAnnotation(this.strikethrough);
   }
 }
 
@@ -712,18 +725,18 @@ class StrikethroughToolbarButtonSlimmer extends imageAnnotationAction.ToolbarBut
   isSelected() {
     const selectedNodes = this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof contentState.RTETextNode);
+      .filter((node) => node instanceof codeBlock.RTETextNode);
     return (selectedNodes.length > 0 &&
       selectedNodes.every((node) => {
         var _a;
-        return (_a = node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.STRIKETHROUGH)) === null || _a === void 0 ? void 0 : _a.strikethrough;
+        return (_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.STRIKETHROUGH)) === null || _a === void 0 ? void 0 : _a.strikethrough;
       }));
   }
   onClick() {
     const selected = this.isSelected();
     this.selectionController
       .getSelectedNodes()
-      .filter((node) => node instanceof contentState.RTETextNode)
+      .filter((node) => node instanceof codeBlock.RTETextNode)
       .forEach((node) => node.apply(new StrikethroughAnnotationAction(!selected)));
   }
   isDisabled() {
@@ -731,8 +744,9 @@ class StrikethroughToolbarButtonSlimmer extends imageAnnotationAction.ToolbarBut
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
-          node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.IMAGE);
+        return node instanceof codeBlock.RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.IMAGE);
       }));
   }
 }
@@ -747,25 +761,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 contentState.AnnotationAction {
-  constructor(range) {
-    super();
-    this.isFlushable = false;
-    this.range = range;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {SelectionRangeAnnotation} The annotation
-   */
-  toAnnotation() {
-    return new contentState.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);
@@ -787,7 +782,7 @@ class LinkToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
           const textChanged = text !== this.currentSelectedText;
           const groupKey = createPublicApiRuntimeMetricsSlimmer.generateUUID();
           this.currentSelectedNodes.forEach((node) => {
-            node.apply(new SelectionChangeAction(this.currentRange)).apply(new contentState.LinkAnnotationAction({
+            node.apply(new codeBlock.SelectionChangeAction(this.currentRange)).apply(new codeBlock.LinkAnnotationAction({
               link: { href: url, groupKey: groupKey },
               newText: textChanged ? text : undefined,
               needMergeNode: textChanged && this.currentSelectedNodes.length > 1,
@@ -818,9 +813,9 @@ class LinkToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
       selectedBlocks.length > 1 ||
       selectedNodes.some((node) => {
         var _a;
-        return !(node instanceof contentState.RTETextNode) ||
-          node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.LINK) ||
-          ((_a = node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code);
+        return !(node instanceof codeBlock.RTETextNode) ||
+          node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.LINK) ||
+          ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code);
       }));
   }
   onClick() {
@@ -859,7 +854,7 @@ const indent = {
 /**
  * Action to toggle block indent annotation
  */
-class IndentAnnotationAction extends contentState.AnnotationAction {
+class IndentAnnotationAction extends codeBlock.AnnotationAction {
   constructor(indent) {
     super();
     this.isFlushable = true;
@@ -871,7 +866,7 @@ class IndentAnnotationAction extends contentState.AnnotationAction {
    * @returns {Annotation} The annotation
    */
   toAnnotation() {
-    return new contentState.IndentAnnotation(this.indent);
+    return new codeBlock.IndentAnnotation(this.indent);
   }
 }
 
@@ -897,13 +892,13 @@ class MoreIndentToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => node.type === 'list-item') ||
-      selectedNodes.some((node) => node instanceof contentState.RTEImageNode));
+      selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
+      selectedNodes.some((node) => node instanceof codeBlock.RTEImageNode));
   }
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {
       var _a, _b;
-      const indent = (_b = (_a = item.getAnnotationByType(contentState.BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
+      const indent = (_b = (_a = item.getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
       item.apply(new IndentAnnotationAction(indent + 1));
     });
   }
@@ -941,13 +936,13 @@ class LessIndentToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => node.type === 'list-item') ||
-      selectedNodes.some((node) => node instanceof contentState.RTEImageNode));
+      selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
+      selectedNodes.some((node) => node instanceof codeBlock.RTEImageNode));
   }
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {
       var _a, _b;
-      const indent = (_b = (_a = item.getAnnotationByType(contentState.BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
+      const indent = (_b = (_a = item.getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
       const newIndent = indent > 1 ? indent - 1 : 0;
       item.apply(new IndentAnnotationAction(newIndent));
     });
@@ -969,10 +964,10 @@ const image = {
  *
  * @example currentImageNode.apply(new ImageUpdateUrlAction(url))
  */
-class ImageUpdateUrlAction extends contentState.ModifyContentAction {
+class ImageUpdateUrlAction extends codeBlock.ModifyContentAction {
   constructor(newUrl) {
     super();
-    this.type = contentState.ModifyContentActionType.UPDATE_IMAGE_NODE_URL;
+    this.type = codeBlock.ModifyContentActionType.UPDATE_IMAGE_NODE_URL;
     this.url = newUrl;
   }
 }
@@ -1029,7 +1024,7 @@ class ImageToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimm
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(contentState.NodeAnnotationTypeEnum.LINK)));
+      selectedNodes.some((node) => node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.LINK)));
   }
 }
 (() => {
@@ -1056,10 +1051,10 @@ const ListOL = {
 /**
  * Action to toggle bullet annotation
  */
-class TransformListAction extends contentState.ModifyContentAction {
+class TransformListAction extends codeBlock.ModifyContentAction {
   constructor(listType, selectedBlocks) {
     super();
-    this.type = contentState.ModifyContentActionType.TRANSFORM_LIST_BLOCK;
+    this.type = codeBlock.ModifyContentActionType.TRANSFORM_LIST_BLOCK;
     this.isFlushable = true;
     this.listType = listType;
     this.selectedBlocks = selectedBlocks;
@@ -1069,10 +1064,10 @@ class TransformListAction extends contentState.ModifyContentAction {
 /**
  * Action to toggle bullet annotation
  */
-class TransformParagraphAction extends contentState.ModifyContentAction {
+class TransformParagraphAction extends codeBlock.ModifyContentAction {
   constructor(selectedBlocks) {
     super();
-    this.type = contentState.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK;
+    this.type = codeBlock.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK;
     this.isFlushable = true;
     this.selectedBlocks = selectedBlocks;
   }
@@ -1108,7 +1103,8 @@ class BulletsToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSli
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof contentState.RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof codeBlock.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'bullet-list') {
     return (selectedBlocks.length > 0 &&
@@ -1171,7 +1167,8 @@ class NumbersToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSli
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof contentState.RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof codeBlock.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'number-list') {
     return (selectedBlocks.length > 0 &&
@@ -1246,7 +1243,8 @@ class BulletsNumbersToolbarButtonSlimmer extends imageAnnotationAction.ToolbarBu
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof contentState.RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof codeBlock.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
   }
 }
 (() => {
@@ -1271,7 +1269,7 @@ __decorate$l([
 /**
  * Action to toggle block horizontal alignment annotation
  */
-class HorizontalAlignmentAnnotationAction extends contentState.AnnotationAction {
+class HorizontalAlignmentAnnotationAction extends codeBlock.AnnotationAction {
   constructor(textAlign) {
     super();
     this.isFlushable = true;
@@ -1283,7 +1281,7 @@ class HorizontalAlignmentAnnotationAction extends contentState.AnnotationAction
    * @returns {HorizontalAlignmentAnnotation} The annotation
    */
   toAnnotation() {
-    return new contentState.HorizontalAlignmentAnnotation(this.textAlign);
+    return new codeBlock.HorizontalAlignmentAnnotation(this.textAlign);
   }
 }
 
@@ -1311,7 +1309,7 @@ class LeftAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonS
     return (selectedBlocks.length > 0 &&
       selectedBlocks.every((block) => {
         var _a;
-        return ((_a = block.getAnnotationByType(contentState.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'left';
+        return ((_a = block.getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'left';
       }));
   }
   onClick() {
@@ -1357,7 +1355,7 @@ class CenterAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButto
     return (selectedBlocks.length > 0 &&
       selectedBlocks.every((block) => {
         var _a;
-        return ((_a = block.getAnnotationByType(contentState.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'center';
+        return ((_a = block.getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'center';
       }));
   }
   onClick() {
@@ -1403,7 +1401,7 @@ class RightAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     return (selectedBlocks.length > 0 &&
       selectedBlocks.every((block) => {
         var _a;
-        return ((_a = block.getAnnotationByType(contentState.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'right';
+        return ((_a = block.getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'right';
       }));
   }
   onClick() {
@@ -1449,7 +1447,7 @@ class JustifyAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButt
     return (selectedBlocks.length > 0 &&
       selectedBlocks.every((block) => {
         var _a;
-        return ((_a = block.getAnnotationByType(contentState.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'justify';
+        return ((_a = block.getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'justify';
       }));
   }
   onClick() {
@@ -1522,6 +1520,12 @@ class HorizontalAlignmentToolbarButtonSlimmer extends imageAnnotationAction.Tool
   isSelected() {
     return false;
   }
+  isDisabled() {
+    return (super.isDisabled() ||
+      this.selectionController
+        .getSelectedBlocks()
+        .some((block) => block.type === 'code-block'));
+  }
 }
 __decorate$g([
   globalSlimmerRegistry.MapToComponentField()
@@ -1542,951 +1546,256 @@ __decorate$g([
   globalSlimmerRegistry.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 globalSlimmerRegistry.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 = timer.debounce(() => {
+      void this.valueController.flushChanges(this.value);
+    }, ValueController.VALUE_CHANGE_DEBOUNCE_TIME, this);
+    this.flushChangeObserver = new observer.Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
+    changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.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 = component.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.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.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 contentState.VegaRTEContent)) {
+      this.value = contentState.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 contentState.VegaRTEContent)) {
+      this.value = contentState.VegaRTEContent.fromJSON(this.value);
+    }
+    else if (!this.value || this.value.blocks.length === 0) {
+      this.value = contentState.VegaRTEContent.createEmptyContent();
+    }
+    else {
+      this.changeEventEmitter.emit(this.value);
+      changeManager.ChangeManager.notify(staticSubjectTitle.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 selectionController.RTESelectionState(this.selectionController.getCurrentRange())));
+    }
+    this.value = newValue.clone();
+    await index$1.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([
+  globalSlimmerRegistry.MapToComponentField()
+], ValueController.prototype, "host", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], ValueController.prototype, "value", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], ValueController.prototype, "changeEventEmitter", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], ValueController.prototype, "valueController", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], ValueController.prototype, "historyController", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], ValueController.prototype, "selectionController", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], ValueController.prototype, "connectedCallback", null);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], ValueController.prototype, "disconnectedCallback", null);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], ValueController.prototype, "componentWillLoad", null);
+__decorate$f([
+  globalSlimmerRegistry.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 contentState.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.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.richTextEditorRef, vegaInternalEventId.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 codeBlock.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
+    const textNode = new codeBlock.RTETextNode(`${paragraph.id}1`, '', paragraph);
+    paragraph.apply(new codeBlock.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 = contentState.stateEntityRenderingRegistry.getDOMByEntity(node);
-      if (element) {
-        return node instanceof contentState.RTEImageNode
-          ? ui.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 contentState.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.
+ * Insert a new node before a existing node
+ *
+ * @example currentNode.parentBlock.apply(new InsertNodesBeforeAction(currentNode, newNode, ...))
  */
-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 globalSlimmerRegistry.VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.currentRange = new RTERange();
-    this.updateCaretPositionTaskQueue = new synchronizeTaskQueue.SynchronizeTaskQueue(1);
-    this.handleSelectionWithDebounce = timer.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.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.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) {
-          globalSlimmerRegistry.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 contentState.RTETextNode && startNode === endNode && startNode.text.length === 0) {
-        this.enqueueSelectionRangeFutureState(startNode, contentState.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 = contentState.stateEntityRenderingRegistry.getEntityByDOM(currentNode);
-        if (nodeEntity instanceof contentState.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 = contentState.stateEntityRenderingRegistry.getEntityByDOM(entityElement);
-        if (nodeEntity instanceof contentState.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(contentState.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.Observer(this.isAcceptableSelectionRangeChange.bind(this), (payload) => {
-      this.pendingRestoreSelectionNodes.push(payload.node);
-    });
-    changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.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 = contentState.stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
-        contentState.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([
-  globalSlimmerRegistry.MapToComponentField()
-], SelectionController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$f([
-  globalSlimmerRegistry.MapToComponentField({ writable: true })
-], SelectionController.prototype, "selectionMap", void 0);
-__decorate$f([
-  globalSlimmerRegistry.MapToComponentField()
-], SelectionController.prototype, "host", void 0);
-__decorate$f([
-  globalSlimmerRegistry.MapToComponentField()
-], SelectionController.prototype, "value", void 0);
-__decorate$f([
-  globalSlimmerRegistry.MapToComponentField()
-], SelectionController.prototype, "disabled", void 0);
-__decorate$f([
-  globalSlimmerRegistry.MapToComponentField()
-], SelectionController.prototype, "valueController", void 0);
-__decorate$f([
-  globalSlimmerRegistry.MapToComponentField()
-], SelectionController.prototype, "insertCompositionTextController", void 0);
-__decorate$f([
-  globalSlimmerRegistry.MapToComponentField()
-], SelectionController.prototype, "historyController", void 0);
-__decorate$f([
-  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
-], SelectionController.prototype, "connectedCallback", null);
-__decorate$f([
-  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
-], SelectionController.prototype, "disconnectedCallback", null);
-__decorate$f([
-  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
-], SelectionController.prototype, "componentDidLoad", null);
-__decorate$f([
-  globalSlimmerRegistry.MapToComponentMethod('watchValueUpdate')
-], SelectionController.prototype, "watchValueUpdate", null);
-__decorate$f([
-  globalSlimmerRegistry.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 globalSlimmerRegistry.VegaSlimmer {
-  /**
-   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
-   */
-  connectedCallback() {
-    const flushChangesWithDebounce = timer.debounce(() => {
-      void this.valueController.flushChanges(this.value);
-    }, ValueController.VALUE_CHANGE_DEBOUNCE_TIME, this);
-    this.flushChangeObserver = new observer.Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
-    changeManager.ChangeManager.register(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
-  }
-  /**
-   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
-   */
-  disconnectedCallback() {
-    changeManager.ChangeManager.unregister(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
-  }
-  /**
-   * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
-   */
-  componentWillLoad() {
-    if (this.value && !(this.value instanceof contentState.VegaRTEContent)) {
-      this.value = contentState.VegaRTEContent.fromJSON(this.value);
-    }
-  }
-  /**
-   * Watches the value of the editor and updates the internal value.
-   */
-  watchValueUpdate() {
-    if (this.value && !(this.value instanceof contentState.VegaRTEContent)) {
-      this.value = contentState.VegaRTEContent.fromJSON(this.value);
-    }
-    else if (!this.value || this.value.blocks.length === 0) {
-      this.value = contentState.VegaRTEContent.createEmptyContent();
-    }
-    else {
-      this.changeEventEmitter.emit(this.value);
-      changeManager.ChangeManager.notify(staticSubjectTitle.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 index$1.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([
-  globalSlimmerRegistry.MapToComponentField()
-], ValueController.prototype, "host", void 0);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentField({ writable: true })
-], ValueController.prototype, "value", void 0);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentField()
-], ValueController.prototype, "changeEventEmitter", void 0);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentField()
-], ValueController.prototype, "valueController", void 0);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentField()
-], ValueController.prototype, "historyController", void 0);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentField()
-], ValueController.prototype, "selectionController", void 0);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
-], ValueController.prototype, "connectedCallback", null);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
-], ValueController.prototype, "disconnectedCallback", null);
-__decorate$e([
-  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
-], ValueController.prototype, "componentWillLoad", null);
-__decorate$e([
-  globalSlimmerRegistry.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.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.richTextEditorRef, vegaInternalEventId.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 contentState.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
-    const textNode = new contentState.RTETextNode(`${paragraph.id}1`, '', paragraph);
-    paragraph.apply(new contentState.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, ...))
- */
-class InsertNodesBeforeAction extends contentState.ModifyContentAction {
-  constructor(referNode, ...nodesToBeInserted) {
-    super();
-    this.type = contentState.ModifyContentActionType.INSERT_NODES_BEFORE;
-    this.referNode = referNode;
-    this.nodesToBeInserted = nodesToBeInserted;
+class InsertNodesBeforeAction extends codeBlock.ModifyContentAction {
+  constructor(referNode, ...nodesToBeInserted) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.INSERT_NODES_BEFORE;
+    this.referNode = referNode;
+    this.nodesToBeInserted = nodesToBeInserted;
   }
 }
 
@@ -2495,10 +1804,10 @@ class InsertNodesBeforeAction extends contentState.ModifyContentAction {
  *
  * @example selectedNode.apply(new ReplaceSelectedTextAction(insertText))
  */
-class ReplaceSelectedTextAction extends contentState.ModifyContentAction {
+class ReplaceSelectedTextAction extends codeBlock.ModifyContentAction {
   constructor(text, currentRange) {
     super();
-    this.type = contentState.ModifyContentActionType.REPLACE_SELECTED_TEXT;
+    this.type = codeBlock.ModifyContentActionType.REPLACE_SELECTED_TEXT;
     this.textToBeInsert = '';
     this.textToBeInsert = text;
     this.currentRange = currentRange;
@@ -2522,7 +1831,7 @@ class InsertTextHandler extends BaseHandler {
         const cursorNode = this.insertTextToRoot(text);
         this.selectionController.enqueueSelectionRangeFutureState(cursorNode, text.length);
       }
-      else if (selectedNodes[0] instanceof contentState.RTETextNode) {
+      else if (selectedNodes[0] instanceof codeBlock.RTETextNode) {
         let nextOffset = startOffset + text.length;
         let updateFlag = false;
         let cursorNode = selectedNodes[0];
@@ -2531,13 +1840,13 @@ class InsertTextHandler extends BaseHandler {
           updateFlag = true;
         }
         else {
-          if (startContainer.nodeValue === contentState.ZERO_WIDTH_SPACE &&
-            startOffset === contentState.ZERO_WIDTH_SPACE.length &&
+          if (startContainer.nodeValue === codeBlock.ZERO_WIDTH_SPACE &&
+            startOffset === codeBlock.ZERO_WIDTH_SPACE.length &&
             cursorNode.isEmpty()) {
             startContainer.nodeValue = '';
-            nextOffset = nextOffset - contentState.ZERO_WIDTH_SPACE.length;
+            nextOffset = nextOffset - codeBlock.ZERO_WIDTH_SPACE.length;
           }
-          if (cursorNode instanceof contentState.RTETextNode) {
+          if (cursorNode instanceof codeBlock.RTETextNode) {
             updateFlag = true;
             cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
           }
@@ -2549,7 +1858,7 @@ class InsertTextHandler extends BaseHandler {
     else {
       // The selected nodes is multiple nodes
       const cursorNode = this.removeSelectionRange(true);
-      if (cursorNode instanceof contentState.RTETextNode) {
+      if (cursorNode instanceof codeBlock.RTETextNode) {
         cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
         this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(startOffset + text.length, cursorNode.text.length));
       }
@@ -2564,9 +1873,9 @@ class InsertTextHandler extends BaseHandler {
   insertTextToRoot(text) {
     if (this.currentState &&
       this.currentState.blocks[0] &&
-      this.currentState.blocks[0] instanceof contentState.RTETextBlock) {
+      this.currentState.blocks[0] instanceof codeBlock.RTETextBlock) {
       const firstNode = this.currentState.blocks[0].nodes[0];
-      firstNode.apply(new contentState.UpdateTextAction(text));
+      firstNode.apply(new codeBlock.UpdateTextAction(text));
       return firstNode;
     }
   }
@@ -2587,7 +1896,7 @@ class InsertTextHandler extends BaseHandler {
       return newTextNode;
     }
     else {
-      lineBreakNode.apply(new contentState.UpdateTextAction(text));
+      lineBreakNode.apply(new codeBlock.UpdateTextAction(text));
       return lineBreakNode;
     }
   }
@@ -2600,11 +1909,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();
+      }
     }
   }
   /**
@@ -2646,8 +1957,8 @@ class InsertParagraphHandler extends BaseHandler {
        */
       if (firstBlock.type !== lastBlock.type &&
         range.startContainer.nodeType === range.endContainer.nodeType) {
-        firstBlock.apply(new contentState.MergeTwoBlocksNodesAction(lastBlock));
-        const splitAction = new contentState.SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
+        firstBlock.apply(new codeBlock.MergeTwoBlocksNodesAction(lastBlock));
+        const splitAction = new codeBlock.SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
         firstBlock.apply(splitAction);
         this.switchCaretPositionToNextElement(splitAction.newBlock);
         return;
@@ -2685,10 +1996,10 @@ class InsertParagraphHandler extends BaseHandler {
  *
  * @example block.apply(new SplitBlockWithNodeAction(node, offset))
  */
-class LineBreakSingleBlockAction extends contentState.ModifyContentAction {
+class LineBreakSingleBlockAction extends codeBlock.ModifyContentAction {
   constructor(startContainerNode, startOffset) {
     super();
-    this.type = contentState.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK;
+    this.type = codeBlock.ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK;
     this.startContainerNode = startContainerNode;
     this.startOffset = startOffset;
   }
@@ -2699,10 +2010,10 @@ class LineBreakSingleBlockAction extends contentState.ModifyContentAction {
  *
  * @example block.apply(new SplitBlockWithNodeAction(node, offset))
  */
-class lineBreakMultipleBlocksAction extends contentState.ModifyContentAction {
+class lineBreakMultipleBlocksAction extends codeBlock.ModifyContentAction {
   constructor(selectedBlocks) {
     super();
-    this.type = contentState.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS;
+    this.type = codeBlock.ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS;
     this.selectedBlocks = selectedBlocks;
   }
 }
@@ -2718,11 +2029,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();
+      }
     }
   }
   /**
@@ -2735,7 +2048,7 @@ class InsertLineBreakHandler extends BaseHandler {
   breakNewBlock() {
     if (this.currentState &&
       this.currentState.blocks[0] &&
-      this.currentState.blocks[0] instanceof contentState.RTETextBlock) {
+      this.currentState.blocks[0] instanceof codeBlock.RTETextBlock) {
       const lineBreakAction = new LineBreakSingleBlockAction(this.currentState.blocks[0].nodes[0], 0);
       this.currentState.blocks[0].apply(lineBreakAction);
       this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
@@ -2799,10 +2112,10 @@ class InsertLineBreakHandler extends BaseHandler {
  *
  * @example currentBlock.apply(new DeleteBlockContentAction(startContainerNode, startOffset))
  */
-class DeleteBlockContentAction extends contentState.ModifyContentAction {
+class DeleteBlockContentAction extends codeBlock.ModifyContentAction {
   constructor(startContainerNode, startOffset) {
     super();
-    this.type = contentState.ModifyContentActionType.DELETE_BLOCK_CONTENT;
+    this.type = codeBlock.ModifyContentActionType.DELETE_BLOCK_CONTENT;
     this.startContainerNode = startContainerNode;
     this.startOffset = startOffset;
   }
@@ -2859,9 +2172,9 @@ class DeleteContentHandler extends BaseHandler {
     const cursorNode = this.removeSelectionRange(true);
     const lastSelectedNode = selectedNodes[selectedNodes.length - 1];
     if (selectedNodes.length > 1 &&
-      lastSelectedNode instanceof contentState.RTETextNode &&
+      lastSelectedNode instanceof codeBlock.RTETextNode &&
       lastSelectedNode.isEmpty()) {
-      lastSelectedNode.parentBlock.apply(new contentState.RemoveChildAction(lastSelectedNode));
+      lastSelectedNode.parentBlock.apply(new codeBlock.RemoveChildAction(lastSelectedNode));
     }
     this.convertFirstBlockToParagraph(cursorNode.parentBlock);
   }
@@ -2873,14 +2186,14 @@ class DeleteContentHandler extends BaseHandler {
   convertFirstBlockToParagraph(block) {
     const firstBlock = this.currentState.blocks[0];
     if (firstBlock === block &&
-      block instanceof contentState.RTETextBlock &&
+      block instanceof codeBlock.RTETextBlock &&
       block.nodes.length === 1 &&
       block.nodes[0].isEmpty() &&
       block.type !== 'paragraph') {
       const paragraph = this.createEmptyParagraph();
-      paragraph.apply(new contentState.ReplaceChildNodesAction(block.nodes));
-      block.parent.apply(new contentState.InsertBlocksBeforeAction(block, paragraph));
-      block.parent.apply(new contentState.RemoveChildAction(block));
+      paragraph.apply(new codeBlock.ReplaceChildNodesAction(block.nodes));
+      block.parent.apply(new codeBlock.InsertBlocksBeforeAction(block, paragraph));
+      block.parent.apply(new codeBlock.RemoveChildAction(block));
     }
   }
   /**
@@ -2888,7 +2201,7 @@ class DeleteContentHandler extends BaseHandler {
    */
   insertDefaultParagraph() {
     const paragraph = this.createEmptyParagraph();
-    this.currentState.apply(new contentState.AppendChildNodesAction([paragraph]));
+    this.currentState.apply(new codeBlock.AppendChildNodesAction([paragraph]));
     this.selectionController.enqueueSelectionRangeFutureState(paragraph.nodes[0], 1);
   }
   /**
@@ -3112,13 +2425,13 @@ class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
     const color = element.style.color;
     const hexColor = (_a = ui.rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
     if (hexColor) {
-      const colorSchema = contentState.RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
+      const colorSchema = codeBlock.RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
       if (colorSchema)
         return colorSchema.key;
       return null;
     }
     else {
-      for (const color of contentState.RTE_TEXT_COLORS) {
+      for (const color of codeBlock.RTE_TEXT_COLORS) {
         if (element.style.color.includes(color.key)) {
           return color.key;
         }
@@ -3245,7 +2558,7 @@ class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstra
     const nodes = this.generateChildNodes(elementsArray, this.generateTextNodeAnnotations(parent));
     if (nodes.length === 0)
       return null;
-    return contentState.RTETextBlock.from({
+    return codeBlock.RTETextBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: 'paragraph',
       nodes: nodes,
@@ -3410,7 +2723,7 @@ class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract
     const nodes = this.generateChildNodes(elementsArray);
     if (nodes.length === 0)
       return null;
-    return contentState.RTETextBlock.from({
+    return codeBlock.RTETextBlock.from({
       id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
       type: this.getElementType(elementsArray[0]),
       nodes: nodes,
@@ -3626,12 +2939,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 contentState.RTEImageBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+      type: 'image',
+      nodes: [
+        {
+          id: createPublicApiRuntimeMetricsSlimmer.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 contentState.RTEListItemBlock.from({
+      id: createPublicApiRuntimeMetricsSlimmer.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.
    *
@@ -3640,37 +3058,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 contentState.RTEImageBlock.from({
-      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
-      type: 'image',
-      nodes: [
-        {
-          id: createPublicApiRuntimeMetricsSlimmer.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 codeBlock.RTECodeBlock.from({
+        id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+        type: 'code-block',
+        content,
+        language,
+      });
+    }
   }
   /* istanbul ignore next */
   /**
@@ -3688,36 +3100,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 contentState.RTEListItemBlock.from({
-      id: createPublicApiRuntimeMetricsSlimmer.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 */
   /**
@@ -3733,6 +3157,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 */
@@ -3743,6 +3178,8 @@ class ElementToDtoStrategyProcessor {
       new OlToRTEListBlockStrategy(),
       new ULNotLiChildToRTEListItemBlockStrategy(),
       new LiToRTEListItemBlockStrategy(),
+      new VegaCodeBlockToRTECodeBlockStrategy(),
+      new JiraCodeToRTECodeBlockStrategy(),
       new InlineBlockToRTETextBlockStrategy(),
       new ImgToRTEImageBlockStrategy(),
       new VegaImageToRTEImageBlockStrategy(),
@@ -3830,7 +3267,7 @@ class InsertPasteHandler extends BaseHandler {
    * @param { RTEContentBlock[]} blocks - blocks
    */
   insertBlocksToRoot(blocks) {
-    this.currentState.apply(new contentState.AppendChildNodesAction(blocks));
+    this.currentState.apply(new codeBlock.AppendChildNodesAction(blocks));
   }
   /**
    * Insert the blocks to content
@@ -3842,9 +3279,9 @@ class InsertPasteHandler extends BaseHandler {
     if (cursorNode && cursorNode.parentBlock) {
       const currentBlock = cursorNode.parentBlock;
       const { startOffset } = this.selectionController.getCurrentRange();
-      const breakAction = new contentState.SplitBlockWithNodeAction(cursorNode, startOffset);
+      const breakAction = new codeBlock.SplitBlockWithNodeAction(cursorNode, startOffset);
       currentBlock.apply(breakAction);
-      currentBlock.parent.apply(new contentState.InsertBlocksAfterAction(currentBlock, ...blocks));
+      currentBlock.parent.apply(new codeBlock.InsertBlocksAfterAction(currentBlock, ...blocks));
       this.switchCaretPositionToNextElement(breakAction.newBlock);
     }
   }
@@ -3857,8 +3294,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 contentState.InsertBlocksBeforeAction(currentBlock, ...blocks));
-    this.switchCaretPositionToNextElement(currentBlock);
+    if (currentBlock) {
+      currentBlock.parent.apply(new codeBlock.InsertBlocksBeforeAction(currentBlock, ...blocks));
+      this.switchCaretPositionToNextElement(currentBlock);
+    }
   }
   /**
    * Format and parse elements from user paste.
@@ -3867,7 +3306,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
@@ -3886,9 +3330,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;
@@ -3913,7 +3371,8 @@ class UserInputController extends globalSlimmerRegistry.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();
@@ -3941,7 +3400,7 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
           break;
       }
       if (updateFlag) {
-        this.notifyComponentFlushValue();
+        void this.valueController.flushChanges(this.value);
       }
     };
   }
@@ -3976,12 +3435,6 @@ class UserInputController extends globalSlimmerRegistry.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.
    *
@@ -4002,29 +3455,46 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
       void this.valueController.flushChanges(contentState.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(codeBlock.RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME));
+    }
+    return false;
+  }
 }
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "host", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "value", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "valueController", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "selectionController", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "insertCompositionTextController", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], UserInputController.prototype, "addActionListener", null);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], UserInputController.prototype, "removeActionListener", null);
 
@@ -4033,18 +3503,18 @@ __decorate$d([
  *
  * @example block.apply(new InsertImageToBlockAction(node, offset, imageNode))
  */
-class InsertImageToBlockAction extends contentState.ModifyContentAction {
+class InsertImageToBlockAction extends codeBlock.ModifyContentAction {
   constructor(splitPointNode, startOffsetOfNode, imageBlockToBeInserted) {
     super();
     this.isFlushable = true;
-    this.type = contentState.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK;
+    this.type = codeBlock.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK;
     this.splitPointNode = splitPointNode;
     this.startOffsetOfNode = startOffsetOfNode;
     this.imageBlockToBeInserted = imageBlockToBeInserted;
   }
 }
 
-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;
@@ -4061,11 +3531,11 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
   insertImageToCaretPosition(imageUrl) {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const imageBlock = new contentState.RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
-    const newImageNode = new contentState.RTEImageNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), imageUrl, imageBlock);
+    const newImageNode = new codeBlock.RTEImageNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), imageUrl, imageBlock);
     newImageNode.apply(new imageAnnotationAction.ImageAnnotationAction('md', ''));
-    imageBlock.apply(new contentState.AppendChildNodesAction([newImageNode]));
+    imageBlock.apply(new codeBlock.AppendChildNodesAction([newImageNode]));
     if (selectedBlocks.length < 1 || this.value.blocks.length < 1) {
-      this.value.apply(new contentState.AppendChildNodesAction([imageBlock]));
+      this.value.apply(new codeBlock.AppendChildNodesAction([imageBlock]));
       void this.valueController.flushChanges(this.value);
     }
     else {
@@ -4105,7 +3575,7 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
       domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(richTextContentRef, vegaInternalEventId.VegaInternalRichTextImageClick, (payload) => {
         const range = this.selectionController.getCurrentRange();
         if (!range || range.startContainer !== payload.host || range.startOffset !== 0) {
-          const imageNode = contentState.stateEntityRenderingRegistry.getEntityByDOM(payload.host.querySelector('img'));
+          const imageNode = codeBlock.stateEntityRenderingRegistry.getEntityByDOM(payload.host.querySelector('img'));
           this.selectionController.enqueueSelectionRangeFutureState(imageNode, 0, imageNode, 0, true);
         }
       });
@@ -4133,26 +3603,26 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "selectionController", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "value", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "valueController", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], InsertImageController.prototype, "registerObserver", null);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.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;
@@ -4170,7 +3640,7 @@ class FocusController extends globalSlimmerRegistry.VegaSlimmer {
      * @param {RTEContentBlock} lastBlock - The last block of the content
      */
     this.doFocusOnLastTextNode = async (lastBlock) => {
-      this.setCaretRangeToNodeEnd(contentState.stateEntityRenderingRegistry.getDOMByEntity(lastBlock.getLastNode()).firstChild);
+      this.setCaretRangeToNodeEnd(codeBlock.stateEntityRenderingRegistry.getDOMByEntity(lastBlock.getLastNode()).firstChild);
       await this.vegaRichTextEditorRenderer.getRichTextContentRef().vegaFocus();
     };
   }
@@ -4183,13 +3653,13 @@ class FocusController extends globalSlimmerRegistry.VegaSlimmer {
    */
   async focusOnLastTextNode(options) {
     const lastBlock = this.value.blocks[this.value.blocks.length - 1];
-    if (!(lastBlock instanceof contentState.RTETextBlock) || (options === null || options === void 0 ? void 0 : options.newLine)) {
-      const newTextBlock = contentState.RTETextBlock.from({
+    if (!(lastBlock instanceof codeBlock.RTETextBlock) || (options === null || options === void 0 ? void 0 : options.newLine)) {
+      const newTextBlock = codeBlock.RTETextBlock.from({
         id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
         type: 'paragraph',
         nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '' }],
       });
-      lastBlock.parent.apply(new contentState.InsertBlocksAfterAction(lastBlock, newTextBlock));
+      lastBlock.parent.apply(new codeBlock.InsertBlocksAfterAction(lastBlock, newTextBlock));
       await this.valueController.flushChanges(this.value);
       await this.doFocusOnLastTextNode(newTextBlock);
     }
@@ -4208,20 +3678,20 @@ class FocusController extends globalSlimmerRegistry.VegaSlimmer {
     this.selectionController.setSelectionRange(range);
   }
 }
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "selectionController", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "valueController", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.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;
@@ -4261,14 +3731,14 @@ class TextNodeColorController extends globalSlimmerRegistry.VegaSlimmer {
     return true;
   }
 }
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], TextNodeColorController.prototype, "connectedCallback", null);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.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;
@@ -4296,9 +3766,9 @@ class InsertCompositionTextController extends globalSlimmerRegistry.VegaSlimmer
         records.forEach((record) => {
           const { target, oldValue } = record;
           if (target.nodeType === Node.TEXT_NODE && target.parentElement) {
-            const richTextNode = contentState.stateEntityRenderingRegistry.getEntityByDOM(target.parentElement);
+            const richTextNode = codeBlock.stateEntityRenderingRegistry.getEntityByDOM(target.parentElement);
             const newValue = target.textContent;
-            if (richTextNode instanceof contentState.RTETextNode) {
+            if (richTextNode instanceof codeBlock.RTETextNode) {
               updateFlag = this.updateCurrentNodeText(richTextNode, newValue, oldValue);
             }
             else if (newValue) {
@@ -4428,7 +3898,7 @@ class InsertCompositionTextController extends globalSlimmerRegistry.VegaSlimmer
     if (richTextNode.text !== insertText) {
       const { startOffset } = this.selectionController.getCurrentRange();
       const currentIsLineBreakNode = richTextNode.text === '\n';
-      richTextNode.apply(new contentState.UpdateTextAction(insertText));
+      richTextNode.apply(new codeBlock.UpdateTextAction(insertText));
       if (currentIsLineBreakNode) {
         this.appendLineBreakNode(richTextNode);
       }
@@ -4456,11 +3926,11 @@ class InsertCompositionTextController extends globalSlimmerRegistry.VegaSlimmer
    * @returns {string} The result text.
    */
   removeZeroWidthSpace(text) {
-    if (text.startsWith(contentState.ZERO_WIDTH_SPACE)) {
-      return text.slice(contentState.ZERO_WIDTH_SPACE.length);
+    if (text.startsWith(codeBlock.ZERO_WIDTH_SPACE)) {
+      return text.slice(codeBlock.ZERO_WIDTH_SPACE.length);
     }
-    else if (text.endsWith(contentState.ZERO_WIDTH_SPACE)) {
-      return text.slice(0, text.length - contentState.ZERO_WIDTH_SPACE.length);
+    else if (text.endsWith(codeBlock.ZERO_WIDTH_SPACE)) {
+      return text.slice(0, text.length - codeBlock.ZERO_WIDTH_SPACE.length);
     }
     return text;
   }
@@ -4476,35 +3946,35 @@ class InsertCompositionTextController extends globalSlimmerRegistry.VegaSlimmer
     this.editableElementRef.dispatchEvent(inputEvent);
   }
 }
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "selectionController", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "host", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "value", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "valueController", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "userInputController", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], InsertCompositionTextController.prototype, "addCompositionTextEventListener", null);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], InsertCompositionTextController.prototype, "removeCompositionTextEventListener", null);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.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;
@@ -4562,7 +4032,10 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.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 codeBlock.RTECodeBlockNode) {
+          return item !== startNode;
+        }
+        else if (item.type !== 'IMAGE') {
           return item !== startNode && item !== endNode;
         }
         else {
@@ -4570,30 +4043,37 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
         }
       });
       shouldRemovedItems.forEach((item) => {
-        item.parentBlock.apply(new contentState.RemoveChildAction(item));
+        item.parentBlock.apply(new codeBlock.RemoveChildAction(item));
       });
     }
     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 contentState.RTEImageNode &&
+    if (startNode instanceof codeBlock.RTEImageNode &&
       startOffset !== 1 &&
       (endNode !== startNode || endOffset !== 0)) {
       // the image block will be deleted when the image is the only item
       if (startNode.parentBlock.nodes.length === 1) {
         const paragraph = this.createEmptyParagraph();
-        startNode.parentBlock.parent.apply(new contentState.InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
-        startNode.parentBlock.apply(new contentState.RemoveChildAction(startNode));
+        startNode.parentBlock.parent.apply(new codeBlock.InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
+        startNode.parentBlock.apply(new codeBlock.RemoveChildAction(startNode));
         return paragraph.nodes[0];
       }
       else if (startNode === startNode.parentBlock.nodes[0]) {
         // the start node should be the next image item if the image is first item
-        startNode.parentBlock.apply(new contentState.RemoveChildAction(startNode));
+        startNode.parentBlock.apply(new codeBlock.RemoveChildAction(startNode));
         return startNode.parentBlock.nodes[0];
       }
     }
+    else if (startNode instanceof codeBlock.RTECodeBlockNode) {
+      const paragraph = this.createEmptyParagraph();
+      startNode.parentBlock.parent.apply(new codeBlock.InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
+      startNode.parentBlock.apply(new codeBlock.RemoveChildAction(startNode));
+      return paragraph.nodes[0];
+    }
     return startNode;
   }
   /**
@@ -4602,10 +4082,10 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
   removeRangeStartAndEndSelectedText() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     const currentRange = this.selectionController.getCurrentRange();
-    if (selectedNodes[0] instanceof contentState.RTETextNode) {
+    if (selectedNodes[0] instanceof codeBlock.RTETextNode) {
       selectedNodes[0].apply(new ReplaceSelectedTextAction('', currentRange));
     }
-    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof contentState.RTETextNode) {
+    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof codeBlock.RTETextNode) {
       selectedNodes[selectedNodes.length - 1].apply(new ReplaceSelectedTextAction('', currentRange));
     }
   }
@@ -4615,9 +4095,9 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
    * @returns {RTETextBlock} An empty paragraph with a unique identifier and a text node appended to it.
    */
   createEmptyParagraph() {
-    const paragraph = new contentState.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
-    const textNode = new contentState.RTETextNode(`${paragraph.id}1`, '', paragraph);
-    paragraph.apply(new contentState.AppendChildNodesAction([textNode]));
+    const paragraph = new codeBlock.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
+    const textNode = new codeBlock.RTETextNode(`${paragraph.id}1`, '', paragraph);
+    paragraph.apply(new codeBlock.AppendChildNodesAction([textNode]));
     return paragraph;
   }
   /**
@@ -4635,20 +4115,22 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
         if (startRTENode && startRTENode.parentBlock && endRTENode && endRTENode.parentBlock) {
           const endBlock = endRTENode.parentBlock;
           if (this.shouldMergeTextNode(startRTENode, endRTENode)) {
-            startRTENode.apply(new contentState.UpdateTextAction(startRTENode.text + endRTENode.text));
+            startRTENode.apply(new codeBlock.UpdateTextAction(startRTENode.text + endRTENode.text));
             if (startRTENode.parentBlock === endRTENode.parentBlock) {
-              startRTENode.parentBlock.apply(new contentState.RemoveChildAction(endRTENode));
+              startRTENode.parentBlock.apply(new codeBlock.RemoveChildAction(endRTENode));
             }
             else {
-              endRTENode.parentBlock.apply(new contentState.RemoveChildAction(endRTENode.parentBlock.nodes[0]));
+              endRTENode.parentBlock.apply(new codeBlock.RemoveChildAction(endRTENode.parentBlock.nodes[0]));
             }
           }
-          if (startRTENode.parentBlock !== endRTENode.parentBlock) {
-            startRTENode.parentBlock.apply(new contentState.AppendChildNodesAction(endBlock.nodes));
+          if (startRTENode instanceof codeBlock.RTETextNode &&
+            endRTENode instanceof codeBlock.RTETextNode &&
+            startRTENode.parentBlock !== endRTENode.parentBlock) {
+            startRTENode.parentBlock.apply(new codeBlock.AppendChildNodesAction(endBlock.nodes));
             endBlock.nodes = [];
           }
           if (endBlock.nodes.length < 1) {
-            endBlock.parent.apply(new contentState.RemoveChildAction(endBlock));
+            endBlock.parent.apply(new codeBlock.RemoveChildAction(endBlock));
           }
         }
       }
@@ -4664,26 +4146,28 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
   shouldMergeTextNode(nodeA, nodeB) {
     const { annotations: annotationsA } = nodeA.toJSON();
     const { annotations: annotationsB } = nodeB.toJSON();
-    return JSON.stringify(annotationsA) === JSON.stringify(annotationsB);
+    return (nodeA instanceof codeBlock.RTETextNode &&
+      nodeB instanceof codeBlock.RTETextNode &&
+      JSON.stringify(annotationsA) === JSON.stringify(annotationsB));
   }
 }
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "host", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "selectionController", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "value", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], DeleteSelectedNodesController.prototype, "addDeleteObserver", null);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.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;
@@ -4699,7 +4183,7 @@ class HistoryController extends keyboardManagerSlimmer.KeyboardManagerSlimmer {
     this.undoStack = [];
     this.registerHistoryDelay = 300;
     this.registerHistoryDebounced = timer.debounce(() => {
-      this.internalRegisterHistory(new RTEEditorState(this.value, new RTESelectionState(this.selectionController.getCurrentRange())));
+      this.internalRegisterHistory(new RTEEditorState(this.value, new selectionController.RTESelectionState(this.selectionController.getCurrentRange())));
     }, this.registerHistoryDelay, this);
   }
   /**
@@ -4707,7 +4191,7 @@ class HistoryController extends keyboardManagerSlimmer.KeyboardManagerSlimmer {
    */
   registerInitState() {
     if (this.value) {
-      this.internalRegisterHistory(new RTEEditorState(this.value, new RTESelectionState(this.selectionController.getCurrentRange())));
+      this.internalRegisterHistory(new RTEEditorState(this.value, new selectionController.RTESelectionState(this.selectionController.getCurrentRange())));
     }
   }
   /**
@@ -4797,25 +4281,166 @@ class HistoryController extends keyboardManagerSlimmer.KeyboardManagerSlimmer {
     ];
   }
 }
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "host", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "valueController", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "value", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "selectionController", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.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 codeBlock.ModifyContentAction {
+  constructor(selectedBlocks) {
+    super();
+    this.type = codeBlock.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 imageAnnotationAction.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'));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ 'rectangle-code': rectangleCode });
+})();
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "valueController", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "value", void 0);
+
+/**
+ * The rich text internal code block selection controller.
+ */
+class InternalCodeBlockSelectionController extends selectionController.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$1, range) {
+    const codeBlockNode = codeBlock$1.nodes[0];
+    const entityDom = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(codeBlockNode);
+    return (codeBlock$1.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 = codeBlock.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) {
@@ -4854,7 +4479,7 @@ const VegaRichTextEditor = class {
     this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditor, domNodeSubjectFactory.VegaChange);
     this.vegaRichTextEditorRenderer = new VegaRichTextEditorRenderer();
     this.valueController = new ValueController();
-    this.selectionController = new SelectionController();
+    this.selectionController = new selectionController.SelectionController();
     this.focusController = new FocusController();
     this.darkModeStateControllerSlimmer = new darkModeStateControllerSlimmer.DarkModeStateControllerSlimmer();
     this.toolbarRenderer = new ToolbarRenderer();
@@ -4872,6 +4497,7 @@ const VegaRichTextEditor = class {
     this.lessIndentToolbarButtonSlimmer = new LessIndentToolbarButtonSlimmer();
     this.bulletsNumbersToolbarButtonSlimmer = new BulletsNumbersToolbarButtonSlimmer();
     this.horizontalAlignmentToolbarButtonSlimmer = new HorizontalAlignmentToolbarButtonSlimmer();
+    this.codeBlockToolbarButtonSlimmer = new CodeBlockToolbarButtonSlimmer();
     this.placeholderNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaRichTextEditor, 'placeholder', 'watchPlaceholder');
     this.disabledNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaRichTextEditor, 'richTextContentEditable', 'watchRichTextContentEditable');
     this.richTextContentController = new RichTextContentController(this);
@@ -4883,6 +4509,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 = darkModeStyleController.VegaInternalThemeManager.isDarkMode();
@@ -5077,6 +4704,9 @@ __decorate$6([
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "codeBlockToolbarButtonSlimmer", void 0);
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "placeholderNotifySlimmer", void 0);
@@ -5110,6 +4740,9 @@ __decorate$6([
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "historyController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "internalCodeBlockSelectionController", void 0);
 VegaRichTextEditor.style = vegaRichTextEditorCss;
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {