@globalpayments/vega 2.37.0 → 2.37.2

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

@@ -5,24 +5,24 @@ import { g as getActiveElement, s as sanitizeVegaComponent } from './component-c
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { d as domNodeSubjectFactory, b as VegaDropdownClick, f as VegaChange, O as VegaImageInserted, a as VegaClick, L as VegaPopoverShow, M as VegaPopoverHide } from './dom-node-subject-factory-97deb349.js';
-import { a as VegaInternalComponentDidRender, b as VegaInternalRichTextEditorSelectionRangeChange, V as VegaInternalRichTextEditorFlushChanges, p as VegaInternalRichTextImageClick, q as VegaInternalRichTextImageDeleteButtonClicked, l as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-458939b6.js';
-import { b as ToolbarButtonSlimmer, I as ImageAnnotationAction, T as TextNodeRenderingRegistry, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-84422458.js';
+import { a as VegaInternalComponentDidRender, b as VegaInternalRichTextEditorSelectionRangeChange, V as VegaInternalRichTextEditorFlushChanges, p as VegaInternalRichTextEditDeleteSelectedNodes, q as VegaInternalRichTextImageClick, r as VegaInternalRichTextImageDeleteButtonClicked, l as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-d0690d0d.js';
+import { b as ToolbarButtonSlimmer, I as ImageAnnotationAction, T as TextNodeRenderingRegistry, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-3da42221.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-900a5bb4.js';
-import { f as RTETextNode, B as BoldAnnotationAction, T as TextSplittableAction, i as ItalicAnnotation, U as UnderlineAnnotation, R as RTETextBlock, j as TextStyleAnnotationAction, k as TextStyleAnnotation, l as BoldAnnotation, C as ClearFormattingAnnotationAction, m as CodeAnnotationAction, S as StrikethroughAnnotation, A as AnnotationAction, n as SelectionRangeAnnotation, L as LinkAnnotationAction, o as IndentAnnotation, e as RTEImageNode, b as RTEListItemBlock, H as HorizontalAlignmentAnnotation, Z as ZERO_WIDTH_SPACE, V as VegaRTEContent, p as UpdateTextAction, q as RemoveChildAction, r as AppendChildNodesAction, s as InsertBlocksBeforeAction, M as MergeTwoBlocksNodesAction, t as SplitBlockWithNodeAction, u as ReplaceChildNodesAction, h as RTE_TEXT_COLORS, c as RTEListBlock, a as RTEImageBlock, v as InsertBlocksAfterAction } from './content-state-c2d29b35.js';
-import { c as NodeAnnotationTypeEnum, a as BlockAnnotationTypeEnum, M as ModifyContentAction, b as ModifyContentActionType, R as RTENode, s as stateEntityRenderingRegistry, I as InternalAnnotationTypeEnum, V as VegaThemeManager } from './node-annotation.abstract-a58b5a49.js';
+import { f as RTETextNode, B as BoldAnnotationAction, T as TextSplittableAction, i as ItalicAnnotation, U as UnderlineAnnotation, R as RTETextBlock, j as TextStyleAnnotationAction, k as TextStyleAnnotation, l as BoldAnnotation, C as ClearFormattingAnnotationAction, m as CodeAnnotationAction, S as StrikethroughAnnotation, A as AnnotationAction, n as SelectionRangeAnnotation, L as LinkAnnotationAction, o as IndentAnnotation, e as RTEImageNode, b as RTEListItemBlock, H as HorizontalAlignmentAnnotation, Z as ZERO_WIDTH_SPACE, V as VegaRTEContent, p as AppendChildNodesAction, q as UpdateTextAction, M as MergeTwoBlocksNodesAction, r as SplitBlockWithNodeAction, s as RemoveChildAction, t as ReplaceChildNodesAction, u as InsertBlocksBeforeAction, h as RTE_TEXT_COLORS, c as RTEListBlock, a as RTEImageBlock, v as InsertBlocksAfterAction } from './content-state-ccf5f960.js';
+import { c as NodeAnnotationTypeEnum, a as BlockAnnotationTypeEnum, M as ModifyContentAction, b as ModifyContentActionType, R as RTENode, s as stateEntityRenderingRegistry, I as InternalAnnotationTypeEnum, V as VegaThemeManager } from './node-annotation.abstract-b2e36bc4.js';
 import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-857c65fa.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-9ab05523.js';
-import { a as waitForComponentDidRender } from './index-b2045ad0.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-7136b7fa.js';
+import { a as waitForComponentDidRender } from './index-6e05b241.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-3535e76a.js';
 import { c as createEventEmitSlimmer } from './event-emit-slimmer-36cf4e39.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-4a201088.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-51151fc3.js';
 import { d as debounce } from './timer-9321173b.js';
 import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { f as findParent, r as rgbToHex } from './ui-62e4be97.js';
 import { b as FORM_ELEMENT_VALUE_CHANGE, D as DARK_MODE_CHANGE } from './static-subject-title-8268945e.js';
 import './vega-env-manager-8f8dc473.js';
-import './vega-skeleton-loader-controller-0044d77f.js';
+import './vega-skeleton-loader-controller-5aea7aeb.js';
 import './feature-flag-controller-4b3fe6f8.js';
 import './vega-dialog-controller-34eb8967.js';
 import './icon-manager-b889176b.js';
@@ -49,7 +49,7 @@ import './internal-vega-event-manager-0a01ba12.js';
 import './internal-vega-z-index-manager-7d2b54c3.js';
 import './index-44c794b4.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;
@@ -139,38 +139,38 @@ class VegaRichTextEditorRenderer extends VegaSlimmer {
     return (this.label && (h("vega-field-label", { onClick: this.richTextContentFocus, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
   }
 }
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "host", void 0);
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "toolbarRenderer", void 0);
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "label", void 0);
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "required", void 0);
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "hint", void 0);
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "disabled", void 0);
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "rows", void 0);
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "placeholder", void 0);
-__decorate$y([
+__decorate$A([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "value", void 0);
-__decorate$y([
+__decorate$A([
   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;
@@ -220,49 +220,49 @@ class ToolbarRenderer extends VegaSlimmer {
     })));
   }
 }
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "toolbarItems", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "clearStyleToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "boldToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "textStylesToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "italicToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "underlineToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "textColorToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "bulletsNumbersToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "strikethroughToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "imageToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "moreIndentToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "lessIndentToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "codeToolbarButtonSlimmer", void 0);
-__decorate$x([
+__decorate$z([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);
 
@@ -270,7 +270,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;
@@ -311,7 +311,7 @@ class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ bold });
 })();
-__decorate$w([
+__decorate$y([
   MapToComponentField()
 ], BoldToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -338,7 +338,7 @@ class ItalicAnnotationAction extends 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;
@@ -377,7 +377,7 @@ class ItalicToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ italic });
 })();
-__decorate$v([
+__decorate$x([
   MapToComponentField()
 ], ItalicToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -404,7 +404,7 @@ class UnderlineAnnotationAction extends 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;
@@ -446,7 +446,7 @@ class UnderlineToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ underline });
 })();
-__decorate$u([
+__decorate$w([
   MapToComponentField()
 ], UnderlineToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -454,7 +454,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;
@@ -563,10 +563,10 @@ TextStylesToolbarButtonSlimmer.items = [
     label: 'Paragraph',
   },
 ];
-__decorate$t([
+__decorate$v([
   MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$t([
+__decorate$v([
   MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "focusController", void 0);
 
@@ -574,7 +574,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;
@@ -610,7 +610,7 @@ class ClearStyleToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'text-slash': TextSlash,
   });
 })();
-__decorate$s([
+__decorate$u([
   MapToComponentField()
 ], ClearStyleToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -618,7 +618,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;
@@ -655,7 +655,7 @@ class CodeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ 'code-simple': codeSimple });
 })();
-__decorate$r([
+__decorate$t([
   MapToComponentField()
 ], CodeToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -682,7 +682,7 @@ class StrikethroughAnnotationAction extends 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;
@@ -724,7 +724,7 @@ class StrikethroughToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ strikethrough });
 })();
-__decorate$q([
+__decorate$s([
   MapToComponentField()
 ], StrikethroughToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -751,7 +751,7 @@ class SelectionChangeAction extends 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;
@@ -832,7 +832,7 @@ class LinkToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ link: link });
 })();
-__decorate$p([
+__decorate$r([
   MapToComponentField()
 ], LinkToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -859,7 +859,7 @@ class IndentAnnotationAction extends 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;
@@ -894,7 +894,7 @@ class MoreIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ indent: indent });
 })();
-__decorate$o([
+__decorate$q([
   MapToComponentField()
 ], MoreIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -902,7 +902,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;
@@ -938,7 +938,7 @@ class LessIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ outdent: outdent });
 })();
-__decorate$n([
+__decorate$p([
   MapToComponentField()
 ], LessIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -946,7 +946,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;
@@ -1003,13 +1003,13 @@ class ImageToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ image: image });
 })();
-__decorate$m([
+__decorate$o([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "insertImageController", void 0);
-__decorate$m([
+__decorate$o([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "imageInsertedEventEmitter", void 0);
-__decorate$m([
+__decorate$o([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -1046,7 +1046,7 @@ class TransformParagraphAction extends ModifyContentAction {
   }
 }
 
-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;
@@ -1104,14 +1104,14 @@ class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     }
   }
 }
-__decorate$l([
+__decorate$n([
   MapToComponentField()
 ], BulletsToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$l([
+__decorate$n([
   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;
@@ -1167,14 +1167,14 @@ class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     }
   }
 }
-__decorate$k([
+__decorate$m([
   MapToComponentField()
 ], NumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$k([
+__decorate$m([
   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;
@@ -1223,16 +1223,16 @@ class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'list-ol': ListOL,
   });
 })();
-__decorate$j([
+__decorate$l([
   MapToComponentField()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$j([
+__decorate$l([
   InjectVegaSlimmer()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "bulletsToolbarButtonSlimmer", void 0);
-__decorate$j([
+__decorate$l([
   InjectVegaSlimmer()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "numbersToolbarButtonSlimmer", void 0);
-__decorate$j([
+__decorate$l([
   MapToComponentMethod('componentWillRender')
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
@@ -1259,7 +1259,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;
@@ -1294,10 +1294,10 @@ class LeftAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'align-left': AlignLeft,
   });
 })();
-__decorate$i([
+__decorate$k([
   MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$i([
+__decorate$k([
   MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1305,7 +1305,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;
@@ -1340,10 +1340,10 @@ class CenterAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'align-center': AlignCenter,
   });
 })();
-__decorate$h([
+__decorate$j([
   MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$h([
+__decorate$j([
   MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1351,7 +1351,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;
@@ -1386,10 +1386,10 @@ class RightAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'align-right': AlignRight,
   });
 })();
-__decorate$g([
+__decorate$i([
   MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$g([
+__decorate$i([
   MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1397,7 +1397,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;
@@ -1432,14 +1432,14 @@ class JustifyAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'align-justify': AlignJustify,
   });
 })();
-__decorate$f([
+__decorate$h([
   MapToComponentField()
 ], JustifyAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$f([
+__decorate$h([
   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;
@@ -1491,22 +1491,22 @@ class HorizontalAlignmentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return false;
   }
 }
-__decorate$e([
+__decorate$g([
   MapToComponentField()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$e([
+__decorate$g([
   InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "leftAlignToolbarButtonSlimmer", void 0);
-__decorate$e([
+__decorate$g([
   InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "centerAlignToolbarButtonSlimmer", void 0);
-__decorate$e([
+__decorate$g([
   InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "rightAlignToolbarButtonSlimmer", void 0);
-__decorate$e([
+__decorate$g([
   InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "justifiedToolbarButtonSlimmer", void 0);
-__decorate$e([
+__decorate$g([
   MapToComponentMethod('componentWillRender')
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
@@ -1849,7 +1849,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;
@@ -1970,17 +1970,22 @@ class SelectionController extends 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);
@@ -2098,38 +2103,41 @@ class SelectionController extends VegaSlimmer {
   }
 }
 SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME = 50;
-__decorate$d([
+__decorate$f([
   MapToComponentField()
 ], SelectionController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$d([
+__decorate$f([
   MapToComponentField({ writable: true })
 ], SelectionController.prototype, "selectionMap", void 0);
-__decorate$d([
+__decorate$f([
   MapToComponentField()
 ], SelectionController.prototype, "host", void 0);
-__decorate$d([
+__decorate$f([
   MapToComponentField()
 ], SelectionController.prototype, "value", void 0);
-__decorate$d([
+__decorate$f([
   MapToComponentField()
 ], SelectionController.prototype, "valueController", void 0);
-__decorate$d([
+__decorate$f([
+  MapToComponentField()
+], SelectionController.prototype, "insertCompositionTextController", void 0);
+__decorate$f([
   MapToComponentMethod('connectedCallback')
 ], SelectionController.prototype, "connectedCallback", null);
-__decorate$d([
+__decorate$f([
   MapToComponentMethod('disconnectedCallback')
 ], SelectionController.prototype, "disconnectedCallback", null);
-__decorate$d([
+__decorate$f([
   MapToComponentMethod('componentDidLoad')
 ], SelectionController.prototype, "componentDidLoad", null);
-__decorate$d([
+__decorate$f([
   MapToComponentMethod('watchValueUpdate')
 ], SelectionController.prototype, "watchValueUpdate", null);
-__decorate$d([
+__decorate$f([
   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;
@@ -2200,32 +2208,32 @@ class ValueController extends VegaSlimmer {
   }
 }
 ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
-__decorate$c([
+__decorate$e([
   MapToComponentField()
 ], ValueController.prototype, "host", void 0);
-__decorate$c([
+__decorate$e([
   MapToComponentField({ writable: true })
 ], ValueController.prototype, "value", void 0);
-__decorate$c([
+__decorate$e([
   MapToComponentField()
 ], ValueController.prototype, "changeEventEmitter", void 0);
-__decorate$c([
+__decorate$e([
   MapToComponentField()
 ], ValueController.prototype, "valueController", void 0);
-__decorate$c([
+__decorate$e([
   MapToComponentMethod('connectedCallback')
 ], ValueController.prototype, "connectedCallback", null);
-__decorate$c([
+__decorate$e([
   MapToComponentMethod('disconnectedCallback')
 ], ValueController.prototype, "disconnectedCallback", null);
-__decorate$c([
+__decorate$e([
   MapToComponentMethod('componentWillLoad')
 ], ValueController.prototype, "componentWillLoad", null);
-__decorate$c([
+__decorate$e([
   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;
@@ -2258,13 +2266,13 @@ class DarkModeStateControllerSlimmer extends VegaSlimmer {
     return true;
   }
 }
-__decorate$b([
+__decorate$d([
   MapToComponentField({ writable: true })
 ], DarkModeStateControllerSlimmer.prototype, "isInDarkMode", void 0);
-__decorate$b([
+__decorate$d([
   MapToComponentMethod('connectedCallback')
 ], DarkModeStateControllerSlimmer.prototype, "connectedCallback", null);
-__decorate$b([
+__decorate$d([
   MapToComponentMethod('disconnectedCallback')
 ], DarkModeStateControllerSlimmer.prototype, "disconnectResizeObserver", null);
 
@@ -2284,21 +2292,6 @@ class RichTextContentController {
   }
 }
 
-/**
- * Replace the text node selected content to new text
- *
- * @example selectedNode.apply(new ReplaceSelectedTextAction(insertText))
- */
-class ReplaceSelectedTextAction extends ModifyContentAction {
-  constructor(text, currentRange) {
-    super();
-    this.type = 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 {
@@ -2307,30 +2300,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 RTETextNode && text) {
-      startNode.apply(new 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'.
    *
@@ -2352,105 +2329,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.notify(domNodeSubjectFactory.getSubject(this.richTextEditorRef, 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 RTETextNode) {
-      selectedNodes[0].apply(new ReplaceSelectedTextAction('', currentRange));
-    }
-    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof 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 UpdateTextAction(startRTENode.text + endRTENode.text));
-            if (startRTENode.parentBlock === endRTENode.parentBlock) {
-              startRTENode.parentBlock.apply(new RemoveChildAction(endRTENode));
-            }
-            else {
-              endRTENode.parentBlock.apply(new RemoveChildAction(endRTENode.parentBlock.nodes[0]));
-            }
-          }
-          if (startRTENode.parentBlock !== endRTENode.parentBlock) {
-            startRTENode.parentBlock.apply(new AppendChildNodesAction(endBlock.nodes));
-            endBlock.nodes = [];
-          }
-          if (endBlock.nodes.length < 1) {
-            endBlock.parent.apply(new 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 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 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 InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
-        startNode.parentBlock.apply(new 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 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 RTETextBlock(generateUUID(), 'paragraph');
@@ -2458,18 +2352,6 @@ class BaseHandler {
     paragraph.apply(new 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.
    *
@@ -2480,6 +2362,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;
+  }
 }
 
 /**
@@ -2496,6 +2386,21 @@ class InsertNodesBeforeAction extends ModifyContentAction {
   }
 }
 
+/**
+ * Replace the text node selected content to new text
+ *
+ * @example selectedNode.apply(new ReplaceSelectedTextAction(insertText))
+ */
+class ReplaceSelectedTextAction extends ModifyContentAction {
+  constructor(text, currentRange) {
+    super();
+    this.type = 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 {
   /**
@@ -2539,10 +2444,11 @@ class InsertTextHandler extends BaseHandler {
     }
     else {
       // The selected nodes is multiple nodes
-      const cursorNode = this.replaceSelectedNodesWithText(text);
-      this.selectionController.enqueueSelectionRangeFutureState(cursorNode, cursorNode instanceof RTETextNode
-        ? Math.min(startOffset + text.length, cursorNode.text.length)
-        : startOffset);
+      const cursorNode = this.removeSelectionRange(true);
+      if (cursorNode instanceof RTETextNode) {
+        cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
+        this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(startOffset + text.length, cursorNode.text.length));
+      }
     }
   }
   /**
@@ -2739,11 +2645,13 @@ class InsertLineBreakHandler extends BaseHandler {
    * </p>
    */
   breakNewBlock() {
-    const newBlock = new RTETextBlock(generateUUID(), 'paragraph');
-    const lineBreakNode = this.createLineBreakNode(newBlock);
-    newBlock.apply(new AppendChildNodesAction([this.createLineBreakNode(newBlock), lineBreakNode]));
-    this.currentState.apply(new AppendChildNodesAction([newBlock]));
-    this.switchCaretPositionToSpecifiedNode(lineBreakNode);
+    if (this.currentState &&
+      this.currentState.blocks[0] &&
+      this.currentState.blocks[0] instanceof 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
@@ -2780,7 +2688,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);
@@ -2796,15 +2704,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 RTETextNode(generateUUID(), '\n', block);
-  }
 }
 
 /**
@@ -2864,21 +2763,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 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 RTETextNode &&
@@ -2886,7 +2776,6 @@ class DeleteContentHandler extends BaseHandler {
       lastSelectedNode.parentBlock.apply(new 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
@@ -2906,6 +2795,14 @@ class DeleteContentHandler extends BaseHandler {
       block.parent.apply(new 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 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.
    *
@@ -3824,8 +3721,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 SplitBlockWithNodeAction(cursorNode, startOffset);
       currentBlock.apply(breakAction);
@@ -3873,13 +3770,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 VegaSlimmer {
   constructor() {
     super(...arguments);
@@ -3888,91 +3785,47 @@ class UserInputController extends 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 = 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.
@@ -3983,8 +3836,6 @@ class UserInputController extends 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.
@@ -3995,13 +3846,6 @@ class UserInputController extends 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.
@@ -4041,30 +3885,30 @@ class UserInputController extends VegaSlimmer {
     }
   }
 }
-__decorate$a([
+__decorate$c([
   MapToComponentField()
 ], UserInputController.prototype, "host", void 0);
-__decorate$a([
+__decorate$c([
   MapToComponentField()
 ], UserInputController.prototype, "value", void 0);
-__decorate$a([
+__decorate$c([
   MapToComponentField()
 ], UserInputController.prototype, "valueController", void 0);
-__decorate$a([
+__decorate$c([
   MapToComponentField()
 ], UserInputController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$a([
+__decorate$c([
   MapToComponentField()
 ], UserInputController.prototype, "selectionController", void 0);
-__decorate$a([
+__decorate$c([
+  MapToComponentField()
+], UserInputController.prototype, "insertCompositionTextController", void 0);
+__decorate$c([
   MapToComponentMethod('componentDidLoad')
 ], UserInputController.prototype, "addActionListener", null);
-__decorate$a([
+__decorate$c([
   MapToComponentMethod('disconnectedCallback')
 ], UserInputController.prototype, "removeActionListener", null);
-__decorate$a([
-  MapToComponentMethod('componentDidRender')
-], UserInputController.prototype, "reConnectObserver", null);
 
 /**
  * A rule that checks if the input range is empty or not
@@ -4140,7 +3984,7 @@ class InsertImageToBlockAction extends ModifyContentAction {
   }
 }
 
-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;
@@ -4229,26 +4073,26 @@ class InsertImageController extends VegaSlimmer {
     }
   }
 }
-__decorate$9([
+__decorate$b([
   MapToComponentField()
 ], InsertImageController.prototype, "selectionController", void 0);
-__decorate$9([
+__decorate$b([
   MapToComponentField()
 ], InsertImageController.prototype, "value", void 0);
-__decorate$9([
+__decorate$b([
   MapToComponentField()
 ], InsertImageController.prototype, "valueController", void 0);
-__decorate$9([
+__decorate$b([
   MapToComponentField()
 ], InsertImageController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$9([
+__decorate$b([
   MapToComponentMethod('componentDidLoad')
 ], InsertImageController.prototype, "registerObserver", null);
-__decorate$9([
+__decorate$b([
   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;
@@ -4304,20 +4148,20 @@ class FocusController extends VegaSlimmer {
     this.selectionController.setSelectionRange(range);
   }
 }
-__decorate$8([
+__decorate$a([
   MapToComponentField()
 ], FocusController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$8([
+__decorate$a([
   MapToComponentField()
 ], FocusController.prototype, "selectionController", void 0);
-__decorate$8([
+__decorate$a([
   MapToComponentField()
 ], FocusController.prototype, "valueController", void 0);
-__decorate$8([
+__decorate$a([
   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;
@@ -4357,46 +4201,461 @@ class TextNodeColorController extends VegaSlimmer {
     return true;
   }
 }
-__decorate$7([
+__decorate$9([
   MapToComponentMethod('connectedCallback')
 ], TextNodeColorController.prototype, "connectedCallback", null);
-__decorate$7([
+__decorate$9([
   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) {
-    registerInstance(this, hostRef);
-    this.vegaChange = createEvent(this, "vegaChange", 7);
-    this.change = createEvent(this, "change", 7);
-    this.vegaImageInserted = createEvent(this, "vegaImageInserted", 7);
-    this.imageInserted = createEvent(this, "imageInserted", 7);
-    this.globalSlimmers = {};
-    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
-    this.formFieldController = new 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 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 = stateEntityRenderingRegistry.getEntityByDOM(target.parentElement);
+            const newValue = target.textContent;
+            if (richTextNode instanceof 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.notify(domNodeSubjectFactory.getSubject(this.host, 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 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(ZERO_WIDTH_SPACE)) {
+      return text.slice(ZERO_WIDTH_SPACE.length);
+    }
+    else if (text.endsWith(ZERO_WIDTH_SPACE)) {
+      return text.slice(0, text.length - 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([
+  MapToComponentField()
+], InsertCompositionTextController.prototype, "selectionController", void 0);
+__decorate$8([
+  MapToComponentField()
+], InsertCompositionTextController.prototype, "host", void 0);
+__decorate$8([
+  MapToComponentField()
+], InsertCompositionTextController.prototype, "value", void 0);
+__decorate$8([
+  MapToComponentField()
+], InsertCompositionTextController.prototype, "valueController", void 0);
+__decorate$8([
+  MapToComponentField()
+], InsertCompositionTextController.prototype, "userInputController", void 0);
+__decorate$8([
+  MapToComponentField()
+], InsertCompositionTextController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$8([
+  MapToComponentMethod('componentDidLoad')
+], InsertCompositionTextController.prototype, "addCompositionTextEventListener", null);
+__decorate$8([
+  MapToComponentMethod('disconnectedCallback')
+], InsertCompositionTextController.prototype, "removeCompositionTextEventListener", null);
+__decorate$8([
+  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 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.addUniqueObserverToNode(this.host, VegaInternalRichTextEditDeleteSelectedNodes, this.deleteActionProcess);
+  }
+  /**
+   * Removes the observer from the host element.
+   */
+  removeDeleteObserver() {
+    DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, 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 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 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 InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
+        startNode.parentBlock.apply(new 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 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 RTETextNode) {
+      selectedNodes[0].apply(new ReplaceSelectedTextAction('', currentRange));
+    }
+    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof 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 RTETextBlock(generateUUID(), 'paragraph');
+    const textNode = new RTETextNode(`${paragraph.id}1`, '', paragraph);
+    paragraph.apply(new 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 UpdateTextAction(startRTENode.text + endRTENode.text));
+            if (startRTENode.parentBlock === endRTENode.parentBlock) {
+              startRTENode.parentBlock.apply(new RemoveChildAction(endRTENode));
+            }
+            else {
+              endRTENode.parentBlock.apply(new RemoveChildAction(endRTENode.parentBlock.nodes[0]));
+            }
+          }
+          if (startRTENode.parentBlock !== endRTENode.parentBlock) {
+            startRTENode.parentBlock.apply(new AppendChildNodesAction(endBlock.nodes));
+            endBlock.nodes = [];
+          }
+          if (endBlock.nodes.length < 1) {
+            endBlock.parent.apply(new 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([
+  MapToComponentField()
+], DeleteSelectedNodesController.prototype, "host", void 0);
+__decorate$7([
+  MapToComponentField()
+], DeleteSelectedNodesController.prototype, "selectionController", void 0);
+__decorate$7([
+  MapToComponentField()
+], DeleteSelectedNodesController.prototype, "value", void 0);
+__decorate$7([
+  MapToComponentMethod('connectedCallback')
+], DeleteSelectedNodesController.prototype, "addDeleteObserver", null);
+__decorate$7([
+  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) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.vegaImageInserted = createEvent(this, "vegaImageInserted", 7);
+    this.imageInserted = createEvent(this, "imageInserted", 7);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.formFieldController = new 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 = createEventEmitSlimmer(VegaRichTextEditor, VegaChange);
     this.vegaRichTextEditorRenderer = new VegaRichTextEditorRenderer();
@@ -4424,9 +4683,11 @@ const VegaRichTextEditor = class {
     this.richTextContentController = new RichTextContentController(this);
     this.userInputController = new UserInputController();
     this.insertImageController = new InsertImageController();
+    this.insertCompositionTextController = new InsertCompositionTextController();
     this.imageInsertedEventEmitter = createEventEmitSlimmer(VegaRichTextEditor, VegaImageInserted);
     this.changeEventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
     this.textNodeColorController = new TextNodeColorController();
+    this.deleteSelectedNodesController = new DeleteSelectedNodesController();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = VegaThemeManager.isDarkMode();
@@ -4480,6 +4741,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 = VegaRTEContent.createEmptyContent();
@@ -4632,6 +4894,9 @@ __decorate$6([
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "insertImageController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "insertCompositionTextController", void 0);
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "imageInsertedEventEmitter", void 0);
@@ -4641,6 +4906,9 @@ __decorate$6([
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "textNodeColorController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "deleteSelectedNodesController", void 0);
 VegaRichTextEditor.style = vegaRichTextEditorCss;
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {