@globalpayments/vega 2.37.0 → 2.37.1

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

@@ -9,17 +9,17 @@ const component = require('./component-73a88c4e.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const changeManager = require('./change-manager-a297e4d2.js');
 const domNodeSubjectFactory = require('./dom-node-subject-factory-ce1777a9.js');
-const vegaInternalEventId = require('./vega-internal-event-id-b12071ea.js');
-const imageAnnotationAction = require('./image-annotation-action-8e622f61.js');
+const vegaInternalEventId = require('./vega-internal-event-id-bda63e14.js');
+const imageAnnotationAction = require('./image-annotation-action-7d82f7e1.js');
 const internalIconManager = require('./internal-icon-manager-5ccb9443.js');
-const contentState = require('./content-state-9a9a4bd8.js');
-const nodeAnnotation_abstract = require('./node-annotation.abstract-2c8373c1.js');
+const contentState = require('./content-state-f97d3278.js');
+const nodeAnnotation_abstract = require('./node-annotation.abstract-4f6df9cf.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-80b3ac6c.js');
 const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-54c3f73b.js');
-const index$1 = require('./index-7c81de06.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-0303f4a7.js');
+const index$1 = require('./index-0546e2ea.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-48c0ad0b.js');
 const eventEmitSlimmer = require('./event-emit-slimmer-208a19e4.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-ae490543.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-b1f1e61a.js');
 const timer = require('./timer-5f33058b.js');
 const synchronizeTaskQueue = require('./synchronize-task-queue-1ee80e94.js');
 const observer = require('./observer-f49483e8.js');
@@ -53,7 +53,7 @@ require('./internal-vega-event-manager-981dfd1c.js');
 require('./internal-vega-z-index-manager-f03ddb37.js');
 require('./index-8b247c17.js');
 
-var __decorate$y = (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;
@@ -143,38 +143,38 @@ class VegaRichTextEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
     return (this.label && (index.h("vega-field-label", { onClick: this.richTextContentFocus, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
   }
 }
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "host", void 0);
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "toolbarRenderer", void 0);
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "label", void 0);
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "required", void 0);
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "hint", void 0);
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "disabled", void 0);
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "rows", void 0);
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "placeholder", void 0);
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "value", void 0);
-__decorate$y([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
 ], VegaRichTextEditorRenderer.prototype, "componentDidRender", null);
 
-var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$z = (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;
@@ -224,49 +224,49 @@ class ToolbarRenderer extends globalSlimmerRegistry.VegaSlimmer {
     })));
   }
 }
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "toolbarItems", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "clearStyleToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "boldToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "textStylesToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "italicToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "underlineToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "textColorToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "bulletsNumbersToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "strikethroughToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "imageToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "moreIndentToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "lessIndentToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "codeToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);
 
@@ -274,7 +274,7 @@ 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>`,
 };
 
-var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$y = (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;
@@ -315,7 +315,7 @@ class BoldToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
 (() => {
   internalIconManager.VegaInternalIconManager.register({ bold });
 })();
-__decorate$w([
+__decorate$y([
   globalSlimmerRegistry.MapToComponentField()
 ], BoldToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -342,7 +342,7 @@ class ItalicAnnotationAction extends contentState.TextSplittableAction {
   }
 }
 
-var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$x = (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;
@@ -381,7 +381,7 @@ class ItalicToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlim
 (() => {
   internalIconManager.VegaInternalIconManager.register({ italic });
 })();
-__decorate$v([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], ItalicToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -408,7 +408,7 @@ class UnderlineAnnotationAction extends contentState.TextSplittableAction {
   }
 }
 
-var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$w = (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;
@@ -450,7 +450,7 @@ class UnderlineToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonS
 (() => {
   internalIconManager.VegaInternalIconManager.register({ underline });
 })();
-__decorate$u([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentField()
 ], UnderlineToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -458,7 +458,7 @@ const textSize = {
   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="M64 128V96h96l0 320H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H256c17.7 0 32-14.3 32-32s-14.3-32-32-32H224l0-320h96v32c0 17.7 14.3 32 32 32s32-14.3 32-32V80c0-26.5-21.5-48-48-48H192 48C21.5 32 0 53.5 0 80v48c0 17.7 14.3 32 32 32s32-14.3 32-32zM384 304V288h64l0 128H432c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H512l0-128h64v16c0 17.7 14.3 32 32 32s32-14.3 32-32V272c0-26.5-21.5-48-48-48H368c-26.5 0-48 21.5-48 48v32c0 17.7 14.3 32 32 32s32-14.3 32-32z"/></svg>`,
 };
 
-var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$v = (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;
@@ -567,10 +567,10 @@ TextStylesToolbarButtonSlimmer.items = [
     label: 'Paragraph',
   },
 ];
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$t([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "focusController", void 0);
 
@@ -578,7 +578,7 @@ const TextSlash = {
   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="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L355.7 253.5 400.2 96H503L497 120.2c-4.3 17.1 6.1 34.5 23.3 38.8s34.5-6.1 38.8-23.3l11-44.1C577.6 61.3 554.7 32 523.5 32H376.1h-.3H204.5c-22 0-41.2 15-46.6 36.4l-6.3 25.2L38.8 5.1zm168 131.7c.1-.3 .2-.7 .3-1L217 96H333.7L301.3 210.8l-94.5-74.1zM243.3 416H192c-17.7 0-32 14.3-32 32s14.3 32 32 32H352c17.7 0 32-14.3 32-32s-14.3-32-32-32H309.8l17.6-62.1L272.9 311 243.3 416z"/></svg>`,
 };
 
-var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$u = (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;
@@ -614,7 +614,7 @@ class ClearStyleToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     'text-slash': TextSlash,
   });
 })();
-__decorate$s([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], ClearStyleToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -622,7 +622,7 @@ const codeSimple = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 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="M214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 214.6 118.6zm146.7 0L498.7 256 361.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3z"/></svg>`,
 };
 
-var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$t = (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;
@@ -659,7 +659,7 @@ class CodeToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
 (() => {
   internalIconManager.VegaInternalIconManager.register({ 'code-simple': codeSimple });
 })();
-__decorate$r([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], CodeToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -686,7 +686,7 @@ class StrikethroughAnnotationAction extends contentState.TextSplittableAction {
   }
 }
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$s = (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;
@@ -728,7 +728,7 @@ class StrikethroughToolbarButtonSlimmer extends imageAnnotationAction.ToolbarBut
 (() => {
   internalIconManager.VegaInternalIconManager.register({ strikethrough });
 })();
-__decorate$q([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], StrikethroughToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -755,7 +755,7 @@ class SelectionChangeAction extends contentState.AnnotationAction {
   }
 }
 
-var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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);
   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;
@@ -836,7 +836,7 @@ class LinkToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
 (() => {
   internalIconManager.VegaInternalIconManager.register({ link: link });
 })();
-__decorate$p([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], LinkToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -863,7 +863,7 @@ class IndentAnnotationAction extends contentState.AnnotationAction {
   }
 }
 
-var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$q = (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;
@@ -898,7 +898,7 @@ class MoreIndentToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
 (() => {
   internalIconManager.VegaInternalIconManager.register({ indent: indent });
 })();
-__decorate$o([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], MoreIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -906,7 +906,7 @@ const outdent = {
   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="M6 64C6 46.3 20.3 32 38 32H422c17.7 0 32 14.3 32 32s-14.3 32-32 32H38C20.3 96 6 81.7 6 64zM198 192c0-17.7 14.3-32 32-32H422c17.7 0 32 14.3 32 32s-14.3 32-32 32H230c-17.7 0-32-14.3-32-32zm32 96H422c17.7 0 32 14.3 32 32s-14.3 32-32 32H230c-17.7 0-32-14.3-32-32s14.3-32 32-32zM6 448c0-17.7 14.3-32 32-32H422c17.7 0 32 14.3 32 32s-14.3 32-32 32H38c-17.7 0-32-14.3-32-32zm.2-179.4c-8.2-6.4-8.2-18.9 0-25.3l101.9-79.3c10.5-8.2 25.8-.7 25.8 12.6V335.3c0 13.3-15.3 20.8-25.8 12.6L6.2 268.6z"/></svg>`,
 };
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (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;
@@ -942,7 +942,7 @@ class LessIndentToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
 (() => {
   internalIconManager.VegaInternalIconManager.register({ outdent: outdent });
 })();
-__decorate$n([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], LessIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -950,7 +950,7 @@ const image = {
   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="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"/></svg>`,
 };
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (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;
@@ -1007,13 +1007,13 @@ class ImageToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimm
 (() => {
   internalIconManager.VegaInternalIconManager.register({ image: image });
 })();
-__decorate$m([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "insertImageController", void 0);
-__decorate$m([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "imageInsertedEventEmitter", void 0);
-__decorate$m([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -1050,7 +1050,7 @@ class TransformParagraphAction extends nodeAnnotation_abstract.ModifyContentActi
   }
 }
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (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;
@@ -1108,14 +1108,14 @@ class BulletsToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSli
     }
   }
 }
-__decorate$l([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], BulletsToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$l([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], BulletsToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$m = (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;
@@ -1171,14 +1171,14 @@ class NumbersToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSli
     }
   }
 }
-__decorate$k([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], NumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$k([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], NumbersToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (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;
@@ -1227,16 +1227,16 @@ class BulletsNumbersToolbarButtonSlimmer extends imageAnnotationAction.ToolbarBu
     'list-ol': ListOL,
   });
 })();
-__decorate$j([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$j([
+__decorate$l([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "bulletsToolbarButtonSlimmer", void 0);
-__decorate$j([
+__decorate$l([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "numbersToolbarButtonSlimmer", void 0);
-__decorate$j([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentMethod('componentWillRender')
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
@@ -1263,7 +1263,7 @@ const AlignLeft = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 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="M288 64c0 17.7-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32H256c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`,
 };
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (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;
@@ -1298,10 +1298,10 @@ class LeftAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonS
     'align-left': AlignLeft,
   });
 })();
-__decorate$i([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$i([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1309,7 +1309,7 @@ const AlignCenter = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 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="M352 64c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H320c17.7 0 32-14.3 32-32zm96 128c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32zM0 448c0 17.7 14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM352 320c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H320c17.7 0 32-14.3 32-32z"/></svg>`,
 };
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (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;
@@ -1344,10 +1344,10 @@ class CenterAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButto
     'align-center': AlignCenter,
   });
 })();
-__decorate$h([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$h([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1355,7 +1355,7 @@ const AlignRight = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 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="M448 64c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`,
 };
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (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;
@@ -1390,10 +1390,10 @@ class RightAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     'align-right': AlignRight,
   });
 })();
-__decorate$g([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$g([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1401,7 +1401,7 @@ const AlignJustify = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 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="M448 64c0-17.7-14.3-32-32-32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32zm0 256c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32zM0 192c0 17.7 14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM448 448c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32z"/></svg>`,
 };
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (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;
@@ -1436,14 +1436,14 @@ class JustifyAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButt
     'align-justify': AlignJustify,
   });
 })();
-__decorate$f([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], JustifyAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$f([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], JustifyAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (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;
@@ -1495,22 +1495,22 @@ class HorizontalAlignmentToolbarButtonSlimmer extends imageAnnotationAction.Tool
     return false;
   }
 }
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "leftAlignToolbarButtonSlimmer", void 0);
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "centerAlignToolbarButtonSlimmer", void 0);
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "rightAlignToolbarButtonSlimmer", void 0);
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "justifiedToolbarButtonSlimmer", void 0);
-__decorate$e([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentMethod('componentWillRender')
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
@@ -1853,7 +1853,7 @@ class RTERange {
   }
 }
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+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;
@@ -1974,17 +1974,22 @@ class SelectionController extends globalSlimmerRegistry.VegaSlimmer {
    */
   setSelectionRange(range) {
     const selection = this.getSelection();
-    selection.removeAllRanges();
-    selection.addRange(range);
-    this.saveSelection();
+    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, so we should not update the RTERange
-    if (selection && selection.rangeCount > 0 && this.updateCaretPositionTaskQueue.queue.length === 0) {
+    // 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);
@@ -2102,38 +2107,41 @@ class SelectionController extends globalSlimmerRegistry.VegaSlimmer {
   }
 }
 SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME = 50;
-__decorate$d([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], SelectionController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$d([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], SelectionController.prototype, "selectionMap", void 0);
-__decorate$d([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], SelectionController.prototype, "host", void 0);
-__decorate$d([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], SelectionController.prototype, "value", void 0);
-__decorate$d([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], SelectionController.prototype, "valueController", void 0);
-__decorate$d([
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], SelectionController.prototype, "insertCompositionTextController", void 0);
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], SelectionController.prototype, "connectedCallback", null);
-__decorate$d([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], SelectionController.prototype, "disconnectedCallback", null);
-__decorate$d([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], SelectionController.prototype, "componentDidLoad", null);
-__decorate$d([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('watchValueUpdate')
 ], SelectionController.prototype, "watchValueUpdate", null);
-__decorate$d([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('componentDidUpdate')
 ], SelectionController.prototype, "updateCaretPosition", null);
 
-var __decorate$c = (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;
@@ -2204,32 +2212,32 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
   }
 }
 ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
-__decorate$c([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "host", void 0);
-__decorate$c([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], ValueController.prototype, "value", void 0);
-__decorate$c([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "changeEventEmitter", void 0);
-__decorate$c([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "valueController", void 0);
-__decorate$c([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], ValueController.prototype, "connectedCallback", null);
-__decorate$c([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], ValueController.prototype, "disconnectedCallback", null);
-__decorate$c([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], ValueController.prototype, "componentWillLoad", null);
-__decorate$c([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentMethod('watchValueUpdate')
 ], ValueController.prototype, "watchValueUpdate", null);
 
-var __decorate$b = (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;
@@ -2262,13 +2270,13 @@ class DarkModeStateControllerSlimmer extends globalSlimmerRegistry.VegaSlimmer {
     return true;
   }
 }
-__decorate$b([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], DarkModeStateControllerSlimmer.prototype, "isInDarkMode", void 0);
-__decorate$b([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], DarkModeStateControllerSlimmer.prototype, "connectedCallback", null);
-__decorate$b([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], DarkModeStateControllerSlimmer.prototype, "disconnectResizeObserver", null);
 
@@ -2288,21 +2296,6 @@ class RichTextContentController {
   }
 }
 
-/**
- * Replace the text node selected content to new text
- *
- * @example selectedNode.apply(new ReplaceSelectedTextAction(insertText))
- */
-class ReplaceSelectedTextAction extends nodeAnnotation_abstract.ModifyContentAction {
-  constructor(text, currentRange) {
-    super();
-    this.type = nodeAnnotation_abstract.ModifyContentActionType.REPLACE_SELECTED_TEXT;
-    this.textToBeInsert = '';
-    this.textToBeInsert = text;
-    this.currentRange = currentRange;
-  }
-}
-
 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 {
@@ -2311,30 +2304,14 @@ class BaseHandler {
    *
    * @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, event) {
+  execute(currentState, selectionController, richTextEditor, event) {
     this.initCurrentStateAndSelection(currentState, selectionController);
+    this.setCurrentRichTextEditor(richTextEditor);
     this.handleEvent(event);
   }
-  /**
-   * Replaces the selected nodes with the provided text.
-   *
-   * @param {string} text - The insert text
-   * @returns {RTENode} - The selected start node
-   */
-  replaceSelectedNodesWithText(text) {
-    const selectedNodes = this.selectionController.getSelectedNodes();
-    const range = this.selectionController.getCurrentRange();
-    const { startContainer, endContainer } = range;
-    const result = this.removeSelectionRange();
-    const startNode = selectedNodes[0];
-    if (startNode instanceof contentState.RTETextNode && text) {
-      startNode.apply(new contentState.UpdateTextAction(startNode.text + text));
-    }
-    this.mergeRangeStartAndEnd(startContainer, endContainer);
-    return result;
-  }
   /**
    * The function `isRootContainer` checks if an HTML element is a root container with a class of 'rich-text-content'.
    *
@@ -2356,105 +2333,22 @@ class BaseHandler {
     return node && node.childNodes && node.childNodes.length === 0;
   }
   /**
-   * Removes the selected text at the start and end of a range in a Rich Text Editor.
+   * 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.
    */
-  removeRangeStartAndEndSelectedText() {
+  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();
-    const currentRange = this.selectionController.getCurrentRange();
-    if (selectedNodes[0] instanceof contentState.RTETextNode) {
-      selectedNodes[0].apply(new ReplaceSelectedTextAction('', currentRange));
-    }
-    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof contentState.RTETextNode) {
-      selectedNodes[selectedNodes.length - 1].apply(new ReplaceSelectedTextAction('', currentRange));
-    }
+    return range.startNode || selectedNodes[0];
   }
   /**
-   * Merges text nodes in a rich text editor.
+   * Creates a new paragraph with an empty text node and returns it.
    *
-   * @param {Node} startContainer - Start text node element
-   * @param {Node} endContainer - End text node element
-   */
-  mergeRangeStartAndEnd(startContainer, endContainer) {
-    if (startContainer !== endContainer) {
-      if (startContainer.nodeType === Node.TEXT_NODE && endContainer.nodeType === Node.TEXT_NODE) {
-        const selectedNodes = this.selectionController.getSelectedNodes();
-        const startRTENode = selectedNodes[0];
-        const endRTENode = selectedNodes[selectedNodes.length - 1];
-        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));
-            if (startRTENode.parentBlock === endRTENode.parentBlock) {
-              startRTENode.parentBlock.apply(new contentState.RemoveChildAction(endRTENode));
-            }
-            else {
-              endRTENode.parentBlock.apply(new contentState.RemoveChildAction(endRTENode.parentBlock.nodes[0]));
-            }
-          }
-          if (startRTENode.parentBlock !== endRTENode.parentBlock) {
-            startRTENode.parentBlock.apply(new contentState.AppendChildNodesAction(endBlock.nodes));
-            endBlock.nodes = [];
-          }
-          if (endBlock.nodes.length < 1) {
-            endBlock.parent.apply(new contentState.RemoveChildAction(endBlock));
-          }
-        }
-      }
-    }
-  }
-  /**
-   * Removes selected nodes within a range in a rich text editor content.
-   * The method is only used for different nodes are selected
-   *
-   * @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() {
-    const range = this.selectionController.getCurrentRange();
-    const selectedNodes = this.selectionController.getSelectedNodes();
-    const { endOffset, startOffset } = range;
-    const startNode = selectedNodes[0];
-    const endNode = selectedNodes[selectedNodes.length - 1];
-    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') {
-          return item !== startNode && item !== endNode;
-        }
-        else {
-          return item !== startNode && (item !== endNode || (item === endNode && endOffset !== 0));
-        }
-      });
-      shouldRemovedItems.forEach((item) => {
-        item.parentBlock.apply(new contentState.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
-     */
-    if (startNode instanceof contentState.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));
-        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));
-        return startNode.parentBlock.nodes[0];
-      }
-    }
-    return startNode;
-  }
-  /**
-   * 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.
+   * @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');
@@ -2462,18 +2356,6 @@ class BaseHandler {
     paragraph.apply(new contentState.AppendChildNodesAction([textNode]));
     return paragraph;
   }
-  /**
-   * Compares the annotations of two RTETextNodes to determine if they can be merged.
-   *
-   * @param {RTETextNode} nodeA - node A
-   * @param {RTETextNode} nodeB - node B
-   * @returns {boolean} true or false
-   */
-  shouldMergeTextNode(nodeA, nodeB) {
-    const { annotations: annotationsA } = nodeA.toJSON();
-    const { annotations: annotationsB } = nodeB.toJSON();
-    return JSON.stringify(annotationsA) === JSON.stringify(annotationsB);
-  }
   /**
    * The function initializes the current state and selection controller in TypeScript.
    *
@@ -2484,6 +2366,14 @@ class BaseHandler {
     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;
+  }
 }
 
 /**
@@ -2500,6 +2390,21 @@ class InsertNodesBeforeAction extends nodeAnnotation_abstract.ModifyContentActio
   }
 }
 
+/**
+ * Replace the text node selected content to new text
+ *
+ * @example selectedNode.apply(new ReplaceSelectedTextAction(insertText))
+ */
+class ReplaceSelectedTextAction extends nodeAnnotation_abstract.ModifyContentAction {
+  constructor(text, currentRange) {
+    super();
+    this.type = nodeAnnotation_abstract.ModifyContentActionType.REPLACE_SELECTED_TEXT;
+    this.textToBeInsert = '';
+    this.textToBeInsert = text;
+    this.currentRange = currentRange;
+  }
+}
+
 /** Handles inserting text into a VegaRTEContent based on the current selection and input event. User input character will trigger this callback */
 class InsertTextHandler extends BaseHandler {
   /**
@@ -2543,10 +2448,11 @@ class InsertTextHandler extends BaseHandler {
     }
     else {
       // The selected nodes is multiple nodes
-      const cursorNode = this.replaceSelectedNodesWithText(text);
-      this.selectionController.enqueueSelectionRangeFutureState(cursorNode, cursorNode instanceof contentState.RTETextNode
-        ? Math.min(startOffset + text.length, cursorNode.text.length)
-        : startOffset);
+      const cursorNode = this.removeSelectionRange(true);
+      if (cursorNode instanceof contentState.RTETextNode) {
+        cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
+        this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(startOffset + text.length, cursorNode.text.length));
+      }
     }
   }
   /**
@@ -2743,11 +2649,13 @@ class InsertLineBreakHandler extends BaseHandler {
    * </p>
    */
   breakNewBlock() {
-    const newBlock = new contentState.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
-    const lineBreakNode = this.createLineBreakNode(newBlock);
-    newBlock.apply(new contentState.AppendChildNodesAction([this.createLineBreakNode(newBlock), lineBreakNode]));
-    this.currentState.apply(new contentState.AppendChildNodesAction([newBlock]));
-    this.switchCaretPositionToSpecifiedNode(lineBreakNode);
+    if (this.currentState &&
+      this.currentState.blocks[0] &&
+      this.currentState.blocks[0] instanceof contentState.RTETextBlock) {
+      const lineBreakAction = new LineBreakSingleBlockAction(this.currentState.blocks[0].nodes[0], 0);
+      this.currentState.blocks[0].apply(lineBreakAction);
+      this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
+    }
   }
   /**
    * If the selected node is a text node
@@ -2784,7 +2692,7 @@ class InsertLineBreakHandler extends BaseHandler {
   /**
    * Moves the caret to the next node element in a rich text editor.
    *
-   * @param {RTETextNode} lineBreakNode - Represents a node element in a rich text editor.
+   * @param {RTENode} lineBreakNode - Represents a node element in a rich text editor.
    */
   switchCaretPositionToSpecifiedNode(lineBreakNode) {
     this.selectionController.enqueueSelectionRangeFutureState(this.getNextRTENode(lineBreakNode), 0);
@@ -2800,15 +2708,6 @@ class InsertLineBreakHandler extends BaseHandler {
     const nextNode = lineBreakNode.parentBlock['nodes'][index + 1];
     return nextNode || lineBreakNode;
   }
-  /**
-   * Create a null text that will render a br element in a rich text editor.
-   *
-   * @param {RTEBlock} block - Represents a block element in a rich text editor.
-   * @returns {RTETextNode} the new line break node.
-   */
-  createLineBreakNode(block) {
-    return new contentState.RTETextNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), '\n', block);
-  }
 }
 
 /**
@@ -2868,21 +2767,12 @@ class DeleteContentHandler extends BaseHandler {
       }
     }
   }
-  /**
-   * Creates a new paragraph element with a text node and appends it to the current state.
-   */
-  insertDefaultParagraph() {
-    const paragraph = this.createEmptyParagraph();
-    this.currentState.apply(new contentState.AppendChildNodesAction([paragraph]));
-    this.selectionController.enqueueSelectionRangeFutureState(paragraph.nodes[0], 1);
-  }
   /**
    * Deletes the content within multiple nodes selected by the user.
    */
   deleteContentWithMultipleNodes() {
-    const range = this.selectionController.getCurrentRange();
     const selectedNodes = this.selectionController.getSelectedNodes();
-    const cursorNode = this.replaceSelectedNodesWithText('');
+    const cursorNode = this.removeSelectionRange(true);
     const lastSelectedNode = selectedNodes[selectedNodes.length - 1];
     if (selectedNodes.length > 1 &&
       lastSelectedNode instanceof contentState.RTETextNode &&
@@ -2890,7 +2780,6 @@ class DeleteContentHandler extends BaseHandler {
       lastSelectedNode.parentBlock.apply(new contentState.RemoveChildAction(lastSelectedNode));
     }
     this.convertFirstBlockToParagraph(cursorNode.parentBlock);
-    this.selectionController.enqueueSelectionRangeFutureState(cursorNode, range.startOffset);
   }
   /**
    * If the first block is not paragraph, convert the block to paragraph after delete all text
@@ -2910,6 +2799,14 @@ class DeleteContentHandler extends BaseHandler {
       block.parent.apply(new contentState.RemoveChildAction(block));
     }
   }
+  /**
+   * Creates a new paragraph element with a text node and appends it to the current state.
+   */
+  insertDefaultParagraph() {
+    const paragraph = this.createEmptyParagraph();
+    this.currentState.apply(new contentState.AppendChildNodesAction([paragraph]));
+    this.selectionController.enqueueSelectionRangeFutureState(paragraph.nodes[0], 1);
+  }
   /**
    * Returns the end offset of a given node in a Rich Text Editor based on its type and text content.
    *
@@ -3828,8 +3725,8 @@ class InsertPasteHandler extends BaseHandler {
    */
   insertBlocksToContent(blocks) {
     const cursorNode = this.removeSelectionRange();
-    const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parentBlock;
-    if (currentBlock) {
+    if (cursorNode && cursorNode.parentBlock) {
+      const currentBlock = cursorNode.parentBlock;
       const { startOffset } = this.selectionController.getCurrentRange();
       const breakAction = new contentState.SplitBlockWithNodeAction(cursorNode, startOffset);
       currentBlock.apply(breakAction);
@@ -3877,13 +3774,13 @@ class InsertPasteHandler extends BaseHandler {
   }
 }
 
-var __decorate$a = (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;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/** Used to monitoring the user input actions by event listener and mutationObserver */
+/** Used to monitoring the user input actions by event listener */
 class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -3892,91 +3789,47 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
     this.insertLineBreakHandler = new InsertLineBreakHandler();
     this.deleteContentHandler = new DeleteContentHandler();
     this.insertPasteHandler = new InsertPasteHandler();
-    this.observerOptions = {
-      characterData: true,
-      characterDataOldValue: true,
-      subtree: true,
-      childList: true,
-    };
     /**
      * When a user performs an input action within the editable element, this function is triggered.
      *
      * @param {InputEvent} e the before input event object
      */
     this.handleUserInputAction = (e) => {
-      this.removeObserver();
+      const inputType = e.inputType;
       e.preventDefault();
       this.initValueIfEmpty();
+      // The insertCompositionText type input event can not be prevented, so we process the current action by insertCompositionTextController.
+      if (inputType === 'insertCompositionText') {
+        return;
+      }
+      this.insertCompositionTextController.removeObserver();
       let updateFlag = false;
-      switch (e.inputType) {
+      switch (inputType) {
         case 'insertParagraph':
           updateFlag = true;
-          this.insertParagraphHandler.execute(this.value, this.selectionController, e);
+          this.insertParagraphHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'insertText':
           updateFlag = true;
-          this.insertTextHandler.execute(this.value, this.selectionController, e);
+          this.insertTextHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'insertLineBreak':
           updateFlag = true;
-          this.insertLineBreakHandler.execute(this.value, this.selectionController, e);
+          this.insertLineBreakHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'deleteContentBackward':
           updateFlag = true;
-          this.deleteContentHandler.execute(this.value, this.selectionController, e);
+          this.deleteContentHandler.execute(this.value, this.selectionController, this.host, e);
           break;
         case 'insertFromPaste':
           updateFlag = true;
-          this.insertPasteHandler.execute(this.value, this.selectionController, e);
+          this.insertPasteHandler.execute(this.value, this.selectionController, this.host, e);
           break;
       }
       if (updateFlag) {
         this.notifyComponentFlushValue();
       }
     };
-    /**
-     * Processes mutation records related to character data and updates the text content of a rich text node accordingly.
-     *
-     * @param {MutationRecord[]} records - Each `MutationRecord` object represents a single mutation that occurred in the DOM.
-     */
-    this.handleObserver = (records) => {
-      let updateFlag = false;
-      if (records.every((record) => record.type === 'characterData')) {
-        records.forEach((record) => {
-          const { target } = record;
-          if (target.nodeType === Node.TEXT_NODE && target.parentElement) {
-            const richTextNode = nodeAnnotation_abstract.stateEntityRenderingRegistry.getEntityByDOM(target.parentElement);
-            if (richTextNode && richTextNode['text'] !== target.textContent) {
-              updateFlag = true;
-              richTextNode['text'] = target.textContent;
-            }
-          }
-        });
-        if (updateFlag) {
-          this.notifyComponentFlushValue();
-        }
-      }
-    };
-  }
-  /**
-   * The function `initMutationObserver` initializes a MutationObserver on an editable HTML element if it exists.
-   */
-  initMutationObserver() {
-    if (this.mutationObserver) {
-      const editableElement = this.getEditableElementRef();
-      if (editableElement) {
-        this.mutationObserver.disconnect();
-        this.mutationObserver.observe(editableElement, this.observerOptions);
-      }
-    }
-  }
-  /**
-   * Disconnects the mutation observer if it exists.
-   */
-  removeObserver() {
-    if (this.mutationObserver) {
-      this.mutationObserver.disconnect();
-    }
   }
   /**
    * Adds event listener to an editable HTML element to handle user input actions.
@@ -3987,8 +3840,6 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
       editableElement.addEventListener('beforeinput', this.handleUserInputAction);
       editableElement.addEventListener('drop', this.preventDropEvent);
     }
-    this.mutationObserver = new MutationObserver(this.handleObserver);
-    this.initMutationObserver();
   }
   /**
    * Removes event listener for user input actions from an editable HTML div element.
@@ -3999,13 +3850,6 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
       editableElement.removeEventListener('beforeinput', this.handleUserInputAction);
       editableElement.removeEventListener('drop', this.preventDropEvent);
     }
-    this.removeObserver();
-  }
-  /**
-   * re-connect the observer after the props change and component did render
-   */
-  reConnectObserver() {
-    this.initMutationObserver();
   }
   /**
    * The function `getEditableElementRef` returns a reference to the editable HTMLDivElement within a rich text editor.
@@ -4045,30 +3889,30 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$a([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "host", void 0);
-__decorate$a([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "value", void 0);
-__decorate$a([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "valueController", void 0);
-__decorate$a([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$a([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "selectionController", void 0);
-__decorate$a([
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], UserInputController.prototype, "insertCompositionTextController", void 0);
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], UserInputController.prototype, "addActionListener", null);
-__decorate$a([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], UserInputController.prototype, "removeActionListener", null);
-__decorate$a([
-  globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
-], UserInputController.prototype, "reConnectObserver", null);
 
 /**
  * A rule that checks if the input range is empty or not
@@ -4144,7 +3988,7 @@ class InsertImageToBlockAction extends nodeAnnotation_abstract.ModifyContentActi
   }
 }
 
-var __decorate$9 = (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;
@@ -4233,26 +4077,26 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$9([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "selectionController", void 0);
-__decorate$9([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "value", void 0);
-__decorate$9([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "valueController", void 0);
-__decorate$9([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$9([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], InsertImageController.prototype, "registerObserver", null);
-__decorate$9([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], InsertImageController.prototype, "unRegisterObserver", null);
 
-var __decorate$8 = (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;
@@ -4308,20 +4152,20 @@ class FocusController extends globalSlimmerRegistry.VegaSlimmer {
     this.selectionController.setSelectionRange(range);
   }
 }
-__decorate$8([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$8([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "selectionController", void 0);
-__decorate$8([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "valueController", void 0);
-__decorate$8([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "value", void 0);
 
-var __decorate$7 = (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;
@@ -4361,46 +4205,461 @@ class TextNodeColorController extends globalSlimmerRegistry.VegaSlimmer {
     return true;
   }
 }
-__decorate$7([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], TextNodeColorController.prototype, "connectedCallback", null);
-__decorate$7([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], TextNodeColorController.prototype, "disconnectResizeObserver", null);
 
-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:2px;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))}: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.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:2px;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;cursor:pointer;justify-content:center;align-items:center;margin-left:6px}.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) {
+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;
+  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;
 };
-const VegaRichTextEditor = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.vegaChange = index.createEvent(this, "vegaChange", 7);
-    this.change = index.createEvent(this, "change", 7);
-    this.vegaImageInserted = index.createEvent(this, "vegaImageInserted", 7);
-    this.imageInserted = index.createEvent(this, "imageInserted", 7);
-    this.globalSlimmers = {};
-    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
-    this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
-      propertyRules: [
-        {
-          propertyName: 'required',
-          ruleFactory: (isRequired) => isRequired ? new RichTextEditorRequiredRule() : null,
-        },
-      ],
-      validationRulesName: 'validationRules',
-      defaultValue: null,
-      attributeGetter: (propertyName) => this[propertyName],
-      inputContainerGetter: () => this.vegaRichTextEditorRenderer.getRichTextContainerRef(),
-      touchableAreaGetter: () => [this.vegaRichTextEditorRenderer.getRichTextContentRef()],
+/** Handles inserting composition text into a VegaRTEContent based on the current selection and input event. User input character will trigger this callback */
+class InsertCompositionTextController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.insertCompositionTextEndFlag = true;
+    this.observerOptions = {
+      characterData: true,
+      characterDataOldValue: true,
+      subtree: true,
+      childList: true,
+    };
+    /**
+     * The current method is called when the insert text is update by the Pinyin input or the word correction plugin.
+     *
+     * @param {MutationRecord[]} records - The mutation record object array.
+     */
+    this.updateTextFromDom = (records) => {
+      let updateFlag = false;
+      if (this.insertCompositionTextEndFlag !== false) {
+        records.forEach((record) => {
+          const { target, oldValue } = record;
+          if (target.nodeType === Node.TEXT_NODE && target.parentElement) {
+            const richTextNode = nodeAnnotation_abstract.stateEntityRenderingRegistry.getEntityByDOM(target.parentElement);
+            const newValue = target.textContent;
+            if (richTextNode instanceof contentState.RTETextNode) {
+              updateFlag = this.updateCurrentNodeText(richTextNode, newValue, oldValue);
+            }
+            else if (newValue) {
+              // The text element should removed if insert text to the image block.
+              target.parentElement.removeChild(target);
+              updateFlag = true;
+            }
+          }
+        });
+      }
+      if (updateFlag) {
+        void this.valueController.flushChanges(this.value);
+      }
+    };
+    /**
+     * Processes mutation records related to character data and updates the text content of a rich text node accordingly.
+     *
+     * @param {MutationRecord[]} records - Each `MutationRecord` object represents a single mutation that occurred in the DOM.
+     */
+    this.handleObserver = (records) => {
+      if (records.every((record) => record.type === 'characterData')) {
+        this.updateTextFromDom(records);
+      }
+    };
+    /**
+     * An event handler function that is triggered when the composition of text input starts. In this case,
+     *  it sets the `insertCompositionTextEndFlag` property of the `UserInputController` class to `false`.
+     */
+    this.handleCompositionStart = () => {
+      this.insertCompositionTextEndFlag = false;
+      changeManager.ChangeManager.notify(domNodeSubjectFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditDeleteSelectedNodes), { host: this.host, detail: true });
+    };
+    /**
+     * An event handler function that is triggered when the composition of text input ends. In this case,
+     *  it sets the `insertCompositionTextEndFlag` property of the `UserInputController` class to `true`.
+     *
+     * @param {CompositionEvent} event The composition event instance
+     */
+    this.handleCompositionEnd = (event) => {
+      this.insertCompositionTextEndFlag = true;
+      const insertData = event.data;
+      if (insertData) {
+        this.dispatchInsertTextEvent(insertData);
+      }
+    };
+  }
+  /**
+   * The function `initMutationObserver` initializes a MutationObserver on an editable HTML element if it exists.
+   */
+  initMutationObserver() {
+    if (this.mutationObserver) {
+      const editableElement = this.getEditableElementRef();
+      if (editableElement) {
+        this.mutationObserver.disconnect();
+        this.mutationObserver.observe(editableElement, this.observerOptions);
+      }
+    }
+  }
+  /**
+   * Disconnects the mutation observer if it exists.
+   */
+  removeObserver() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  }
+  /**
+   * The method is to get the composition text insert end or not.
+   *
+   * @returns {boolean} The false is main that insert composition text process is end.
+   */
+  isComposing() {
+    return !this.insertCompositionTextEndFlag;
+  }
+  /**
+   * Adds event listener to an editable HTML element to handle composition text insert actions.
+   */
+  addCompositionTextEventListener() {
+    const editableElement = this.getEditableElementRef();
+    if (editableElement) {
+      editableElement.addEventListener('compositionstart', this.handleCompositionStart);
+      editableElement.addEventListener('compositionend', this.handleCompositionEnd);
+    }
+    this.mutationObserver = new MutationObserver(this.handleObserver);
+    this.initMutationObserver();
+  }
+  /**
+   * Removes event listener to an editable HTML element to handle composition text insert actions.
+   */
+  removeCompositionTextEventListener() {
+    const editableElement = this.getEditableElementRef();
+    if (editableElement) {
+      editableElement.removeEventListener('compositionstart', this.handleCompositionStart);
+      editableElement.removeEventListener('compositionend', this.handleCompositionEnd);
+    }
+    this.removeObserver();
+  }
+  /**
+   * re-connect the observer after the props change and component did render
+   */
+  reConnectObserver() {
+    this.initMutationObserver();
+  }
+  /**
+   * Insert text to a line break node need a special logic if the line break has a next text node.
+   *
+   * @param {RTETextNode} currentNode The current line break node, the text value is \n
+   */
+  appendLineBreakNode(currentNode) {
+    const textBlock = currentNode.parentBlock;
+    const index = textBlock.nodes.indexOf(currentNode);
+    if (textBlock.nodes[index + 1]) {
+      const newTextNode = currentNode.cloneWithText('\n');
+      textBlock.apply(new InsertNodesBeforeAction(textBlock.nodes[index + 1], newTextNode));
+    }
+  }
+  /**
+   * Updates the text content of a rich text node and handles line breaks.
+   *
+   * @param {RTETextNode} richTextNode - The current rich text node.
+   * @param {string} newValue - The target element textContent
+   * @param {Nullable<string>} oldValue - The target element old textContent
+   * @returns {Nullable<boolean>} The node text is updated or not
+   */
+  updateCurrentNodeText(richTextNode, newValue, oldValue) {
+    const insertText = this.removeZeroWidthSpace(newValue.replace(/(\n)$/, ''));
+    if (richTextNode.text !== insertText) {
+      const { startOffset } = this.selectionController.getCurrentRange();
+      const currentIsLineBreakNode = richTextNode.text === '\n';
+      richTextNode.apply(new contentState.UpdateTextAction(insertText));
+      if (currentIsLineBreakNode) {
+        this.appendLineBreakNode(richTextNode);
+      }
+      const lengthGap = oldValue ? oldValue.length - newValue.length : 0;
+      const newOffset = Math.min(insertText.length, startOffset - lengthGap);
+      this.selectionController.enqueueSelectionRangeFutureState(richTextNode, Math.max(0, newOffset));
+      return true;
+    }
+  }
+  /**
+   * The function `getEditableElementRef` returns a reference to the editable HTMLDivElement within a rich text editor.
+   *
+   * @returns {HTMLDivElement|null} A reference to an HTMLDivElement element that is editable.
+   */
+  getEditableElementRef() {
+    if (!this.editableElementRef) {
+      this.editableElementRef = this.vegaRichTextEditorRenderer.getRTEEditableElementRef();
+    }
+    return this.editableElementRef;
+  }
+  /**
+   * Remove the ZERO_WIDTH_SPACE from the text.
+   *
+   * @param {string} text The input text that could include ZERO_WIDTH_SPACE.
+   * @returns {string} The result text.
+   */
+  removeZeroWidthSpace(text) {
+    if (text.startsWith(contentState.ZERO_WIDTH_SPACE)) {
+      return text.slice(contentState.ZERO_WIDTH_SPACE.length);
+    }
+    else if (text.endsWith(contentState.ZERO_WIDTH_SPACE)) {
+      return text.slice(0, text.length - contentState.ZERO_WIDTH_SPACE.length);
+    }
+    return text;
+  }
+  /**
+   * Dispatch a insert text event to handle the composition text insert logic.
+   *
+   * @param {string} text - The text need to insert.
+   */
+  dispatchInsertTextEvent(text) {
+    const inputEvent = new CustomEvent('beforeinput');
+    inputEvent['data'] = text;
+    inputEvent['inputType'] = 'insertText';
+    this.editableElementRef.dispatchEvent(inputEvent);
+  }
+}
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertCompositionTextController.prototype, "selectionController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertCompositionTextController.prototype, "host", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertCompositionTextController.prototype, "value", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertCompositionTextController.prototype, "valueController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertCompositionTextController.prototype, "userInputController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertCompositionTextController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], InsertCompositionTextController.prototype, "addCompositionTextEventListener", null);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], InsertCompositionTextController.prototype, "removeCompositionTextEventListener", null);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
+], InsertCompositionTextController.prototype, "reConnectObserver", null);
+
+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 `DeleteSelectedNodesController` class provides methods to delete selected nodes.
+ */
+class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Deletes the selected nodes.
+     *
+     * @param {NotifyObserverPayload<boolean>} payload The notify payload
+     * @param {boolean} payload.detail The delete process need merge start node and end node or not, default value is true.
+     */
+    this.deleteActionProcess = (payload) => {
+      const range = this.selectionController.getCurrentRange();
+      const { startContainer, endContainer, startOffset, endOffset } = range;
+      if (startContainer !== endContainer || startOffset !== endOffset) {
+        const cursorNode = this.removeSelectionRange();
+        const mergeStartAndEndFlag = payload && payload.detail ? payload.detail : false;
+        if (mergeStartAndEndFlag) {
+          this.mergeRangeStartAndEnd(startContainer, endContainer);
+        }
+        this.selectionController.enqueueSelectionRangeFutureState(cursorNode, range.startOffset);
+      }
+    };
+  }
+  /**
+   * Adds the observer to the host element.
+   */
+  addDeleteObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, vegaInternalEventId.VegaInternalRichTextEditDeleteSelectedNodes, this.deleteActionProcess);
+  }
+  /**
+   * Removes the observer from the host element.
+   */
+  removeDeleteObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, vegaInternalEventId.VegaInternalRichTextEditDeleteSelectedNodes);
+  }
+  /**
+   * Removes selected nodes within a range in a rich text editor content.
+   * The method is only used for different nodes are selected
+   *
+   * @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() {
+    const range = this.selectionController.getCurrentRange();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const { endOffset, startOffset } = range;
+    const startNode = selectedNodes[0];
+    const endNode = selectedNodes[selectedNodes.length - 1];
+    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') {
+          return item !== startNode && item !== endNode;
+        }
+        else {
+          return item !== startNode && (item !== endNode || (item === endNode && endOffset !== 0));
+        }
+      });
+      shouldRemovedItems.forEach((item) => {
+        item.parentBlock.apply(new contentState.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
+     */
+    if (startNode instanceof contentState.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));
+        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));
+        return startNode.parentBlock.nodes[0];
+      }
+    }
+    return startNode;
+  }
+  /**
+   * Removes the selected text at the start and end of a range in a Rich Text Editor.
+   */
+  removeRangeStartAndEndSelectedText() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const currentRange = this.selectionController.getCurrentRange();
+    if (selectedNodes[0] instanceof contentState.RTETextNode) {
+      selectedNodes[0].apply(new ReplaceSelectedTextAction('', currentRange));
+    }
+    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof contentState.RTETextNode) {
+      selectedNodes[selectedNodes.length - 1].apply(new ReplaceSelectedTextAction('', currentRange));
+    }
+  }
+  /**
+   * 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;
+  }
+  /**
+   * Merges text nodes in a rich text editor.
+   *
+   * @param {Node} startContainer - Start text node element
+   * @param {Node} endContainer - End text node element
+   */
+  mergeRangeStartAndEnd(startContainer, endContainer) {
+    if (startContainer !== endContainer) {
+      if (startContainer.nodeType === Node.TEXT_NODE && endContainer.nodeType === Node.TEXT_NODE) {
+        const selectedNodes = this.selectionController.getSelectedNodes();
+        const startRTENode = selectedNodes[0];
+        const endRTENode = selectedNodes[selectedNodes.length - 1];
+        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));
+            if (startRTENode.parentBlock === endRTENode.parentBlock) {
+              startRTENode.parentBlock.apply(new contentState.RemoveChildAction(endRTENode));
+            }
+            else {
+              endRTENode.parentBlock.apply(new contentState.RemoveChildAction(endRTENode.parentBlock.nodes[0]));
+            }
+          }
+          if (startRTENode.parentBlock !== endRTENode.parentBlock) {
+            startRTENode.parentBlock.apply(new contentState.AppendChildNodesAction(endBlock.nodes));
+            endBlock.nodes = [];
+          }
+          if (endBlock.nodes.length < 1) {
+            endBlock.parent.apply(new contentState.RemoveChildAction(endBlock));
+          }
+        }
+      }
+    }
+  }
+  /**
+   * Compares the annotations of two RTETextNodes to determine if they can be merged.
+   *
+   * @param {RTETextNode} nodeA - node A
+   * @param {RTETextNode} nodeB - node B
+   * @returns {boolean} true or false
+   */
+  shouldMergeTextNode(nodeA, nodeB) {
+    const { annotations: annotationsA } = nodeA.toJSON();
+    const { annotations: annotationsB } = nodeB.toJSON();
+    return JSON.stringify(annotationsA) === JSON.stringify(annotationsB);
+  }
+}
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], DeleteSelectedNodesController.prototype, "host", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], DeleteSelectedNodesController.prototype, "selectionController", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], DeleteSelectedNodesController.prototype, "value", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], DeleteSelectedNodesController.prototype, "addDeleteObserver", null);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], DeleteSelectedNodesController.prototype, "removeDeleteObserver", null);
+
+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:2px;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))}: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.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:2px;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;cursor:pointer;justify-content:center;align-items:center;margin-left:6px}.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) {
+  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;
+};
+const VegaRichTextEditor = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
+    this.vegaImageInserted = index.createEvent(this, "vegaImageInserted", 7);
+    this.imageInserted = index.createEvent(this, "imageInserted", 7);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => isRequired ? new RichTextEditorRequiredRule() : null,
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: null,
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.vegaRichTextEditorRenderer.getRichTextContainerRef(),
+      touchableAreaGetter: () => [this.vegaRichTextEditorRenderer.getRichTextContentRef()],
     });
     this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditor, domNodeSubjectFactory.VegaChange);
     this.vegaRichTextEditorRenderer = new VegaRichTextEditorRenderer();
@@ -4428,9 +4687,11 @@ const VegaRichTextEditor = class {
     this.richTextContentController = new RichTextContentController(this);
     this.userInputController = new UserInputController();
     this.insertImageController = new InsertImageController();
+    this.insertCompositionTextController = new InsertCompositionTextController();
     this.imageInsertedEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditor, domNodeSubjectFactory.VegaImageInserted);
     this.changeEventPreventSlimmer = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectFactory.VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
     this.textNodeColorController = new TextNodeColorController();
+    this.deleteSelectedNodesController = new DeleteSelectedNodesController();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = nodeAnnotation_abstract.VegaThemeManager.isDarkMode();
@@ -4484,6 +4745,7 @@ const VegaRichTextEditor = class {
      * Only in exceptional cases should the original data in the VegaRTEContentBlock type be used.
      *
      * @vegaVersion 2.34.0
+     * @defaultValue [{id:'UUID', type:'paragraph', nodes:[{id: 'UUID',type: 'text',text:''}]}]
      */
     // eslint-disable-next-line @stencil/strict-mutable
     this.value = contentState.VegaRTEContent.createEmptyContent();
@@ -4636,6 +4898,9 @@ __decorate$6([
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "insertImageController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "insertCompositionTextController", void 0);
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "imageInsertedEventEmitter", void 0);
@@ -4645,6 +4910,9 @@ __decorate$6([
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "textNodeColorController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "deleteSelectedNodesController", void 0);
 VegaRichTextEditor.style = vegaRichTextEditorCss;
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {