@heartlandone/vega-sandbox-pr-1733-a510723b8e32e279525a116f82f2f0bfc62031c7 2.32.0

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

@@ -0,0 +1,4724 @@
+import { d as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, h, H as Host, F as Fragment, I as InjectVegaSlimmer, L as LogUtility, r as registerInstance, e as createEvent, g as getElement } from './global-slimmer-registry-6887a59f.js';
+import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-776083d3.js';
+import { g as getActiveElement, s as sanitizeVegaComponent } from './component-051a594c.js';
+import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
+import { C as ChangeManager } from './change-manager-8f5b72c2.js';
+import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory, V as VegaChange, O as Observer, Q as VegaImageInserted, b as VegaClick, M as VegaPopoverShow, N as VegaPopoverHide } from './dom-node-subject-observer-factory-9d80a772.js';
+import { a as VegaInternalComponentDidRender, b as VegaInternalRichTextEditorSelectionRangeChange, V as VegaInternalRichTextEditorFlushChanges, n as VegaInternalRichTextImageClick } from './vega-internal-event-id-16ceaea7.js';
+import { a as ToolbarButtonSlimmer, T as TextColorToolbarButtonSlimmer } from './text-color-toolbar-button-slimmer-683473ad.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-24523273.js';
+import { B as BoldAnnotationAction, R as RTETextBlock, T as TextStyleAnnotationAction, a as TextStyleAnnotation, I as IndentAnnotation, b as RTEImageNode, c as RTEListItemBlock, H as HorizontalAlignmentAnnotation, V as VegaRTEContent, d as RemoveChildAction, A as AppendChildNodesAction, e as InsertBlocksBeforeAction, M as MergeTwoBlocksNodesAction, S as SplitBlockWithNodeAction, f as ReplaceChildNodesAction, g as RTEImageBlock, h as RTEListBlock, i as InsertBlocksAfterAction, j as ImageAnnotationAction } from './content-state-1490bd1e.js';
+import { a as NodeAnnotationTypeEnum, M as ModifyContentAction, b as ModifyContentActionType, s as stateEntityRenderingRegistry, I as InternalAnnotationTypeEnum, R as RTENode, V as VegaThemeManager } from './node.abstract-3971a0c6.js';
+import { R as RTETextNode, T as TextSplittableAction, I as ItalicAnnotation, e as UnderlineAnnotation, B as BoldAnnotation, C as ClearFormattingAnnotationAction, f as CodeAnnotationAction, g as StrikethroughAnnotation, A as AnnotationAction, h as SelectionRangeAnnotation, L as LinkAnnotationAction, Z as ZERO_WIDTH_SPACE, b as waitForComponentDidRender, U as UpdateTextAction, i as TextNodeRenderingRegistry } from './text-node-f7574b6f.js';
+import { e as BlockAnnotationTypeEnum } from './block-annotation.abstract-41f45ce6.js';
+import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-4304af69.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-6403ea97.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-b39d5314.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-bdc66a57.js';
+import { d as debounce } from './timer-9321173b.js';
+import { S as SynchronizeTaskQueue } from './synchronize-task-queue-8f5fbbd9.js';
+import { b as FORM_ELEMENT_VALUE_CHANGE, D as DARK_MODE_CHANGE } from './static-subject-title-e06a3840.js';
+import './vega-env-manager-8f8dc473.js';
+import './feature-flag-controller-8dd2cc75.js';
+import './vega-dialog-controller-a65e68cc.js';
+import './icon-manager-2a51beab.js';
+import { f as findParent } from './ui-5600b48f.js';
+import './translation-5643a5b0.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-0568a029.js';
+import { c as chevronDown } from './chevron-down-4a75d28e.js';
+import { t as trashCan } from './trash-can-8819a939.js';
+import './type-guard-158f6d7a.js';
+import './breakpoints-d9faf11c.js';
+import './ui-8424715a.js';
+import './regex-dfe11abf.js';
+import './typography-396de03f.js';
+import './_commonjsHelpers-9943807e.js';
+import './internal-vega-z-index-manager-89e8b6f5.js';
+import './number-4398f2e1.js';
+import './dynamic-slimmer-85746483.js';
+import './page-resize-observer-slimmer-8589ebc8.js';
+import './breakpoints-91116111.js';
+import './internal-vega-event-manager-660845f6.js';
+import './string-be824360.js';
+import './mutation-observer-slimmer-ca2cb2e8.js';
+import './mutation-observer-filters-1035b064.js';
+import './array-b668466e.js';
+import './index-6a6f91bb.js';
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class VegaRichTextEditorRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderHintMessage = () => {
+      return h("vega-text", null, this.hint);
+    };
+    this.renderTextContent = () => {
+      return (h("div", { class: {
+          'rich-text-editor-container': true,
+          'disabled': this.disabled,
+        }, style: { minHeight: `${this.rows * 24}px` }, onClick: this.richTextContentFocus, role: "textbox", tabIndex: !this.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
+        h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value }),
+        this.renderCharacterCounter()));
+    };
+    this.renderCharacterCounter = () => {
+      return (h("div", { class: {
+          'text-editor-counter': true,
+          'counter-exceed-max-length': false,
+        }, style: { display: 'none' } },
+        h("span", null, "0"),
+        h("span", null, "/100")));
+    };
+    this.renderErrorMessage = () => {
+      return h("div", { class: "vega-error vega-hidden" });
+    };
+    this.richTextContentFocus = () => {
+      void this.richTextContentRef.vegaFocus();
+    };
+  }
+  /**
+   * Component lifecycle - [componentDidRender]{@link VegaRichTextEditor.componentDidRender}
+   */
+  componentDidRender() {
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.host, VegaInternalComponentDidRender), {});
+  }
+  /**
+   * Returns the HTMLElement reference of the rich text container.
+   *
+   * @returns {HTMLDivElement} An HTMLElement representing the rich text container is being returned.
+   */
+  getRichTextContainerRef() {
+    return this.richTextContainerRef;
+  }
+  /**
+   * Returns the HTMLElement reference of the rich text content area.
+   *
+   * @returns {HTMLVegaRichTextContentElement} An HTMLVegaRichTextContentElement is being returned.
+   */
+  getRichTextContentRef() {
+    return this.richTextContentRef;
+  }
+  /**
+   * Returns the HTMLElement reference of the rich text outermost layer.
+   *
+   * @returns {HTMLVegaFlexElement} An HTMLVegaFlexElement is being returned.
+   */
+  getRichTextWrapperRef() {
+    return this.richTextWrapperRef;
+  }
+  /**
+   * Returns the rich text editor component editable element
+   *
+   * @returns {HTMLDivElement} The div element which has property contenteditable
+   */
+  getRTEEditableElementRef() {
+    if (this.richTextContentRef && this.richTextContentRef.shadowRoot) {
+      return this.richTextContentRef.shadowRoot.querySelector('.rich-text-content');
+    }
+  }
+  render() {
+    return h(Host, null, this.renderRichTextEditor());
+  }
+  renderRichTextEditor() {
+    return (h("vega-flex", { direction: "col", gap: "0", ref: (flex) => (this.richTextWrapperRef = flex) },
+      this.renderLabel(),
+      this.hint && this.renderHintMessage(),
+      this.toolbarRenderer.render(),
+      this.renderTextContent(),
+      this.renderErrorMessage()));
+  }
+  renderLabel() {
+    return (this.label && (h("vega-field-label", { onClick: this.richTextContentFocus, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
+  }
+}
+__decorate$y([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "host", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "toolbarRenderer", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "label", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "required", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "hint", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "disabled", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "rows", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "placeholder", void 0);
+__decorate$y([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "value", void 0);
+__decorate$y([
+  MapToComponentMethod('componentDidRender')
+], VegaRichTextEditorRenderer.prototype, "componentDidRender", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class ToolbarRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.getToolbarBtnRenderer = (type) => {
+      switch (type) {
+        case 'clearStyle':
+          return this.clearStyleToolbarButtonSlimmer;
+        case 'bold':
+          return this.boldToolbarButtonSlimmer;
+        case 'textStyles':
+          return this.textStylesToolbarButtonSlimmer;
+        case 'italic':
+          return this.italicToolbarButtonSlimmer;
+        case 'underline':
+          return this.underlineToolbarButtonSlimmer;
+        case 'textColor':
+          return this.textColorToolbarButtonSlimmer;
+        case 'moreIndent':
+          return this.moreIndentToolbarButtonSlimmer;
+        case 'lessIndent':
+          return this.lessIndentToolbarButtonSlimmer;
+        case 'code':
+          return this.codeToolbarButtonSlimmer;
+        case 'strikethrough':
+          return this.strikethroughToolbarButtonSlimmer;
+        case 'link':
+          return this.linkToolbarButtonSlimmer;
+        case 'image':
+          return this.imageToolbarButtonSlimmer;
+        case 'bulletsNumbers':
+          return this.bulletsNumbersToolbarButtonSlimmer;
+        case 'horizontalAlignment':
+          return this.horizontalAlignmentToolbarButtonSlimmer;
+      }
+    };
+  }
+  render() {
+    return (h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" }, this.toolbarItems.map((group) => {
+      return (h("div", { class: "toolbar-btn-group" }, group.map((item) => {
+        return this.getToolbarBtnRenderer(item).render();
+      })));
+    })));
+  }
+}
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "toolbarItems", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "clearStyleToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "boldToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "textStylesToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "italicToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "underlineToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "textColorToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "bulletsNumbersToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "strikethroughToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "imageToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "moreIndentToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "lessIndentToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "codeToolbarButtonSlimmer", void 0);
+__decorate$x([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);
+
+const bold = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>`,
+};
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'bold',
+      tooltip: {
+        text: 'Bold',
+      },
+    });
+  }
+  onClick() {
+    const bold = this.isSelected();
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof RTETextNode)
+      .forEach((node) => node.apply(new BoldAnnotationAction(!bold)));
+  }
+  isSelected() {
+    const selectedNodes = this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof RTETextNode);
+    return (selectedNodes.length > 0 &&
+      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(NodeAnnotationTypeEnum.BOLD)) === null || _a === void 0 ? void 0 : _a.bold; }));
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => {
+      var _a;
+      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+    });
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ bold });
+})();
+__decorate$w([
+  MapToComponentField()
+], BoldToolbarButtonSlimmer.prototype, "selectionController", void 0);
+
+const italic = {
+  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="M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z"/></svg>`,
+};
+
+/**
+ * Action to toggle the italic annotation
+ */
+class ItalicAnnotationAction extends TextSplittableAction {
+  constructor(italic) {
+    super();
+    this.isFlushable = true;
+    this.italic = italic;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {ItalicAnnotation} The annotation
+   */
+  toAnnotation() {
+    return new ItalicAnnotation(this.italic);
+  }
+}
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class ItalicToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'italic',
+      tooltip: { text: 'Italic' },
+    });
+  }
+  isSelected() {
+    const selectedNodes = this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof RTETextNode);
+    return (selectedNodes.length > 0 &&
+      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(NodeAnnotationTypeEnum.ITALIC)) === null || _a === void 0 ? void 0 : _a.italic; }));
+  }
+  onClick() {
+    const italic = this.isSelected();
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof RTETextNode)
+      .forEach((node) => node.apply(new ItalicAnnotationAction(!italic)));
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => {
+      var _a;
+      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+    });
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ italic });
+})();
+__decorate$v([
+  MapToComponentField()
+], ItalicToolbarButtonSlimmer.prototype, "selectionController", void 0);
+
+const underline = {
+  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="M16 64c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H128V224c0 53 43 96 96 96s96-43 96-96V96H304c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H384V224c0 88.4-71.6 160-160 160s-160-71.6-160-160V96H48C30.3 96 16 81.7 16 64zM0 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-32z"/></svg>`,
+};
+
+/**
+ * Action to toggle the underline annotation
+ */
+class UnderlineAnnotationAction extends TextSplittableAction {
+  constructor(underline) {
+    super();
+    this.isFlushable = true;
+    this.underline = underline;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {UnderlineAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new UnderlineAnnotation(this.underline);
+  }
+}
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class UnderlineToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'underline',
+      tooltip: { text: 'Underline' },
+    });
+  }
+  isSelected() {
+    const selectedNodes = this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof RTETextNode);
+    return (selectedNodes.length > 0 &&
+      selectedNodes.every((node) => {
+        var _a;
+        return (_a = node.getAnnotationByType(NodeAnnotationTypeEnum.UNDERLINE)) === null || _a === void 0 ? void 0 : _a.underline;
+      }));
+  }
+  onClick() {
+    const selected = this.isSelected();
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof RTETextNode)
+      .forEach((node) => node.apply(new UnderlineAnnotationAction(!selected)));
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => {
+      var _a;
+      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+    });
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ underline });
+})();
+__decorate$u([
+  MapToComponentField()
+], UnderlineToolbarButtonSlimmer.prototype, "selectionController", void 0);
+
+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 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;
+};
+class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'text-size',
+      tooltip: { text: 'Text Styles' },
+    });
+    this.handleDropdownItemClick = (e) => {
+      const selectedType = e.detail;
+      const boldByDefault = TextStylesToolbarButtonSlimmer.items.find((item) => item.key === selectedType).bold;
+      const selectedTextBlocks = this.selectionController
+        .getSelectedBlocks()
+        .filter((block) => block instanceof RTETextBlock);
+      if (selectedTextBlocks.length > 0) {
+        selectedTextBlocks.forEach((item) => {
+          item.apply(new TextStyleAnnotationAction(selectedType, boldByDefault));
+        });
+      }
+      else {
+        void this.focusController.focusOnLastTextNode({ newLine: true }).then(() => {
+          this.selectionController
+            .getSelectedBlocks()
+            .filter((node) => node instanceof RTETextBlock)
+            .forEach((item) => {
+            item.apply(new TextStyleAnnotationAction(selectedType, boldByDefault));
+          });
+        });
+      }
+    };
+  }
+  renderBtnWrapper(renderBtn) {
+    return (h("vega-dropdown", { selectType: "single", trigger: "click", alignment: "center", selectedSourceKey: this.getSelectedSourceKey(), onVegaDropdownClick: this.handleDropdownItemClick },
+      renderBtn({ showArrowIcon: true }),
+      h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent())));
+  }
+  renderDropdownContent() {
+    return (h(Fragment, null, TextStylesToolbarButtonSlimmer.items.map((item) => {
+      const textStyleAnnotation = new TextStyleAnnotation(item.key);
+      const boldAnnotation = new BoldAnnotation(item.bold);
+      return (h("vega-dropdown-item", { key: item.key, itemKey: item.key },
+        h("vega-box", { padding: { right: 'size-20' } },
+          h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.render()), boldAnnotation.render()) }, item.label))));
+    })));
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE));
+  }
+  getSelectedSourceKey() {
+    const currentSelectedBlocks = this.selectionController
+      .getSelectedBlocks()
+      .filter((block) => block instanceof RTETextBlock);
+    const isSameType = currentSelectedBlocks.length > 0 &&
+      currentSelectedBlocks.every((block) => block.type === currentSelectedBlocks[0].type);
+    if (isSameType) {
+      const blockAnnotation = currentSelectedBlocks[0].getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE);
+      return blockAnnotation.textStyle;
+    }
+    return '';
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'text-size': textSize,
+  });
+})();
+TextStylesToolbarButtonSlimmer.items = [
+  {
+    key: 'title',
+    label: 'Title',
+    bold: true,
+  },
+  {
+    key: 'subtitle',
+    label: 'Subtitle',
+  },
+  {
+    key: 'heading-1',
+    label: 'Heading 1',
+    bold: true,
+  },
+  {
+    key: 'heading-2',
+    label: 'Heading 2',
+    bold: true,
+  },
+  {
+    key: 'heading-3',
+    label: 'Heading 3',
+    bold: true,
+  },
+  {
+    key: 'paragraph',
+    label: 'Paragraph',
+  },
+];
+__decorate$t([
+  MapToComponentField()
+], TextStylesToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$t([
+  MapToComponentField()
+], TextStylesToolbarButtonSlimmer.prototype, "focusController", void 0);
+
+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 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;
+};
+class ClearStyleToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'text-slash',
+      tooltip: {
+        text: 'Clear Style',
+      },
+    });
+  }
+  isSelected() {
+    return false;
+  }
+  onClick() {
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof RTETextNode)
+      .forEach((node) => {
+      node.apply(new ClearFormattingAnnotationAction());
+    });
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'text-slash': TextSlash,
+  });
+})();
+__decorate$s([
+  MapToComponentField()
+], ClearStyleToolbarButtonSlimmer.prototype, "selectionController", void 0);
+
+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 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;
+};
+class CodeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'code-simple',
+      tooltip: { text: 'Code' },
+    });
+  }
+  onClick() {
+    const selected = this.isSelected();
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof RTETextNode)
+      .forEach((node) => node.apply(new CodeAnnotationAction(!selected)));
+  }
+  isSelected() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return (selectedNodes.length > 0 &&
+      selectedNodes
+        .filter((node) => node instanceof RTETextNode)
+        .map((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.CODE))
+        .every((annotation) => annotation && annotation.code));
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
+      node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'code-simple': codeSimple });
+})();
+__decorate$r([
+  MapToComponentField()
+], CodeToolbarButtonSlimmer.prototype, "selectionController", void 0);
+
+const strikethrough = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M332.2 319.9c17.22 12.17 22.33 26.51 18.61 48.21c-3.031 17.59-10.88 29.34-24.72 36.99c-35.44 19.75-108.5 11.96-186-19.68c-16.34-6.686-35.03 1.156-41.72 17.53s1.188 35.05 17.53 41.71c31.75 12.93 95.69 35.37 157.6 35.37c29.62 0 58.81-5.156 83.72-18.96c30.81-17.09 50.44-45.46 56.72-82.11c3.998-23.27 2.168-42.58-3.488-59.05H332.2zM488 239.9l-176.5-.0309c-15.85-5.613-31.83-10.34-46.7-14.62c-85.47-24.62-110.9-39.05-103.7-81.33c2.5-14.53 10.16-25.96 22.72-34.03c20.47-13.15 64.06-23.84 155.4 .3438c17.09 4.531 34.59-5.654 39.13-22.74c4.531-17.09-5.656-34.59-22.75-39.12c-91.31-24.18-160.7-21.62-206.3 7.654C121.8 73.72 103.6 101.1 98.09 133.1C89.26 184.5 107.9 217.3 137.2 239.9L24 239.9c-13.25 0-24 10.75-24 23.1c0 13.25 10.75 23.1 24 23.1h464c13.25 0 24-10.75 24-23.1C512 250.7 501.3 239.9 488 239.9z"/></svg>`,
+};
+
+/**
+ * Action to toggle the strikethrough annotation
+ */
+class StrikethroughAnnotationAction extends TextSplittableAction {
+  constructor(underline) {
+    super();
+    this.isFlushable = true;
+    this.strikethrough = underline;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {StrikethroughAnnotation} the annotation
+   */
+  toAnnotation() {
+    return new StrikethroughAnnotation(this.strikethrough);
+  }
+}
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class StrikethroughToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'strikethrough',
+      tooltip: { text: 'Strikethrough' },
+    });
+  }
+  isSelected() {
+    const selectedNodes = this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof RTETextNode);
+    return (selectedNodes.length > 0 &&
+      selectedNodes.every((node) => {
+        var _a;
+        return (_a = node.getAnnotationByType(NodeAnnotationTypeEnum.STRIKETHROUGH)) === null || _a === void 0 ? void 0 : _a.strikethrough;
+      }));
+  }
+  onClick() {
+    const selected = this.isSelected();
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof RTETextNode)
+      .forEach((node) => node.apply(new StrikethroughAnnotationAction(!selected)));
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => {
+      var _a;
+      return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
+    });
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ strikethrough });
+})();
+__decorate$q([
+  MapToComponentField()
+], StrikethroughToolbarButtonSlimmer.prototype, "selectionController", void 0);
+
+const link = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M562.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L405.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C189.5 251.2 196 330 246 380c56.5 56.5 148 56.5 204.5 0L562.8 267.7zM43.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C57 372 57 321 88.5 289.5L200.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C416.5 260.8 410 182 360 132c-56.5-56.5-148-56.5-204.5 0L43.2 244.3z"/></svg>`,
+};
+
+/**
+ * Action to change the selection range
+ */
+class SelectionChangeAction extends AnnotationAction {
+  constructor(range) {
+    super();
+    this.isFlushable = false;
+    this.range = range;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {SelectionRangeAnnotation} The annotation
+   */
+  toAnnotation() {
+    return new SelectionRangeAnnotation(this.range);
+  }
+}
+
+var __decorate$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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class LinkToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'link',
+      tooltip: {
+        text: 'Link',
+      },
+    });
+    this.handleLinkEditorChange = ({ detail, }) => {
+      switch (detail.action) {
+        case 'link': {
+          const { url, text } = detail.payload;
+          const textChanged = text !== this.currentSelectedText;
+          const groupKey = generateUUID();
+          this.currentSelectedNodes.forEach((node) => {
+            node.apply(new SelectionChangeAction(this.currentRange)).apply(new LinkAnnotationAction({
+              link: { href: url, groupKey: groupKey },
+              newText: textChanged ? text : undefined,
+              needMergeNode: textChanged && this.currentSelectedNodes.length > 1,
+            }));
+          });
+          return;
+        }
+      }
+    };
+  }
+  renderBtnWrapper(renderBtn) {
+    return (h("div", { class: "toolbar-btn-link-wrapper" },
+      renderBtn(),
+      h("vega-rich-text-link-editor", { resetStatusAfterHide: false, status: "linkEdit", ref: (ref) => {
+          if (ref) {
+            this.linkEditorRef = ref;
+          }
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, this.handleLinkEditorChange);
+        } })));
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return (selectedBlocks.length > 1 ||
+      selectedNodes.some((node) => {
+        var _a;
+        return !(node instanceof RTETextNode) ||
+          node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code);
+      }));
+  }
+  onClick() {
+    this.currentRange = this.selectionController.getCurrentRange();
+    this.currentSelectedNodes = this.selectionController.getSelectedNodes();
+    this.currentSelectedText = this.currentRange.toString();
+    if (this.currentSelectedNodes.length > 0) {
+      this.linkEditorRef.record = {
+        text: this.currentSelectedText,
+        url: '',
+      };
+    }
+    void this.linkEditorRef.show();
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ link: link });
+})();
+__decorate$p([
+  MapToComponentField()
+], LinkToolbarButtonSlimmer.prototype, "selectionController", void 0);
+
+const indent = {
+  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="M0 64C0 46.3 14.3 32 32 32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64zM192 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32zm32 96H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 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-32zM127.8 268.6L25.8 347.9C15.3 356.1 0 348.6 0 335.3V176.7c0-13.3 15.3-20.8 25.8-12.6l101.9 79.3c8.2 6.4 8.2 18.9 0 25.3z"/></svg>`,
+};
+
+/**
+ * Action to toggle block indent annotation
+ */
+class IndentAnnotationAction extends AnnotationAction {
+  constructor(indent) {
+    super();
+    this.isFlushable = true;
+    this.indent = indent;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {IndentAnnotation} The annotation
+   */
+  toAnnotation() {
+    return new IndentAnnotation(this.indent);
+  }
+}
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class MoreIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'indent',
+      tooltip: {
+        text: 'More Indent',
+      },
+    });
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return (selectedBlocks.some((node) => node.type === 'list-item') ||
+      selectedNodes.some((node) => node instanceof RTEImageNode));
+  }
+  onClick() {
+    this.selectionController.getSelectedBlocks().forEach((item) => {
+      var _a, _b;
+      const indent = (_b = (_a = item.getAnnotationByType(BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
+      item.apply(new IndentAnnotationAction(indent + 1));
+    });
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ indent: indent });
+})();
+__decorate$o([
+  MapToComponentField()
+], MoreIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
+
+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 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;
+};
+class LessIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'outdent',
+      tooltip: {
+        text: 'Less Indent',
+      },
+    });
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return (selectedBlocks.some((node) => node.type === 'list-item') ||
+      selectedNodes.some((node) => node instanceof RTEImageNode));
+  }
+  onClick() {
+    this.selectionController.getSelectedBlocks().forEach((item) => {
+      var _a, _b;
+      const indent = (_b = (_a = item.getAnnotationByType(BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
+      const newIndent = indent > 1 ? indent - 1 : 0;
+      item.apply(new IndentAnnotationAction(newIndent));
+    });
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ outdent: outdent });
+})();
+__decorate$n([
+  MapToComponentField()
+], LessIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
+
+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 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;
+};
+class ImageToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'image',
+      tooltip: { text: 'Image' },
+    });
+    this.onClick = () => {
+      this.inputElementRef.click();
+    };
+    /**
+     * The below method is e2e-test covered in
+     * @see{module:should-update-url-properly-when-upload-images}
+     */
+    /* istanbul ignore next */
+    this.fileInputChange = (e) => {
+      e.stopPropagation();
+      const input = e.target;
+      if (!input.files.length) {
+        return;
+      }
+      const node = this.insertImageController.insertImageToCaretPosition(URL.createObjectURL(input.files[0]));
+      if (!this.updateNodeURLMap) {
+        this.updateNodeURLMap = new Map();
+      }
+      this.updateNodeURLMap.set(node, (url) => {
+        node.url = url;
+      });
+      const payload = {
+        file: input.files[0],
+        sendBackUploadedURLCallback: this.updateNodeURLMap.get(node),
+      };
+      this.imageInsertedEventEmitter.emit(payload);
+      input.value = '';
+    };
+  }
+  renderBtnWrapper(renderBtn) {
+    return (h("vega-box", null,
+      renderBtn({ showArrowIcon: false }),
+      h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.inputElementRef = node), accept: "image/*", onChange: this.fileInputChange })));
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ image: image });
+})();
+__decorate$m([
+  MapToComponentField()
+], ImageToolbarButtonSlimmer.prototype, "insertImageController", void 0);
+__decorate$m([
+  MapToComponentField()
+], ImageToolbarButtonSlimmer.prototype, "imageInsertedEventEmitter", void 0);
+__decorate$m([
+  MapToComponentField()
+], ImageToolbarButtonSlimmer.prototype, "selectionController", void 0);
+
+const ListUL = {
+  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="M64 144a48 48 0 1 0 0-96 48 48 0 1 0 0 96zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm48-208a48 48 0 1 0 -96 0 48 48 0 1 0 96 0z"/></svg>`,
+};
+
+const ListOL = {
+  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="M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H40c-13.3 0-24-10.7-24-24s10.7-24 24-24H56V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H32c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>`,
+};
+
+/**
+ * Action to toggle bullet annotation
+ */
+class TransformListAction extends ModifyContentAction {
+  constructor(listType, selectedBlocks) {
+    super();
+    this.type = ModifyContentActionType.TRANSFORM_LIST_BLOCK;
+    this.isFlushable = true;
+    this.listType = listType;
+    this.selectedBlocks = selectedBlocks;
+  }
+}
+
+/**
+ * Action to toggle bullet annotation
+ */
+class TransformParagraphAction extends ModifyContentAction {
+  constructor(selectedBlocks) {
+    super();
+    this.type = ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK;
+    this.isFlushable = true;
+    this.selectedBlocks = selectedBlocks;
+  }
+}
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'list-ul',
+      tooltip: {
+        text: 'Bullets',
+      },
+    });
+  }
+  isSelected() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return this.isListType(selectedBlocks);
+  }
+  onClick() {
+    if (this.isSelected()) {
+      this.deselectBulletList();
+    }
+    else {
+      this.selectBulletList();
+    }
+    void this.popoverRef.hide();
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => node instanceof RTEImageNode);
+  }
+  isListType(selectedBlocks, type = 'bullet-list') {
+    return (selectedBlocks.length > 0 &&
+      selectedBlocks.every((block) => block instanceof RTEListItemBlock && block.parent.type === type));
+  }
+  /**
+   * Deselect bullet list item to convert it to default paragraph
+   */
+  deselectBulletList() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks[0]) {
+      selectedBlocks[0].parent.apply(new TransformParagraphAction(selectedBlocks));
+    }
+  }
+  /**
+   * Select texts or list items or texts and list items to convert it to bullet list
+   */
+  selectBulletList() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks[0]) {
+      const selectedFirstBlock = selectedBlocks[0].type === 'list-item'
+        ? selectedBlocks[0].parent
+        : selectedBlocks[0];
+      selectedFirstBlock.apply(new TransformListAction('bullet-list', selectedBlocks));
+    }
+  }
+}
+__decorate$l([
+  MapToComponentField()
+], BulletsToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$l([
+  MapToComponentField()
+], BulletsToolbarButtonSlimmer.prototype, "popoverRef", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'list-ol',
+      tooltip: { text: 'Numbers' },
+    });
+  }
+  isSelected() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return this.isListType(selectedBlocks);
+  }
+  onClick() {
+    if (this.isSelected()) {
+      this.deselectNumberList();
+    }
+    else {
+      this.selectNumberList();
+    }
+    void this.popoverRef.hide();
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => node instanceof RTEImageNode);
+  }
+  isListType(selectedBlocks, type = 'number-list') {
+    return (selectedBlocks.length > 0 &&
+      selectedBlocks.every((block) => block instanceof RTEListItemBlock && block.parent.type === type));
+  }
+  /**
+   * Deselect bullet list item to convert it to default paragraph
+   */
+  deselectNumberList() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks[0]) {
+      selectedBlocks[0].parent.apply(new TransformParagraphAction(selectedBlocks));
+    }
+  }
+  /**
+   * Select texts or list items or texts and list items to convert it to bullet list
+   */
+  selectNumberList() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks[0]) {
+      const selectedFirstBlock = selectedBlocks[0].type === 'list-item'
+        ? selectedBlocks[0].parent
+        : selectedBlocks[0];
+      selectedFirstBlock.apply(new TransformListAction('number-list', selectedBlocks));
+    }
+  }
+}
+__decorate$k([
+  MapToComponentField()
+], NumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$k([
+  MapToComponentField()
+], NumbersToolbarButtonSlimmer.prototype, "popoverRef", void 0);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'list-ul',
+      tooltip: {
+        text: 'Bullets',
+      },
+    });
+    this.bulletsToolbarButtonSlimmer = new BulletsToolbarButtonSlimmer();
+    this.numbersToolbarButtonSlimmer = new NumbersToolbarButtonSlimmer();
+  }
+  componentWillRender() {
+    if (this.numbersToolbarButtonSlimmer.isSelected()) {
+      super.setIcon('list-ol');
+    }
+    else {
+      super.setIcon('list-ul');
+    }
+  }
+  renderBtnWrapper(renderBtn) {
+    return (h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", ref: (ref) => (this.popoverRef = ref) },
+      h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
+      h("div", { slot: "popover" }, this.renderContent())));
+  }
+  renderContent() {
+    return (h("vega-flex", { gap: "size-8", "justify-content": "center" },
+      h("div", null, this.bulletsToolbarButtonSlimmer.render()),
+      h("div", null, this.numbersToolbarButtonSlimmer.render())));
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return selectedNodes.some((node) => node instanceof RTEImageNode);
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'list-ul': ListUL,
+    'list-ol': ListOL,
+  });
+})();
+__decorate$j([
+  MapToComponentField()
+], BulletsNumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$j([
+  InjectVegaSlimmer()
+], BulletsNumbersToolbarButtonSlimmer.prototype, "bulletsToolbarButtonSlimmer", void 0);
+__decorate$j([
+  InjectVegaSlimmer()
+], BulletsNumbersToolbarButtonSlimmer.prototype, "numbersToolbarButtonSlimmer", void 0);
+__decorate$j([
+  MapToComponentMethod('componentWillRender')
+], BulletsNumbersToolbarButtonSlimmer.prototype, "componentWillRender", null);
+
+/**
+ * Action to toggle block horizontal alignment annotation
+ */
+class HorizontalAlignmentAnnotationAction extends AnnotationAction {
+  constructor(textAlign) {
+    super();
+    this.isFlushable = true;
+    this.textAlign = textAlign;
+  }
+  /**
+   * Converts the action to an annotation
+   *
+   * @returns {HorizontalAlignmentAnnotation} The annotation
+   */
+  toAnnotation() {
+    return new HorizontalAlignmentAnnotation(this.textAlign);
+  }
+}
+
+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 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;
+};
+class LeftAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'align-left',
+      tooltip: {
+        text: 'Left Align',
+      },
+    });
+  }
+  isSelected() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return (selectedBlocks.length > 0 &&
+      selectedBlocks.every((block) => {
+        var _a;
+        return ((_a = block.getAnnotationByType(BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'left';
+      }));
+  }
+  onClick() {
+    this.selectionController
+      .getSelectedBlocks()
+      .forEach((item) => item.apply(new HorizontalAlignmentAnnotationAction('left')));
+    void this.popoverRef.hide();
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'align-left': AlignLeft,
+  });
+})();
+__decorate$i([
+  MapToComponentField()
+], LeftAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$i([
+  MapToComponentField()
+], LeftAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
+
+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 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;
+};
+class CenterAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'align-center',
+      tooltip: {
+        text: 'Center Align',
+      },
+    });
+  }
+  isSelected() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return (selectedBlocks.length > 0 &&
+      selectedBlocks.every((block) => {
+        var _a;
+        return ((_a = block.getAnnotationByType(BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'center';
+      }));
+  }
+  onClick() {
+    this.selectionController
+      .getSelectedBlocks()
+      .forEach((item) => item.apply(new HorizontalAlignmentAnnotationAction('center')));
+    void this.popoverRef.hide();
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'align-center': AlignCenter,
+  });
+})();
+__decorate$h([
+  MapToComponentField()
+], CenterAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$h([
+  MapToComponentField()
+], CenterAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
+
+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 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;
+};
+class RightAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'align-right',
+      tooltip: {
+        text: 'Right Align',
+      },
+    });
+  }
+  isSelected() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return (selectedBlocks.length > 0 &&
+      selectedBlocks.every((block) => {
+        var _a;
+        return ((_a = block.getAnnotationByType(BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'right';
+      }));
+  }
+  onClick() {
+    this.selectionController
+      .getSelectedBlocks()
+      .forEach((item) => item.apply(new HorizontalAlignmentAnnotationAction('right')));
+    void this.popoverRef.hide();
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'align-right': AlignRight,
+  });
+})();
+__decorate$g([
+  MapToComponentField()
+], RightAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$g([
+  MapToComponentField()
+], RightAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
+
+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 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;
+};
+class JustifyAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'align-justify',
+      tooltip: {
+        text: 'Justified',
+      },
+    });
+  }
+  isSelected() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return (selectedBlocks.length > 0 &&
+      selectedBlocks.every((block) => {
+        var _a;
+        return ((_a = block.getAnnotationByType(BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'justify';
+      }));
+  }
+  onClick() {
+    this.selectionController
+      .getSelectedBlocks()
+      .forEach((item) => item.apply(new HorizontalAlignmentAnnotationAction('justify')));
+    void this.popoverRef.hide();
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'align-justify': AlignJustify,
+  });
+})();
+__decorate$f([
+  MapToComponentField()
+], JustifyAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$f([
+  MapToComponentField()
+], JustifyAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
+
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class HorizontalAlignmentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'align-left',
+      tooltip: {
+        text: 'Left Align',
+      },
+    });
+    this.leftAlignToolbarButtonSlimmer = new LeftAlignToolbarButtonSlimmer();
+    this.centerAlignToolbarButtonSlimmer = new CenterAlignToolbarButtonSlimmer();
+    this.rightAlignToolbarButtonSlimmer = new RightAlignToolbarButtonSlimmer();
+    this.justifiedToolbarButtonSlimmer = new JustifyAlignToolbarButtonSlimmer();
+  }
+  componentWillRender() {
+    if (this.leftAlignToolbarButtonSlimmer.isSelected()) {
+      super.setIcon('align-left');
+    }
+    else if (this.centerAlignToolbarButtonSlimmer.isSelected()) {
+      super.setIcon('align-center');
+    }
+    else if (this.rightAlignToolbarButtonSlimmer.isSelected()) {
+      super.setIcon('align-right');
+    }
+    else if (this.justifiedToolbarButtonSlimmer.isSelected()) {
+      super.setIcon('align-justify');
+    }
+    else {
+      super.setIcon('align-left');
+    }
+  }
+  renderBtnWrapper(renderBtn) {
+    return (h("vega-popover", { trigger: "click", showArrow: false, alignment: "center", placement: "bottom", ref: (ref) => (this.popoverRef = ref) },
+      h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
+      h("div", { slot: "popover" }, this.renderContent())));
+  }
+  renderContent() {
+    return (h("vega-flex", { gap: "size-8", "justify-content": "center" },
+      h("div", null, this.leftAlignToolbarButtonSlimmer.render()),
+      h("div", null, this.centerAlignToolbarButtonSlimmer.render()),
+      h("div", null, this.rightAlignToolbarButtonSlimmer.render()),
+      h("div", null, this.justifiedToolbarButtonSlimmer.render())));
+  }
+  isSelected() {
+    return false;
+  }
+}
+__decorate$e([
+  MapToComponentField()
+], HorizontalAlignmentToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$e([
+  InjectVegaSlimmer()
+], HorizontalAlignmentToolbarButtonSlimmer.prototype, "leftAlignToolbarButtonSlimmer", void 0);
+__decorate$e([
+  InjectVegaSlimmer()
+], HorizontalAlignmentToolbarButtonSlimmer.prototype, "centerAlignToolbarButtonSlimmer", void 0);
+__decorate$e([
+  InjectVegaSlimmer()
+], HorizontalAlignmentToolbarButtonSlimmer.prototype, "rightAlignToolbarButtonSlimmer", void 0);
+__decorate$e([
+  InjectVegaSlimmer()
+], HorizontalAlignmentToolbarButtonSlimmer.prototype, "justifiedToolbarButtonSlimmer", void 0);
+__decorate$e([
+  MapToComponentMethod('componentWillRender')
+], HorizontalAlignmentToolbarButtonSlimmer.prototype, "componentWillRender", null);
+
+let processing = false;
+/**
+ * Simulate a selection for browsers that don't support shadow selection.
+ * Cypress test case added in https://github.com/heartlandpayments/Vega/pull/1561/files#diff-83bdbaaf47fc156ab878099aa1f21b0e8ab92abe5852521299f1fb6efab001c2R300
+ */
+class ShadowSelection {
+  constructor() {
+    this.rangeCount = 0;
+    this.ranges = [];
+  }
+  /**
+   * Returns a Range object at a specified index.
+   *
+   * @param {number} index - A specified index.
+   * @returns {Range} - A Range object.
+   */
+  getRangeAt(index) {
+    return this.ranges[index];
+  }
+  /**
+   * Adds a Range to ranges array.
+   *
+   * @param {Range} range - The range of selection.
+   */
+  addRange(range) {
+    this.ranges.push(range);
+    this.rangeCount = this.ranges.length;
+    if (!processing) {
+      const windowSelection = window.getSelection();
+      windowSelection.removeAllRanges();
+      windowSelection.setBaseAndExtent(range.startContainer, range.startOffset, range.endContainer, range.endOffset);
+    }
+  }
+  /**
+   * Clears all ranges.
+   */
+  removeAllRanges() {
+    this.ranges = [];
+    this.rangeCount = 0;
+  }
+}
+/**
+ * Due to the ShadowRoot.getSelection is not a standard API, we add this polyfill to achieve this function.
+ *
+ * - On Chromium, calling document.getSelection will not pierce into the Shadow DOM and gives you some unhelpful high-level element.
+ *   But it does expose the non-standard getSelection method on the ShadowRoot.
+ *
+ * - On Firefox, it does not implement ShadowRoot.getSelection,
+ *   but document.getSelection will pierce through shadow dom and give you the exact element.
+ *
+ * - On Safari, Selection.getComposedRanges is supported as of v17. On versions before that,
+ *   ShadowRoot.getSelection is not supported and apparently document.getSelection does not pierce the Shadow DOM, meaning you are just out of luck.
+ *
+ * https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot#shadowroot.getselection
+ * https://stackoverflow.com/a/70523247
+ */
+class ShadowSelectionPolyfill {
+  constructor() {
+    this.supportShadowSelection = typeof window.ShadowRoot.prototype['getSelection'] === 'function';
+    this.supportBeforeInput = typeof window.InputEvent.prototype.getTargetRanges === 'function';
+    this.isFirefox = window.navigator.userAgent.toLowerCase().indexOf('firefox') > 0;
+    this.listen();
+  }
+  /**
+   * For Firefox, we directly use document.getSelection()
+   * For other browser which not support shadowroot.getSelection, we use this.selection which is built by us.
+   * For browser which supported shadowroot.getSelection, we use shadowRoot.getselection().
+   *
+   * @param {ShadowRoot} shadow - A shadow.
+   * @returns {Selection} - The shadow selection.
+   */
+  getSelection(shadow) {
+    if (this.supportShadowSelection) {
+      return shadow['getSelection']();
+    }
+    else {
+      return this.isFirefox
+        ? this.getFirefoxSelection()
+        : this.polyfilledShadowSelection;
+    }
+  }
+  /**
+   * Get selection in firefox.
+   *
+   * Example:
+   *
+   * <span>span1</span><span>span2</span><span>span3</span>
+   *
+   * In firefox, while selected `span2`, the range be likely to:
+   * range:
+   *   startContainer: #text 'span1'
+   *   startOffset: 5
+   * 	 endContainer: #text 'span3'
+   *   endOffset: 0
+   * start is end of brefore node and end is start of after node.
+   *
+   * So we should modify the startContainer and endContainer here.
+   *
+   * modified range:
+   *   startContainer: #text 'span2'
+   *   startOffset: 0
+   * 	 endContainer: #text 'span2'
+   *   endOffset: 5
+   *
+   * @returns {Selection} - document selection
+   */
+  getFirefoxSelection() {
+    const selection = document.getSelection();
+    const range = selection.getRangeAt(0);
+    const startNode = range.startContainer;
+    const endNode = range.endContainer;
+    if (startNode !== endNode && startNode.textContent.length === range.startOffset) {
+      const nextSibling = startNode.nodeType === Node.TEXT_NODE
+        ? startNode.parentNode.nextSibling
+        : startNode.nextSibling;
+      range.setStart(nextSibling.firstChild, 0);
+    }
+    if (endNode !== startNode && range.endOffset === 0) {
+      const previousSibling = endNode.nodeType === Node.TEXT_NODE
+        ? endNode.parentNode.previousSibling
+        : endNode.previousSibling;
+      range.setEnd(previousSibling.lastChild, previousSibling.lastChild.textContent.length);
+    }
+    return selection;
+  }
+  /**
+   * Sets up event listeners for `selectionchange` and `beforeinput` events to simulate shadow selection.
+   */
+  listen() {
+    if (this.isFirefox || this.supportShadowSelection || !this.supportBeforeInput)
+      return;
+    this.polyfilledShadowSelection = new ShadowSelection();
+    window.addEventListener('selectionchange', () => {
+      if (!processing) {
+        processing = true;
+        const active = getActiveElement();
+        if (active && active.hasAttribute('contenteditable')) {
+          // This command will not actually work, it only trigger the `beforeinput` event,
+          // the `beforeinput` event will prevented this command work.
+          document.execCommand('indent');
+        }
+        else {
+          this.polyfilledShadowSelection.removeAllRanges();
+        }
+        processing = false;
+      }
+    }, true);
+    window.addEventListener('beforeinput', (event) => {
+      if (processing) {
+        const ranges = event.getTargetRanges();
+        const range = ranges[0];
+        const newRange = new Range();
+        newRange.setStart(range.startContainer, range.startOffset);
+        newRange.setEnd(range.endContainer, range.endOffset);
+        this.polyfilledShadowSelection.removeAllRanges();
+        this.polyfilledShadowSelection.addRange(newRange);
+        event.preventDefault();
+        event.stopImmediatePropagation();
+      }
+    }, true);
+  }
+}
+const ShadowSelectionPolyfill$1 = new ShadowSelectionPolyfill();
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The text selection controller
+ */
+class SelectionController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.updateCaretPositionTaskQueue = new SynchronizeTaskQueue();
+    this.handleSelectionWithDebounce = debounce(this.handleSelectionChange, SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, this);
+    this.selectedNodes = [];
+    /**
+     * Sets the next selection state with specified start and end nodes, offsets, and a timestamp.
+     *
+     * Example:
+     * Before insert text start offset is 0, the new start offset should update to 1
+     * Before delete text start offset is 1, the new start offset should update to 0
+     *
+     * @param {SelectionStateType['startNode']} startNode - The starting node of the selection range. It is a Node object representing the node where the selection range starts.
+     * @param {number} startOffset - The `startNode` where the selection range should start. It indicates the position within the `startNode` where the selection should begin.
+     * @param {SelectionStateType['endNode']} endNode - The ending node of the selection range. If a value is provided for `endNode`, it will be used as the ending node of the selection range.
+     * @param {number} endOffset - The ending offset within the `endNode` where the selection range should end.
+     */
+    this.createUpdateSelectionRangeTask = async (startNode, startOffset, endNode, endOffset) => {
+      // add await Promise.resolve to put the code behind to a micro task
+      await Promise.resolve();
+      const selection = this.getSelection();
+      if (typeof startNode === 'function') {
+        startNode = startNode();
+      }
+      if (typeof endNode === 'function') {
+        endNode = endNode();
+      }
+      if (selection && startNode) {
+        const range = new Range();
+        range.setStart(startNode, startOffset);
+        range.setEnd(endNode, endOffset);
+        this.setSelectionRange(range);
+      }
+    };
+  }
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
+   */
+  connectedCallback() {
+    this.registerSelectionRangeChangeObserver();
+  }
+  /**
+   * Component lifecycle - [disconnectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaRichTextEditor.componentDidLoad}
+   */
+  componentDidLoad() {
+    document.addEventListener('selectionchange', this.handleSelectionWithDebounce);
+  }
+  /**
+   * Watches the internal value of the editor
+   */
+  watchValueUpdate() {
+    this.restoreSelection();
+  }
+  /**
+   * Update the caret position after the component re-render
+   */
+  async updateCaretPosition() {
+    if (this.updateCaretPositionTaskQueue.queue.length) {
+      await this.updateCaretPositionTaskQueue.runTask();
+    }
+  }
+  /**
+   * Get the current selection range
+   *
+   * @returns {Range} - The current selection range
+   */
+  getCurrentRange() {
+    return this.currentRange;
+  }
+  /**
+   * Get the selected rich text node
+   *
+   * @returns {RTENode[]} Selected rich text nodes
+   */
+  getSelectedNodes() {
+    return Array.from(this.selectionMap.values()).flat();
+  }
+  /**
+   * Get the selected rich text blocks
+   *
+   * @returns {RTEBlock[]} Selected rich text blocks
+   */
+  getSelectedBlocks() {
+    return Array.from(this.selectionMap.keys());
+  }
+  /**
+   * Sets the next selection state with specified start and end nodes, offsets, push the update task to a queue
+   *
+   * @param {SelectionStateType['startNode']} startNode - The starting node of the selection range. It is a Node object representing the node where the selection range starts.
+   * @param {number} startOffset - The `startNode` where the selection range should start. It indicates the position within the `startNode` where the selection should begin.
+   * @param {SelectionStateType['endNode']} [endNode] - The ending node of the selection range. If a value is provided for `endNode`, it will be used as the ending node of the selection range.
+   * @param {number} [endOffset] - The ending offset within the `endNode` where the selection range should end.
+   * @param {boolean} [immediatelyRun] - Should the task run immediately. default is false
+   */
+  enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset, immediatelyRun = false) {
+    endNode = endNode || startNode;
+    endOffset = endOffset || startOffset;
+    void this.updateCaretPositionTaskQueue.enqueue({
+      /** Add task to the queue and run it until component did render */
+      run: async () => {
+        try {
+          await this.createUpdateSelectionRangeTask(startNode, startOffset, endNode, endOffset);
+        }
+        catch (e) {
+          LogUtility.error('Set range error.', e);
+        }
+      },
+    }, immediatelyRun);
+  }
+  /**
+   * Set selection with a new range
+   *
+   * @param {Range} range - The range to set
+   */
+  setSelectionRange(range) {
+    const selection = this.getSelection();
+    selection.removeAllRanges();
+    selection.addRange(range);
+    this.saveSelection();
+  }
+  /**
+   * Save the current selection range detail
+   */
+  saveSelection() {
+    const selection = this.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      this.currentRange = selection.getRangeAt(0);
+    }
+  }
+  /**
+   * Restore the selection to the current selected nodes
+   */
+  restoreSelection() {
+    if (this.selectedNodes.length > 0) {
+      const startNode = this.selectedNodes[0];
+      const endNode = this.selectedNodes.length > 1 ? this.selectedNodes[this.selectedNodes.length - 1] : startNode;
+      if (startNode === endNode && startNode.text.length === 0) {
+        this.enqueueSelectionRangeFutureState(() => this.getFirstChildDOMByEntity(startNode), ZERO_WIDTH_SPACE.length);
+      }
+      else {
+        const { startContainer, endContainer, startOffset, endOffset } = this.currentRange;
+        if (stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
+          stateEntityRenderingRegistry.getDOMByEntity(endNode) === endContainer.parentElement) {
+          this.enqueueSelectionRangeFutureState(() => this.getFirstChildDOMByEntity(startNode), startOffset, () => this.getFirstChildDOMByEntity(endNode), endOffset);
+        }
+        else {
+          this.enqueueSelectionRangeFutureState(() => this.getFirstChildDOMByEntity(startNode), 0, () => this.getFirstChildDOMByEntity(endNode), endNode.text.length);
+        }
+      }
+      this.selectedNodes = [];
+    }
+  }
+  /**
+   * Get the first child DOM node by entity
+   *
+   * @param {RTETextNode} node - The entity to retrieve the DOM element for.
+   * @returns {ChildNode} The first child DOM after entity conversion
+   */
+  getFirstChildDOMByEntity(node) {
+    return stateEntityRenderingRegistry.getDOMByEntity(node).firstChild;
+  }
+  /**
+   * Get the rich text content selected range
+   *
+   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
+   */
+  getSelection() {
+    const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
+    return ShadowSelectionPolyfill$1.getSelection(richTextContentRef.shadowRoot);
+  }
+  /**
+   * Get selected rich text
+   */
+  handleSelectionChange() {
+    const selection = this.getSelection();
+    if (!selection || selection.rangeCount === 0)
+      return;
+    this.clearSelectionMap();
+    this.saveSelection();
+    const range = selection.getRangeAt(0);
+    const commonAncestor = range.commonAncestorContainer;
+    const selectedNodes = [];
+    /**
+     * Rich text node filter
+     *
+     * @param {Node} node - Start node
+     */
+    const filterNode = (node) => {
+      if (!range.intersectsNode(node)) {
+        return;
+      }
+      if (node.nodeType === Node.TEXT_NODE) {
+        const currentNode = node.parentElement;
+        const nodeEntity = stateEntityRenderingRegistry.getEntityByDOM(currentNode);
+        if (nodeEntity instanceof RTENode) {
+          selectedNodes.push(nodeEntity);
+          return;
+        }
+      }
+      if (node.nodeType === Node.ELEMENT_NODE) {
+        const entityElement = node.nodeName === 'VEGA-RICH-TEXT-IMAGE-EDITOR'
+          ? node.querySelector('img')
+          : node;
+        const nodeEntity = stateEntityRenderingRegistry.getEntityByDOM(entityElement);
+        if (nodeEntity instanceof RTENode) {
+          selectedNodes.push(nodeEntity);
+          return;
+        }
+      }
+      node.childNodes.forEach(filterNode);
+    };
+    filterNode(commonAncestor);
+    selectedNodes.forEach((node) => {
+      if (this.selectionMap.has(node.parentBlock)) {
+        this.selectionMap.get(node.parentBlock).push(node);
+      }
+      else {
+        this.selectionMap.set(node.parentBlock, [node]);
+      }
+    });
+    this.getSelectedNodes().forEach((node) => node.apply(new SelectionChangeAction(range)));
+  }
+  /**
+   * Clear the selection map
+   */
+  clearSelectionMap() {
+    this.getSelectedNodes().forEach((node) => {
+      node.annotationMap.delete(InternalAnnotationTypeEnum.SELECTION_RANGE);
+    });
+    this.selectionMap = new Map();
+  }
+  /**
+   * Check if the selection range change is acceptable
+   *
+   * @returns {boolean} - Returns a boolean value.
+   */
+  isAcceptableSelectionRangeChange() {
+    return true;
+  }
+  /**
+   * Register the selection range change observer
+   */
+  registerSelectionRangeChangeObserver() {
+    this.selectionRangeChangeObserver = new Observer(this.isAcceptableSelectionRangeChange.bind(this), (payload) => {
+      this.selectedNodes.push(payload.node);
+    });
+    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
+  }
+}
+SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME = 50;
+__decorate$d([
+  MapToComponentField()
+], SelectionController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$d([
+  MapToComponentField({ writable: true })
+], SelectionController.prototype, "selectionMap", void 0);
+__decorate$d([
+  MapToComponentField()
+], SelectionController.prototype, "host", void 0);
+__decorate$d([
+  MapToComponentField()
+], SelectionController.prototype, "value", void 0);
+__decorate$d([
+  MapToComponentField()
+], SelectionController.prototype, "valueController", void 0);
+__decorate$d([
+  MapToComponentMethod('connectedCallback')
+], SelectionController.prototype, "connectedCallback", null);
+__decorate$d([
+  MapToComponentMethod('disconnectedCallback')
+], SelectionController.prototype, "disconnectedCallback", null);
+__decorate$d([
+  MapToComponentMethod('componentDidLoad')
+], SelectionController.prototype, "componentDidLoad", null);
+__decorate$d([
+  MapToComponentMethod('watchValueUpdate')
+], SelectionController.prototype, "watchValueUpdate", null);
+__decorate$d([
+  MapToComponentMethod('componentDidUpdate')
+], SelectionController.prototype, "updateCaretPosition", null);
+
+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;
+};
+/**
+ * The value controller is responsible for updating the value of the rich text editor.
+ */
+class ValueController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
+   */
+  connectedCallback() {
+    const flushChangesWithDebounce = debounce(() => {
+      void this.valueController.flushChanges(this.value);
+    }, ValueController.VALUE_CHANGE_DEBOUNCE_TIME, this);
+    this.flushChangeObserver = new Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
+    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
+  }
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
+  }
+  /**
+   * Watches the value of the editor and updates the internal value.
+   */
+  watchValueUpdate() {
+    if (!this.value || this.value.blocks.length === 0) {
+      this.value = VegaRTEContent.createEmptyContent();
+    }
+    else {
+      this.changeEventEmitter.emit(this.value);
+      ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+        host: this.host,
+        detail: this.value,
+      });
+    }
+  }
+  /**
+   * Updates the value of the editor and restore the selection.
+   *
+   * @param {VegaRTEContent} newValue The new value to set.
+   */
+  async flushChanges(newValue) {
+    this.value = newValue.clone();
+    await waitForComponentDidRender(this.host);
+  }
+  /**
+   * Determines whether the observer should accept changes.
+   *
+   * @returns {boolean} Always returns true in the current implementation.
+   */
+  isAcceptableFlushChange() {
+    return true;
+  }
+}
+ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
+__decorate$c([
+  MapToComponentField()
+], ValueController.prototype, "host", void 0);
+__decorate$c([
+  MapToComponentField({ writable: true })
+], ValueController.prototype, "value", void 0);
+__decorate$c([
+  MapToComponentField()
+], ValueController.prototype, "changeEventEmitter", void 0);
+__decorate$c([
+  MapToComponentField()
+], ValueController.prototype, "valueController", void 0);
+__decorate$c([
+  MapToComponentMethod('connectedCallback')
+], ValueController.prototype, "connectedCallback", null);
+__decorate$c([
+  MapToComponentMethod('disconnectedCallback')
+], ValueController.prototype, "disconnectedCallback", null);
+__decorate$c([
+  MapToComponentMethod('watchValueUpdate')
+], ValueController.prototype, "watchValueUpdate", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** The `DarkModeStateControllerSlimmer` class monitors dark mode changes and updates the state accordingly. */
+class DarkModeStateControllerSlimmer extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]
+   * Register an observer to watch for dark mode updates, which will cause the component to update.
+   */
+  connectedCallback() {
+    this.observer = new Observer(this.isAcceptObserver.bind(this), (isDark) => {
+      this.isInDarkMode = isDark;
+    });
+    ChangeManager.register(DARK_MODE_CHANGE, this.observer);
+  }
+  /**
+   * cancel dark mode observer when disconnectedCallback
+   */
+  disconnectResizeObserver() {
+    ChangeManager.unregister(DARK_MODE_CHANGE, this.observer);
+  }
+  /**
+   * Determines whether the observer should accept changes.
+   *
+   * @returns {boolean} Always returns true in the current implementation.
+   */
+  isAcceptObserver() {
+    return true;
+  }
+}
+__decorate$b([
+  MapToComponentField({ writable: true })
+], DarkModeStateControllerSlimmer.prototype, "isInDarkMode", void 0);
+__decorate$b([
+  MapToComponentMethod('connectedCallback')
+], DarkModeStateControllerSlimmer.prototype, "connectedCallback", null);
+__decorate$b([
+  MapToComponentMethod('disconnectedCallback')
+], DarkModeStateControllerSlimmer.prototype, "disconnectResizeObserver", null);
+
+/**
+ * The rich text content controller
+ */
+class RichTextContentController {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  /**
+   * Sync rich text content editable with disabled property
+   *
+   */
+  syncRichTextContentEditable() {
+    this.editor.richTextContentEditable = !this.editor.disabled;
+  }
+}
+
+/**
+ * Replace the text node selected content to new text
+ *
+ * @example selectedNode.apply(new ReplaceSelectedTextAction(insertText))
+ */
+class ReplaceSelectedTextAction extends ModifyContentAction {
+  constructor(text) {
+    super();
+    this.type = ModifyContentActionType.REPLACE_SELECTED_TEXT;
+    this.textToBeInsert = '';
+    this.textToBeInsert = text;
+  }
+}
+
+const ROOT_CONTAINER_CLASS_NAME = 'rich-text-content';
+/** This code snippet is defining an abstract class named `BaseHandler` with an abstract method `execute`. */
+class BaseHandler {
+  /**
+   * The function `execute` initializes the current state and selection, and then handles an event if provided.
+   *
+   * @param {VegaRTEContent} currentState - The current state of the VegaRTE content.
+   * @param {SelectionController} selectionController - Manages the selection of items in the user interface.
+   * @param {InputEvent} [event] - It is used to pass an input event to the method for handling.
+   */
+  execute(currentState, selectionController, event) {
+    this.initCurrentStateAndSelection(currentState, selectionController);
+    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'.
+   *
+   * @param {HTMLElement} element - HTMLElement
+   * @returns {boolean} The boolean value
+   */
+  isRootContainer(element) {
+    return (element &&
+      element.nodeType === Node.ELEMENT_NODE &&
+      element.classList.contains(ROOT_CONTAINER_CLASS_NAME));
+  }
+  /**
+   * Checks if a given HTML element represents an empty paragraph containing only a line break element.
+   *
+   * @param {HTMLElement} node - An HTMLElement node that represents a paragraph element in the HTML document.
+   * @returns {boolean} boolean result
+   */
+  isEmptyParagraph(node) {
+    return node && node.childNodes && node.childNodes.length === 0;
+  }
+  /**
+   * Removes the selected text at the start and end of a range in a Rich Text Editor.
+   */
+  removeRangeStartAndEndSelectedText() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    if (selectedNodes[0] instanceof RTETextNode) {
+      selectedNodes[0].apply(new ReplaceSelectedTextAction(''));
+    }
+    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof RTETextNode) {
+      selectedNodes[selectedNodes.length - 1].apply(new ReplaceSelectedTextAction(''));
+    }
+  }
+  /**
+   * 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));
+          }
+        }
+      }
+    }
+  }
+  /**
+   * 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[1];
+      }
+    }
+    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.
+   */
+  createEmptyParagraph() {
+    const paragraph = new RTETextBlock(generateUUID(), 'paragraph');
+    const textNode = new RTETextNode(`${paragraph.id}1`, '', paragraph);
+    paragraph.apply(new AppendChildNodesAction([textNode]));
+    return paragraph;
+  }
+  /**
+   * The method is used to get the cursor node after the component did update
+   * Returns the parent element if the node type is 'IMAGE', otherwise it returns the first child element of the DOM element associated with the given RTENode.
+   *
+   * @param {RTENode} node - An object representing a node in a Rich Text Editor.
+   * @returns {()=>Nullable<Node>} The rich text node render element
+   */
+  getTheNodeElementCallback(node) {
+    return () => {
+      const dom = stateEntityRenderingRegistry.getDOMByEntity(node);
+      if (dom) {
+        return node.type === 'IMAGE' ? dom.parentElement : dom.firstChild;
+      }
+    };
+  }
+  /**
+   * 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.
+   *
+   * @param {VegaRTEContent} currentState - The current state of a Vega runtime environment content.
+   * @param {SelectionController} selectionController - It is used to manage the selection of content within the VegaRTE editor.
+   */
+  initCurrentStateAndSelection(currentState, selectionController) {
+    this.currentState = currentState;
+    this.selectionController = selectionController;
+  }
+}
+
+/**
+ * Insert a new node before a existing node
+ *
+ * @example currentNode.parentBlock.apply(new InsertNodesBeforeAction(currentNode, newNode, ...))
+ */
+class InsertNodesBeforeAction extends ModifyContentAction {
+  constructor(referNode, ...nodesToBeInserted) {
+    super();
+    this.type = ModifyContentActionType.INSERT_NODES_BEFORE;
+    this.referNode = referNode;
+    this.nodesToBeInserted = nodesToBeInserted;
+  }
+}
+
+/** 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 {
+  /**
+   * Update the state value when user type character
+   *
+   * @param {InputEvent} event - The input event object
+   */
+  handleEvent(event) {
+    const text = event.data;
+    const { startContainer, startOffset } = this.selectionController.getCurrentRange();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    if (selectedNodes.length < 2) {
+      if (!selectedNodes.length && this.isRootContainer(startContainer)) {
+        this.insertTextToRoot(text);
+        const container = event.currentTarget;
+        this.selectionController.enqueueSelectionRangeFutureState(() => container.querySelector('p span').firstChild, text.length);
+      }
+      else {
+        let nextOffset = startOffset + text.length;
+        let updateFlag = false;
+        let cursorNode = selectedNodes[0];
+        if (cursorNode instanceof RTETextNode && cursorNode.text === '\n') {
+          cursorNode = this.insertTextToLineBreakNode(cursorNode, text);
+          updateFlag = true;
+        }
+        else {
+          if (startContainer.nodeValue === ZERO_WIDTH_SPACE &&
+            startOffset === ZERO_WIDTH_SPACE.length) {
+            startContainer.nodeValue = '';
+            nextOffset = nextOffset - ZERO_WIDTH_SPACE.length;
+          }
+          if (cursorNode instanceof RTETextNode) {
+            updateFlag = true;
+            cursorNode.apply(new ReplaceSelectedTextAction(text));
+          }
+        }
+        updateFlag &&
+          this.selectionController.enqueueSelectionRangeFutureState(this.getTheNodeElementCallback(cursorNode), nextOffset);
+      }
+    }
+    else {
+      // The selected nodes is multiple nodes
+      const cursorNode = this.replaceSelectedNodesWithText(text);
+      this.selectionController.enqueueSelectionRangeFutureState(this.getTheNodeElementCallback(cursorNode), cursorNode instanceof RTETextNode
+        ? Math.min(startOffset + text.length, cursorNode.text.length)
+        : startOffset);
+    }
+  }
+  /**
+   * Insert the text in root element when root container is empty, should create text block and text node
+   *
+   * @param {string} text The insert text
+   */
+  insertTextToRoot(text) {
+    const id = generateUUID();
+    const textBlock = RTETextBlock.from({
+      id,
+      type: 'paragraph',
+      nodes: [{ id: id + '1', type: 'text', text }],
+    });
+    this.currentState.apply(new AppendChildNodesAction([textBlock]));
+  }
+  /**
+   * Insert text to a line break node need a special logic if the line break has a next text node.
+   *
+   * @param {RTETextNode} lineBreakNode The current line break node, the text value is \n
+   * @param {string} text The text need to insert
+   * @returns {Nullable<RTETextNode>} The new text node or the current line break node
+   */
+  insertTextToLineBreakNode(lineBreakNode, text) {
+    const { startOffset, endOffset } = this.selectionController.getCurrentRange();
+    const textBlock = lineBreakNode.parentBlock;
+    const index = textBlock.nodes.indexOf(lineBreakNode);
+    if (startOffset === 0 && startOffset === endOffset && textBlock.nodes[index + 1]) {
+      const newTextNode = lineBreakNode.cloneWithText(text);
+      textBlock.apply(new InsertNodesBeforeAction(lineBreakNode, newTextNode));
+      return newTextNode;
+    }
+    else {
+      lineBreakNode.apply(new UpdateTextAction(text));
+      return lineBreakNode;
+    }
+  }
+}
+
+/**
+ * Break the current block after press enter, this action is similar with the SplitBlockWithNodeAction,
+ * The SplitBlockWithNodeAction split the current block to two same type blocks, but this action will create new paragraph or list item when break at start or end.
+ * The property `newBlock` use to store the new create block if need.
+ *
+ * @example currentBlock.apply(new BreakSingleBlockAction(startContainerNode, startOffset))
+ */
+class BreakSingleBlockAction extends ModifyContentAction {
+  constructor(startContainerNode, startOffset) {
+    super();
+    this.type = ModifyContentActionType.BREAK_SINGLE_BLOCK;
+    this.startContainerNode = startContainerNode;
+    this.startOffset = startOffset;
+  }
+}
+
+/** Insert a paragraph in a rich text editor based on the current selection and event. User type enter will trigger this callback */
+class InsertParagraphHandler extends BaseHandler {
+  /**
+   * Create new paragraph node and add node to state value
+   */
+  handleEvent() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks.length < 2) {
+      this.breakSingleBlock();
+    }
+    else {
+      this.breakMultipleBlocks();
+    }
+  }
+  /**
+   * Handles breaking blocks in an RTE editor based on the current selection and position.
+   */
+  breakMultipleBlocks() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const range = this.selectionController.getCurrentRange();
+    const cursorNode = this.removeSelectionRange();
+    // If the start or end block contains a list item block, it needs to be processed separately
+    if ((selectedBlocks.length && selectedBlocks[0].type === 'list-item') ||
+      selectedBlocks[selectedBlocks.length - 1].type === 'list-item') {
+      const firstBlock = cursorNode.parentBlock;
+      const lastBlock = selectedBlocks[selectedBlocks.length - 1];
+      /**
+       * First block is list item
+       * --before--
+       * ul
+       *  - li
+       * p
+       *  - span
+       * --after--
+       * ul
+       *  - li
+       *  - li
+       */
+      /**
+       * End block is list item
+       * --before--
+       * p
+       *  - span
+       * ul
+       *  - li
+       * --after--
+       * p
+       *  - span
+       * p
+       *  - span
+       */
+      if (firstBlock.type !== lastBlock.type &&
+        range.startContainer.nodeType === range.endContainer.nodeType) {
+        firstBlock.apply(new MergeTwoBlocksNodesAction(lastBlock));
+        const splitAction = new SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
+        firstBlock.apply(splitAction);
+        this.switchCaretPositionToNextElement(splitAction.newBlock);
+      }
+    }
+  }
+  /**
+   * Handles breaking a single block in an RTE editor based on the current selection and position.
+   */
+  breakSingleBlock() {
+    const cursorNode = this.removeSelectionRange();
+    const currentBlock = cursorNode.parentBlock;
+    const { startOffset } = this.selectionController.getCurrentRange();
+    if (currentBlock) {
+      const breakAction = new BreakSingleBlockAction(cursorNode, startOffset);
+      currentBlock.apply(breakAction);
+      this.switchCaretPositionToNextElement(breakAction.newBlock);
+    }
+  }
+  /**
+   * Returns the next sibling element of a given block element in a rich text editor.
+   *
+   * @param {RTEBlock} newBlock - The new block after break
+   * @returns {Node | null} the next sibling element of the current block element, or the first child element of the next sibling element if it exists.
+   */
+  getNextBlockElement(newBlock) {
+    if (newBlock && newBlock['nodes']) {
+      const firstNode = newBlock['nodes'][0];
+      const element = stateEntityRenderingRegistry.getDOMByEntity(firstNode);
+      if (firstNode.type === 'TEXT') {
+        return element.firstChild;
+      }
+      else {
+        return element.parentElement;
+      }
+    }
+  }
+  /**
+   * Moves the caret to the next block element in a rich text editor.
+   *
+   * @param {RTEBlock} newBlock - Represents a new create block element in a rich text editor.
+   */
+  switchCaretPositionToNextElement(newBlock) {
+    this.selectionController.enqueueSelectionRangeFutureState(() => this.getNextBlockElement(newBlock), 0);
+  }
+}
+
+/**
+ * Split the block with a split point node
+ *
+ * @example block.apply(new SplitBlockWithNodeAction(node, offset))
+ */
+class LineBreakSingleBlockAction extends ModifyContentAction {
+  constructor(startContainerNode, startOffset) {
+    super();
+    this.type = ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK;
+    this.startContainerNode = startContainerNode;
+    this.startOffset = startOffset;
+  }
+}
+
+/**
+ * Split the block with a split point node
+ *
+ * @example block.apply(new SplitBlockWithNodeAction(node, offset))
+ */
+class lineBreakMultipleBlocksAction extends ModifyContentAction {
+  constructor(selectedBlocks) {
+    super();
+    this.type = ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS;
+    this.selectedBlocks = selectedBlocks;
+  }
+}
+
+/** User press shift + enter will tigger this callback */
+class InsertLineBreakHandler extends BaseHandler {
+  /**
+   * Create new line break node and add node to state value
+   */
+  handleEvent() {
+    const range = this.selectionController.getCurrentRange();
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (this.isRootContainer(range.startContainer)) {
+      this.breakNewBlock();
+    }
+    if (selectedBlocks.length < 2) {
+      this.breakSingleBlock();
+    }
+    else {
+      this.breakMultipleBlocks();
+    }
+  }
+  /**
+   * Insert the \n in text element when root container is empty, should create text block and text node
+   * <p>
+   *  <span></span>
+   *  <span></span>
+   * </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 the selected node is a text node
+   * <p>
+   *  <span>text</span>
+   * </p>
+   * Insert a line break and the selected node will be split into three text nodes
+   * <p>
+   *  <span>te</span>
+   *  <br>
+   *  <span>xt</span>
+   * </p>
+   */
+  breakSingleBlock() {
+    const range = this.selectionController.getCurrentRange();
+    const cursorNode = this.removeSelectionRange();
+    const currentBlock = cursorNode.parentBlock;
+    if (currentBlock) {
+      const lineBreakAction = new LineBreakSingleBlockAction(cursorNode, range.startOffset);
+      currentBlock.apply(lineBreakAction);
+      this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
+    }
+  }
+  /**
+   * Handles breaking blocks in an RTE editor based on the current selection and position.
+   */
+  breakMultipleBlocks() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const cursorNode = this.removeSelectionRange();
+    const lineBreakAction = new lineBreakMultipleBlocksAction(selectedBlocks);
+    cursorNode.parentBlock.apply(lineBreakAction);
+    this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
+  }
+  /**
+   * 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.
+   */
+  switchCaretPositionToSpecifiedNode(lineBreakNode) {
+    this.selectionController.enqueueSelectionRangeFutureState(() => this.getNextNodeElement(lineBreakNode), 0);
+  }
+  /**
+   * Returns the next sibling element of a given block element in a rich text editor.
+   *
+   * @param {RTENode} lineBreakNode - The `lineBreakNode` parameter is of type `RTENode`, which is used to represent the new line break element in a rich text editor.
+   * @returns {HTMLElement | null} the next sibling element of the current line break element, or the next sibling element if it exists.
+   */
+  getNextNodeElement(lineBreakNode) {
+    const currentElement = stateEntityRenderingRegistry.getDOMByEntity(lineBreakNode);
+    if (currentElement) {
+      return currentElement.nextElementSibling || currentElement;
+    }
+  }
+  /**
+   * 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);
+  }
+}
+
+/**
+ * Delete text or image when press delete
+ *
+ * @example currentBlock.apply(new DeleteBlockContentAction(startContainerNode, startOffset))
+ */
+class DeleteBlockContentAction extends ModifyContentAction {
+  constructor(startContainerNode, startOffset) {
+    super();
+    this.type = ModifyContentActionType.DELETE_BLOCK_CONTENT;
+    this.startContainerNode = startContainerNode;
+    this.startOffset = startOffset;
+  }
+}
+
+/** Handles the deletion of content within a VegaRTE editor. User press backspace or delete will trigger this method */
+class DeleteContentHandler extends BaseHandler {
+  /**
+   * Delete the selected node from the current state.
+   */
+  handleEvent() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks.length < 2) {
+      this.deleteContentWithSingleBlock();
+    }
+    else {
+      this.deleteContentWithMultipleNodes();
+    }
+  }
+  /**
+   * Handles the deletion of content within a single block in an RTE editor.
+   */
+  deleteContentWithSingleBlock() {
+    const range = this.selectionController.getCurrentRange();
+    const { startOffset, endOffset, startContainer, endContainer } = range;
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    if (startOffset !== endOffset || startContainer !== endContainer) {
+      this.deleteContentWithMultipleNodes();
+    }
+    else if (selectedBlocks[0]) {
+      const deleteAction = new DeleteBlockContentAction(selectedNodes[0], startOffset);
+      selectedBlocks[0].apply(deleteAction);
+      if (deleteAction.previousNode) {
+        const nextOffset = deleteAction.previousNode === selectedNodes[0]
+          ? Math.max(0, startOffset - 1)
+          : this.getNodeEndOffset(deleteAction.previousNode);
+        this.selectionController.enqueueSelectionRangeFutureState(this.getTheNodeElementCallback(deleteAction.previousNode), nextOffset);
+      }
+      else if (this.currentState.blocks.length === 0) {
+        // Add a empty paragraph if delete all content to make sure the caret position
+        this.insertDefaultParagraph();
+      }
+    }
+  }
+  /**
+   * 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(this.getTheNodeElementCallback(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 lastSelectedNode = selectedNodes[selectedNodes.length - 1];
+    if (selectedNodes.length > 1 &&
+      lastSelectedNode instanceof RTETextNode &&
+      lastSelectedNode.isEmpty()) {
+      lastSelectedNode.parentBlock.apply(new RemoveChildAction(lastSelectedNode));
+    }
+    this.convertFirstBlockToParagraph(cursorNode.parentBlock);
+    this.selectionController.enqueueSelectionRangeFutureState(this.getTheNodeElementCallback(cursorNode), range.startOffset);
+  }
+  /**
+   * If the first block is not paragraph, convert the block to paragraph after delete all text
+   *
+   * @param {RTEBlock} block - The first block instance
+   */
+  convertFirstBlockToParagraph(block) {
+    const firstBlock = this.currentState.blocks[0];
+    if (firstBlock === block &&
+      block instanceof RTETextBlock &&
+      block.nodes.length === 1 &&
+      block.nodes[0].isEmpty() &&
+      block.type !== 'paragraph') {
+      const paragraph = this.createEmptyParagraph();
+      paragraph.apply(new ReplaceChildNodesAction(block.nodes));
+      block.parent.apply(new InsertBlocksBeforeAction(block, paragraph));
+      block.parent.apply(new RemoveChildAction(block));
+    }
+  }
+  /**
+   * Returns the end offset of a given node in a Rich Text Editor based on its type and text content.
+   *
+   * @param {RTENode} node - text node or image node
+   * @returns {number} Returns a number value.
+   */
+  getNodeEndOffset(node) {
+    if (node.type === 'IMAGE') {
+      return 1;
+    }
+    else if (node.type === 'TEXT') {
+      return node['text'] === '\n' ? 0 : node['text'].length;
+    }
+  }
+}
+
+/**
+ * Abstract class of element to DTO handler
+ */
+class ElementToDTOHandlerAbstract {
+  /**
+   * At new of handler, We need to inherit the style of the parent element
+   *   and clone an empty element so that the child elements can be appended.
+   *
+   * @param {HTMLElement} element - Current element.
+   */
+  constructor(element) {
+    this.inheritStyles = [
+      'fontWeight',
+      'textAlign',
+      'fontStyle',
+      'textDecoration',
+      'color',
+    ];
+    this.inheritClasses = [
+      'v-rte--code',
+      'v-rte--horizontal-alignment-left',
+      'v-rte--horizontal-alignment-right',
+      'v-rte--horizontal-alignment-center',
+      'v-rte--horizontal-alignment-justify',
+      'v-rte--strikethrough',
+      'v-rte--underline',
+    ];
+    this.setEntityElementStyle(element);
+    this.setElement(element);
+  }
+  /* istanbul ignore next */
+  // eslint-disable-next-line jsdoc/require-returns-check
+  /**
+   * Can be handle, the class inherit this class should implement it.
+   *
+   * @param {HTMLElement} element - Current element.
+   * @returns {boolean} Can be handle.
+   */
+  static canHandle(element) {
+    throw new Error(`Method not implemented! ${element}`);
+  }
+  /**
+   * Transform current text block to a DTO.
+   *
+   * @returns {RTETextBlock} Current text block.
+   */
+  static currentTextBlockElementToDTO() {
+    const element = this.getCurrentTextBlockElement();
+    const firstNode = element.firstChild;
+    if (firstNode && firstNode.nodeName === 'SPAN' && firstNode.textContent === '\n') {
+      firstNode.remove();
+    }
+    if (element.childNodes.length > 0) {
+      const block = RTETextBlock.fromHTML(element, 'paragraph');
+      element.innerHTML = '';
+      return block;
+    }
+    return null;
+  }
+  /**
+   * Get current text block element.
+   *
+   * @returns {HTMLDivElement} - Current text block element.
+   */
+  static getCurrentTextBlockElement() {
+    return ElementToDTOHandlerAbstract.currentTextBlockElement;
+  }
+  /**
+   * While it a empty block. we should use new line span instead this block.
+   *
+   * @param {HTMLElement} blockElement - Current block element.
+   * @returns {boolean} - is handled.
+   */
+  handleEmptyBlock(blockElement) {
+    if (this.currentVirtualElement.childNodes.length === 0) {
+      (blockElement || ElementToDTOHandlerAbstract.getCurrentTextBlockElement()).append(this.createNewLineSpan());
+      return true;
+    }
+    return false;
+  }
+  /**
+   * Inherit style of parent.
+   *
+   * @param {HTMLElement} element - Current element.
+   */
+  setEntityElementStyle(element) {
+    if (element.nodeType === Node.TEXT_NODE)
+      return;
+    const currentStyle = element.style;
+    const currentClass = element.classList;
+    switch (element.nodeName) {
+      case 'CODE':
+        currentClass.add('v-rte--code');
+        break;
+      case 'STRONG':
+        currentStyle.fontWeight = 'bold';
+        break;
+      case 'I':
+      case 'EM':
+        currentStyle.fontStyle = 'italic';
+        break;
+      case 'S':
+        currentClass.add('v-rte--strikethrough');
+        break;
+      case 'U':
+        currentClass.add('v-rte--underline');
+        break;
+    }
+    const parent = element.parentElement;
+    if (parent) {
+      this.inheritStyles.forEach((style) => {
+        if (parent.style[style]) {
+          currentStyle[style] || (currentStyle[style] = parent.style[style]);
+        }
+      });
+      this.inheritClasses.forEach((inheritClass) => {
+        if (parent.classList.contains(inheritClass)) {
+          currentClass.add(inheritClass);
+        }
+      });
+    }
+  }
+  /**
+   * Set current element.
+   *   while element is a text node, we should wrap it and inherit it style
+   *   otherwise, we should clone it and clear content.
+   *
+   * @param {HTMLElement} element - Current element.
+   */
+  setElement(element) {
+    this.currentEntityElement = element;
+    if (element.nodeType === Node.TEXT_NODE) {
+      const wrapper = document.createElement('span');
+      wrapper.setAttribute('style', element.parentElement.getAttribute('style'));
+      wrapper.setAttribute('class', element.parentElement.getAttribute('class'));
+      wrapper.append(element);
+      this.currentVirtualElement = wrapper;
+    }
+    else {
+      const elementClone = element.cloneNode(true);
+      elementClone.innerHTML = '';
+      this.currentVirtualElement = elementClone;
+    }
+  }
+  /**
+   * Create a new line span.
+   *
+   * @returns {HTMLElement} - new line span.
+   */
+  createNewLineSpan() {
+    const span = document.createElement('span');
+    span.append('\n');
+    return span;
+  }
+}
+ElementToDTOHandlerAbstract.currentTextBlockElement = document.createElement('div');
+
+/**
+ * Transform image element to DTO.
+ */
+class ImageToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return (element.nodeType === Node.ELEMENT_NODE &&
+      (element.nodeName === 'IMG' || element.querySelector('vega-rich-text-image-editor') !== null));
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return [];
+  }
+  /**
+   * Transform element to DTO.
+   *   When blockElement is exist, it means that the current element is a child node,
+   *   and we need to wait for its root block to be converted into a dto.
+   *   Otherwise, the current node is the root node, and we can directly convert it.
+   *
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle() {
+    return [
+      ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
+      RTEImageBlock.fromHTML(this.currentEntityElement),
+    ];
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @returns {HTMLElement} - Block element for child nodes.
+   */
+  getNextBlockElement() {
+    return this.currentVirtualElement;
+  }
+}
+
+/**
+ * Transform link element to DTO.
+ */
+class InlineBlockToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @returns {boolean} Result.
+   */
+  static canHandle() {
+    return true;
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return Array.from(this.currentEntityElement.childNodes);
+  }
+  /**
+   * The inline block is a child element, and there is no need to convert it to a dto here
+   *
+   * @returns {RTEContentBlock[]} - Empty dto.
+   */
+  handle() {
+    return [];
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {Nullable<HTMLElement>} - blockElement.
+   */
+  getNextBlockElement(blockElement) {
+    return blockElement;
+  }
+}
+
+/**
+ * Transform link element to DTO.
+ */
+class LinkToDTOHandler extends ElementToDTOHandlerAbstract {
+  constructor(element) {
+    super(element);
+  }
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return ['A'].includes(element.nodeName);
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return Array.from(this.currentEntityElement.childNodes);
+  }
+  /**
+   * Format and append element for it block element.
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle(blockElement) {
+    const key = generateUUID();
+    Array.from(this.currentVirtualElement.children).forEach((childElement) => {
+      childElement.setAttribute('data-href', this.currentVirtualElement.href);
+      childElement.setAttribute('data-group-key', key);
+      (blockElement || ElementToDTOHandlerAbstract.getCurrentTextBlockElement()).append(childElement);
+    });
+    return [];
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @returns {HTMLElement} - Block element for child nodes.
+   */
+  getNextBlockElement() {
+    return this.currentVirtualElement;
+  }
+}
+
+/**
+ * Transform list element to DTO.
+ */
+class ListItemToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return ['LI'].includes(element.nodeName);
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return Array.from(this.currentEntityElement.childNodes);
+  }
+  /**
+   * Append list item node to it block element.
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle(blockElement) {
+    blockElement.append(this.currentVirtualElement);
+    return [];
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @returns {HTMLElement} - Block element for child nodes.
+   */
+  getNextBlockElement() {
+    return this.currentVirtualElement;
+  }
+}
+
+/**
+ * Transform list element to DTO.
+ */
+class ListToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return ['UL', 'OL'].includes(element.nodeName);
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return Array.from(this.currentEntityElement.childNodes);
+  }
+  /**
+   * Transform element to DTO.
+   *   When blockElement is exist, it means that the current element is a child node,
+   *   and we need to append and wait for its root block to be converted into a dto.
+   *   Otherwise, the current node is the root node, and we can directly convert it.
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle(blockElement) {
+    if (this.handleEmptyBlock(blockElement)) {
+      return [];
+    }
+    if (blockElement && ListItemToDTOHandler.canHandle(blockElement)) {
+      blockElement.append(this.currentVirtualElement);
+      return [];
+    }
+    else {
+      return [
+        ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
+        RTEListBlock.fromHTML(this.currentVirtualElement),
+      ];
+    }
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @returns {HTMLElement} - Block element for child nodes.
+   */
+  getNextBlockElement() {
+    return this.currentVirtualElement;
+  }
+}
+
+/**
+ * Transform paragraph.
+ */
+class ParagraphToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return ['DIV', 'P'].includes(element.nodeName);
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return Array.from(this.currentEntityElement.childNodes);
+  }
+  /**
+   * Transform element to DTO.
+   *   When blockElement is exist, it means that the current element is a child node,
+   *   and we need to wait for its root block to be converted into a dto.
+   *   Otherwise, the current node is the root node, and we can directly convert it.
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle(blockElement) {
+    if (this.handleEmptyBlock(blockElement)) {
+      return [];
+    }
+    if (blockElement && !ParagraphToDTOHandler.canHandle(blockElement)) {
+      blockElement.append(...Array.from(this.currentVirtualElement.childNodes));
+      return [];
+    }
+    else {
+      return [
+        ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
+        RTETextBlock.fromHTML(this.currentVirtualElement, 'paragraph'),
+      ];
+    }
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @returns {HTMLElement} - Block element for child nodes.
+   */
+  getNextBlockElement() {
+    return this.currentVirtualElement;
+  }
+}
+
+/**
+ * Transform text block element to DTO.
+ */
+class TextBlockToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return ['heading-1', 'heading-2', 'heading-3', 'title', 'subtitle'].includes(this.getElementType(element));
+  }
+  /**
+   * Get type of element.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {string} type.
+   */
+  static getElementType(element) {
+    if (element.nodeType !== Node.TEXT_NODE && element.hasAttribute('data-type')) {
+      return element.getAttribute('data-type');
+    }
+    switch (element.nodeName) {
+      case 'H1':
+        return 'heading-1';
+      case 'H2':
+        return 'heading-2';
+      case 'H3':
+        return 'heading-3';
+      default:
+        return '';
+    }
+  }
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return Array.from(this.currentEntityElement.childNodes);
+  }
+  /**
+   * Transform element to DTO.
+   *   When blockElement is exist, it means that the current element is a child node,
+   *   and we need to wait for its root block to be converted into a dto.
+   *   Otherwise, the current node is the root node, and we can directly convert it.
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle(blockElement) {
+    if (this.handleEmptyBlock(blockElement)) {
+      return [];
+    }
+    if (blockElement) {
+      blockElement.append(...Array.from(this.currentVirtualElement.childNodes));
+      return [];
+    }
+    else {
+      return [
+        ElementToDTOHandlerAbstract.currentTextBlockElementToDTO(),
+        RTETextBlock.fromHTML(this.currentVirtualElement, TextBlockToDTOHandler.getElementType(this.currentVirtualElement)),
+      ];
+    }
+  }
+  /**
+   * Get the block element for child nodes
+   *
+   * @returns {HTMLElement} - Block element for child nodes.
+   */
+  getNextBlockElement() {
+    return this.currentVirtualElement;
+  }
+}
+
+/**
+ * Transform text element to DTO.
+ */
+class TextToDTOHandler extends ElementToDTOHandlerAbstract {
+  /**
+   * Can be transform.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {boolean} Result.
+   */
+  static canHandle(element) {
+    return element.nodeType === Node.TEXT_NODE;
+  }
+  /* istanbul ignore next */
+  /**
+   * Special the child elements of current.
+   *
+   * @returns {HTMLElement[]} - child elements.
+   */
+  childElements() {
+    return [];
+  }
+  /**
+   * Append text node to it block element.
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {RTEContentBlock[]} - Block DTO.
+   */
+  handle(blockElement) {
+    (blockElement || ElementToDTOHandlerAbstract.getCurrentTextBlockElement()).append(this.currentVirtualElement);
+    return [];
+  }
+  /* istanbul ignore next */
+  /**
+   * Get the block element for child nodes
+   *
+   * @param {Nullable<HTMLElement>} blockElement - Current block container.
+   * @returns {Nullable<HTMLElement>} - blockElement.
+   */
+  getNextBlockElement(blockElement) {
+    return blockElement;
+  }
+}
+
+/**
+ * Element to DTO processor
+ */
+class ElementToDTOProcessor {
+  constructor() {
+    this.elementHandlers = [
+      TextToDTOHandler,
+      ImageToDTOHandler,
+      ListToDTOHandler,
+      ListItemToDTOHandler,
+      TextBlockToDTOHandler,
+      ParagraphToDTOHandler,
+      LinkToDTOHandler,
+      InlineBlockToDTOHandler,
+    ];
+  }
+  /**
+   * Transform element to block DTO.
+   *
+   * @param {HTMLElement} element - An pasted element.
+   * @returns {RTEContentBlock[]} Block DTO.
+   */
+  process(element) {
+    const blocks = this.transformDomToDto(Array.from(element.childNodes), null);
+    blocks.push(ElementToDTOHandlerAbstract.currentTextBlockElementToDTO());
+    return blocks.filter(Boolean);
+  }
+  /**
+   * Transform elements to block DTO.
+   *
+   * @param {HTMLElement[]} elements - An pasted elements.
+   * @param {HTMLElement} blockElement - Current block element.
+   * @returns {RTEContentBlock[]} Block DTO.
+   */
+  transformDomToDto(elements, blockElement) {
+    const rootBlocks = [];
+    elements.forEach((element) => {
+      if (this.isInvalidElement(element))
+        return;
+      const handler = this.elementHandlers.find((elementHandler) => elementHandler.canHandle(element));
+      const handle = new handler(element);
+      if (element.nodeType !== Node.TEXT_NODE) {
+        rootBlocks.push(...this.transformDomToDto(handle.childElements(), handle.getNextBlockElement(blockElement)));
+      }
+      rootBlocks.push(...handle.handle(blockElement));
+    });
+    return rootBlocks;
+  }
+  /**
+   * Checks if the given element is valid to parse.
+   *
+   * @param {HTMLElement} element - The pasted element.
+   * @returns {boolean} Is valid
+   */
+  isInvalidElement(element) {
+    if (element.nodeType === Node.COMMENT_NODE)
+      return true;
+    if (element.nodeType === Node.TEXT_NODE && element.nodeValue.includes('\t')) {
+      const value = element.nodeValue.replace(/\n|\t/gm, '');
+      if (value.length === 0)
+        return true;
+    }
+    return ['META', 'BUTTON', 'STYLE'].includes(element.nodeName);
+  }
+}
+
+/**
+ * Handle user paste
+ */
+class InsertPasteHandler extends BaseHandler {
+  constructor() {
+    super(...arguments);
+    this.elementToDTOProcessor = new ElementToDTOProcessor();
+  }
+  /**
+   * Update the state value when user paste html elements.
+   *
+   * @param {InputEvent} event - Paste event.
+   */
+  handleEvent(event) {
+    const blocks = this.parsePastedElements(event);
+    const { startContainer } = this.selectionController.getCurrentRange();
+    if (this.isRootContainer(startContainer)) {
+      this.insertBlocksToRoot(blocks);
+    }
+    else if (this.isEmptyParagraph(startContainer)) {
+      this.insertBlocksBeforeEmptyBlock(blocks);
+    }
+    else {
+      this.insertBlocksToContent(blocks);
+    }
+  }
+  /**
+   * Insert the blocks to root
+   *
+   * @param { RTEContentBlock[]} blocks - blocks
+   */
+  insertBlocksToRoot(blocks) {
+    this.currentState.apply(new AppendChildNodesAction(blocks));
+  }
+  /**
+   * Insert the blocks to content
+   *
+   * @param { RTEContentBlock[]} blocks - blocks
+   */
+  insertBlocksToContent(blocks) {
+    const cursorNode = this.removeSelectionRange();
+    const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parentBlock;
+    if (currentBlock) {
+      const { startOffset } = this.selectionController.getCurrentRange();
+      const breakAction = new SplitBlockWithNodeAction(cursorNode, startOffset);
+      currentBlock.apply(breakAction);
+      currentBlock.parent.apply(new InsertBlocksAfterAction(currentBlock, ...blocks));
+      this.switchCaretPositionToNextElement(breakAction.newBlock);
+    }
+  }
+  /**
+   * Insert the blocks before to current block
+   *
+   * @param { RTEContentBlock[]} blocks - blocks
+   */
+  insertBlocksBeforeEmptyBlock(blocks) {
+    const cursorNode = this.removeSelectionRange();
+    /* istanbul ignore next */
+    const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parentBlock;
+    currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, ...blocks));
+    this.switchCaretPositionToNextElement(currentBlock);
+  }
+  /**
+   * Format and parse elements from user paste.
+   *
+   * @param {InputEvent} event - Paste event.
+   * @returns {RTEContentBlock[]} - RTEContentBlock.
+   */
+  parsePastedElements(event) {
+    const pastedHTML = event.dataTransfer.getData('text/html');
+    const tempContainer = document.createElement('div');
+    tempContainer.innerHTML = pastedHTML;
+    return this.elementToDTOProcessor.process(tempContainer);
+  }
+  /**
+   * Returns the next sibling element of a given block element in a rich text editor.
+   *
+   * @param {RTEBlock} newBlock - The new block after break
+   * @returns {Node | null} the next sibling element of the current block element, or the first child element of the next sibling element if it exists.
+   */
+  getNextBlockElement(newBlock) {
+    if (newBlock && newBlock['nodes']) {
+      const firstNode = newBlock['nodes'][0];
+      if (!firstNode)
+        return;
+      const element = stateEntityRenderingRegistry.getDOMByEntity(firstNode);
+      /* istanbul ignore next */
+      if (firstNode.type === 'TEXT') {
+        return element.firstChild;
+      }
+      else {
+        return element.parentElement;
+      }
+    }
+  }
+  /**
+   * Moves the caret to the next block element in a rich text editor.
+   *
+   * @param {RTEBlock} newBlock - Represents a new create block element in a rich text editor.
+   */
+  switchCaretPositionToNextElement(newBlock) {
+    this.selectionController.enqueueSelectionRangeFutureState(() => this.getNextBlockElement(newBlock), 0);
+  }
+}
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Used to monitoring the user input actions by event listener and mutationObserver */
+class UserInputController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.insertTextHandler = new InsertTextHandler();
+    this.insertParagraphHandler = new InsertParagraphHandler();
+    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();
+      e.preventDefault();
+      this.initValueIfEmpty();
+      let updateFlag = false;
+      switch (e.inputType) {
+        case 'insertParagraph':
+          updateFlag = true;
+          this.insertParagraphHandler.execute(this.value, this.selectionController, e);
+          break;
+        case 'insertText':
+          updateFlag = true;
+          this.insertTextHandler.execute(this.value, this.selectionController, e);
+          break;
+        case 'insertLineBreak':
+          updateFlag = true;
+          this.insertLineBreakHandler.execute(this.value, this.selectionController, e);
+          break;
+        case 'deleteContentBackward':
+          updateFlag = true;
+          this.deleteContentHandler.execute(this.value, this.selectionController, e);
+          break;
+        case 'insertFromPaste':
+          updateFlag = true;
+          this.insertPasteHandler.execute(this.value, this.selectionController, 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.
+   */
+  addActionListener() {
+    const editableElement = this.getEditableElementRef();
+    if (editableElement) {
+      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.
+   */
+  removeActionListener() {
+    const editableElement = this.getEditableElementRef();
+    if (editableElement) {
+      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.
+   *
+   * @returns {HTMLDivElement|null} A reference to an HTMLDivElement element that is editable.
+   */
+  getEditableElementRef() {
+    if (!this.editableElementRef) {
+      this.editableElementRef = this.vegaRichTextEditorRenderer.getRTEEditableElementRef();
+    }
+    return this.editableElementRef;
+  }
+  /**
+   * Notifies a change manager with the host and value details and logs the current value.
+   */
+  notifyComponentFlushValue() {
+    void this.valueController.flushChanges(this.value);
+  }
+  /**
+   * Prevents the default behavior of a drag event.
+   *
+   * @param {DragEvent} e - drop event object
+   */
+  preventDropEvent(e) {
+    e.preventDefault();
+  }
+  /**
+   * Initializes the value to an empty array if it is currently empty.
+   */
+  initValueIfEmpty() {
+    if (!this.value) {
+      void this.valueController.flushChanges(VegaRTEContent.fromJSON([]));
+    }
+  }
+}
+__decorate$a([
+  MapToComponentField()
+], UserInputController.prototype, "host", void 0);
+__decorate$a([
+  MapToComponentField()
+], UserInputController.prototype, "value", void 0);
+__decorate$a([
+  MapToComponentField()
+], UserInputController.prototype, "valueController", void 0);
+__decorate$a([
+  MapToComponentField()
+], UserInputController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$a([
+  MapToComponentField()
+], UserInputController.prototype, "selectionController", void 0);
+__decorate$a([
+  MapToComponentMethod('componentDidLoad')
+], UserInputController.prototype, "addActionListener", null);
+__decorate$a([
+  MapToComponentMethod('disconnectedCallback')
+], UserInputController.prototype, "removeActionListener", null);
+__decorate$a([
+  MapToComponentMethod('componentDidRender')
+], UserInputController.prototype, "reConnectObserver", null);
+
+/**
+ * A rule that checks if input range is empty or not
+ *
+ * @implements {FormFieldValidationRule<string[]>}
+ */
+class RichTextEditorRequiredRule {
+  /**
+   * It checks if the input is a valid value.
+   *
+   * @param {string[]} input - The value of the input field.
+   * @returns {EvaluateResultTranslation} An object with two properties: isValid and message.
+   */
+  evaluate(input) {
+    var _a;
+    if (!this.isAcceptedInputType(input)) {
+      throw new Error(`Invalid value ${input} for rich text editor`);
+    }
+    const isValid = ((_a = input === null || input === void 0 ? void 0 : input.blocks) === null || _a === void 0 ? void 0 : _a.length) > 0 && input.blocks.some((block) => block.isNotEmpty());
+    return {
+      isValid,
+      message: isValid ? '' : 'This field is required',
+    };
+  }
+  /**
+   * If the input is accepted and the status is not disabled and visible, then return true
+   *
+   * @param {unknown} input - The input to be evaluated.
+   * @param {FormFieldStatusMeta} [status] - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  canEvaluate(input, status) {
+    return status
+      ? this.isAcceptedInputType(input) && !status.disabled && status.visible
+      : this.isAcceptedInputType(input);
+  }
+  /**
+   * If the field is not disabled, visible, and has been touched or modified, then show the error
+   *
+   * @param {FormFieldStatusMeta} status - FormFieldStatusMeta
+   * @returns {boolean} A boolean value.
+   */
+  shouldShowError(status) {
+    return !status.disabled && status.visible && (status.touched || status.modified);
+  }
+  /**
+   * If the input is undefined or null, return true, otherwise return true if the input is a VegaRTEContent.
+   *
+   * @param {unknown} input - The input value to be validated.
+   * @returns {boolean} A boolean.
+   */
+  isAcceptedInputType(input) {
+    if (input === undefined || input === null)
+      return true;
+    return input instanceof VegaRTEContent;
+  }
+}
+
+/**
+ * Insert the image to current block. if the block is not image block, this will split the block to two blocks
+ *
+ * @example block.apply(new InsertImageToBlockAction(node, offset, imageNode))
+ */
+class InsertImageToBlockAction extends ModifyContentAction {
+  constructor(splitPointNode, startOffsetOfNode, imageBlockToBeInserted) {
+    super();
+    this.isFlushable = true;
+    this.type = ModifyContentActionType.INSERT_IMAGE_TO_BLOCK;
+    this.splitPointNode = splitPointNode;
+    this.startOffsetOfNode = startOffsetOfNode;
+    this.imageBlockToBeInserted = imageBlockToBeInserted;
+  }
+}
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/** Used to control the insert image tool button actions */
+class InsertImageController extends VegaSlimmer {
+  /**
+   * Insert a image to current state
+   *
+   * @param {string} imageUrl The image url
+   * @returns {RTEImageNode} RTEImageNode
+   */
+  insertImageToCaretPosition(imageUrl) {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const imageBlock = new RTEImageBlock(generateUUID());
+    const newImageNode = new RTEImageNode(generateUUID(), imageUrl, imageBlock);
+    newImageNode.apply(new ImageAnnotationAction('md', ''));
+    imageBlock.apply(new AppendChildNodesAction([newImageNode]));
+    if (selectedBlocks.length < 1 || this.value.blocks.length < 1) {
+      this.value.apply(new AppendChildNodesAction([imageBlock]));
+      void this.valueController.flushChanges(this.value);
+    }
+    else {
+      const { startOffset } = this.selectionController.getCurrentRange();
+      const selectedNodes = this.selectionController.getSelectedNodes();
+      selectedBlocks[0].apply(new InsertImageToBlockAction(selectedNodes[0], startOffset, imageBlock));
+    }
+    this.updateCaretPosition(newImageNode);
+    return newImageNode;
+  }
+  /**
+   * Add image selected observer
+   */
+  registerObserver() {
+    this.registerImageSelectedObserver();
+  }
+  /**
+   * remove the observer when component removed
+   */
+  unRegisterObserver() {
+    this.removeImageSelectedObserver();
+  }
+  /**
+   * Updates the caret position to the parent element of a new image node.
+   *
+   * @param {RTEImageNode} newImageNode - An image node in a rich text editor.
+   */
+  updateCaretPosition(newImageNode) {
+    this.selectionController.enqueueSelectionRangeFutureState(() => {
+      const image = stateEntityRenderingRegistry.getDOMByEntity(newImageNode);
+      if (image) {
+        return image.parentElement;
+      }
+    }, 1);
+  }
+  /**
+   * The current selected node should be current image node after click image.
+   */
+  registerImageSelectedObserver() {
+    const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
+    if (richTextContentRef) {
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(richTextContentRef, VegaInternalRichTextImageClick, (payload) => {
+        const range = this.selectionController.getCurrentRange();
+        if (!range || range.startContainer !== payload.host || range.startOffset !== 0) {
+          this.selectionController.enqueueSelectionRangeFutureState(payload.host, 0, payload.host, 0, true);
+        }
+      });
+    }
+  }
+  /**
+   * remove the observer after component delete
+   */
+  removeImageSelectedObserver() {
+    const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
+    if (richTextContentRef) {
+      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(richTextContentRef, VegaInternalRichTextImageClick);
+    }
+  }
+}
+__decorate$9([
+  MapToComponentField()
+], InsertImageController.prototype, "selectionController", void 0);
+__decorate$9([
+  MapToComponentField()
+], InsertImageController.prototype, "value", void 0);
+__decorate$9([
+  MapToComponentField()
+], InsertImageController.prototype, "valueController", void 0);
+__decorate$9([
+  MapToComponentField()
+], InsertImageController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$9([
+  MapToComponentMethod('componentDidLoad')
+], InsertImageController.prototype, "registerObserver", null);
+__decorate$9([
+  MapToComponentMethod('disconnectedCallback')
+], InsertImageController.prototype, "unRegisterObserver", null);
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Focus controller for RTE
+ */
+class FocusController extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Do a focus on the last text node of the last block
+     *
+     * @param {RTEContentBlock} lastBlock - The last block of the content
+     */
+    this.doFocusOnLastTextNode = async (lastBlock) => {
+      this.setCaretRangeToNodeEnd(stateEntityRenderingRegistry.getDOMByEntity(lastBlock.getLastNode()).firstChild);
+      await this.vegaRichTextEditorRenderer.getRichTextContentRef().vegaFocus();
+    };
+  }
+  /**
+   * Focus on the last text node of the last block.
+   *
+   * @param {{ newLine?: boolean }} options - The options of the method
+   * @param {boolean} options.newLine - Should a new line be added before the last text node
+   * @returns {Promise<void>} - A promise that resolves when the focus is set
+   */
+  async focusOnLastTextNode(options) {
+    const lastBlock = this.value.blocks[this.value.blocks.length - 1];
+    if (!(lastBlock instanceof RTETextBlock) || (options === null || options === void 0 ? void 0 : options.newLine)) {
+      const newTextBlock = RTETextBlock.from({
+        id: generateUUID(),
+        type: 'paragraph',
+        nodes: [{ id: generateUUID(), type: 'text', text: '' }],
+      });
+      lastBlock.parent.apply(new InsertBlocksAfterAction(lastBlock, newTextBlock));
+      await this.valueController.flushChanges(this.value);
+      await this.doFocusOnLastTextNode(newTextBlock);
+    }
+    else {
+      await this.doFocusOnLastTextNode(lastBlock);
+    }
+  }
+  /**
+   * Move the caret to the end of the node
+   *
+   * @param {Node} targetNode - The node to move the caret to
+   */
+  setCaretRangeToNodeEnd(targetNode) {
+    const range = new Range();
+    range.setStart(targetNode, targetNode.nodeValue.length);
+    this.selectionController.setSelectionRange(range);
+  }
+}
+__decorate$8([
+  MapToComponentField()
+], FocusController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$8([
+  MapToComponentField()
+], FocusController.prototype, "selectionController", void 0);
+__decorate$8([
+  MapToComponentField()
+], FocusController.prototype, "valueController", void 0);
+__decorate$8([
+  MapToComponentField()
+], FocusController.prototype, "value", void 0);
+
+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;
+};
+/**
+ * Controller for the text node color
+ */
+class TextNodeColorController extends VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]
+   * Register an observer to watch for dark mode updates, which will update the color of text node .
+   */
+  connectedCallback() {
+    this.observer = new Observer(this.isAcceptObserver.bind(this), (isDark) => {
+      const textNodeElements = TextNodeRenderingRegistry.getTextNodeElements();
+      textNodeElements.forEach((textColorAnnotation, element) => {
+        element.style.color = isDark
+          ? textColorAnnotation.textColor.dark
+          : textColorAnnotation.textColor.light;
+      });
+    });
+    ChangeManager.register(DARK_MODE_CHANGE, this.observer);
+  }
+  /**
+   * cancel dark mode observer when disconnectedCallback
+   */
+  disconnectResizeObserver() {
+    ChangeManager.unregister(DARK_MODE_CHANGE, this.observer);
+  }
+  /**
+   * Determines whether the observer should accept changes.
+   *
+   * @returns {boolean} Always returns true in the current implementation.
+   */
+  isAcceptObserver() {
+    return true;
+  }
+}
+__decorate$7([
+  MapToComponentMethod('connectedCallback')
+], TextNodeColorController.prototype, "connectedCallback", null);
+__decorate$7([
+  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 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();
+    this.valueController = new ValueController();
+    this.selectionController = new SelectionController();
+    this.focusController = new FocusController();
+    this.darkModeStateControllerSlimmer = new DarkModeStateControllerSlimmer();
+    this.toolbarRenderer = new ToolbarRenderer();
+    this.clearStyleToolbarButtonSlimmer = new ClearStyleToolbarButtonSlimmer();
+    this.boldToolbarButtonSlimmer = new BoldToolbarButtonSlimmer();
+    this.italicToolbarButtonSlimmer = new ItalicToolbarButtonSlimmer();
+    this.underlineToolbarButtonSlimmer = new UnderlineToolbarButtonSlimmer();
+    this.textColorToolbarButtonSlimmer = new TextColorToolbarButtonSlimmer();
+    this.textStylesToolbarButtonSlimmer = new TextStylesToolbarButtonSlimmer();
+    this.codeToolbarButtonSlimmer = new CodeToolbarButtonSlimmer();
+    this.strikethroughToolbarButtonSlimmer = new StrikethroughToolbarButtonSlimmer();
+    this.imageToolbarButtonSlimmer = new ImageToolbarButtonSlimmer();
+    this.linkToolbarButtonSlimmer = new LinkToolbarButtonSlimmer();
+    this.moreIndentToolbarButtonSlimmer = new MoreIndentToolbarButtonSlimmer();
+    this.lessIndentToolbarButtonSlimmer = new LessIndentToolbarButtonSlimmer();
+    this.bulletsNumbersToolbarButtonSlimmer = new BulletsNumbersToolbarButtonSlimmer();
+    this.horizontalAlignmentToolbarButtonSlimmer = new HorizontalAlignmentToolbarButtonSlimmer();
+    this.placeholderNotifySlimmer = createSubStateNotifySlimmer(VegaRichTextEditor, 'placeholder', 'watchPlaceholder');
+    this.disabledNotifySlimmer = createSubStateNotifySlimmer(VegaRichTextEditor, 'richTextContentEditable', 'watchRichTextContentEditable');
+    this.richTextContentController = new RichTextContentController(this);
+    this.userInputController = new UserInputController();
+    this.insertImageController = new InsertImageController();
+    this.imageInsertedEventEmitter = createEventEmitSlimmer(VegaRichTextEditor, VegaImageInserted);
+    this.changeEventPreventSlimmer = new ChildNodesEventPreventSlimmer([VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
+    this.textNodeColorController = new TextNodeColorController();
+    this.richTextContentEditable = true;
+    this.selectionMap = new Map();
+    this.isInDarkMode = VegaThemeManager.isDarkMode();
+    /**
+     * Specifies the label for the rich text editor.
+     *
+     * It provides descriptive text that helps identify the
+     *    purpose or content expected in the rich text editor.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.label = '';
+    /**
+     * Determines whether the rich text editor field is required.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.required = false;
+    /**
+     * Specifies a placeholder string that displays as a
+     *    temporary hint or example within the rich text editor.
+     *
+     * It indicates the expected format or pattern of
+     *    the input within the rich text editor.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.placeholder = '';
+    /**
+     * Specifies whether the rich text editor is disabled.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.disabled = false;
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value within the rich text editor.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.hint = '';
+    /**
+     * Specifies editable section rows for the rich text editor
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.rows = 4;
+    /**
+     * Specifies the value of the rich text editor
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.value = VegaRTEContent.createEmptyContent();
+    /**
+     * Specifies the built-in toolbar items available in the rich-text editor.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.toolbarItems = [
+      ['clearStyle'],
+      ['textStyles'],
+      ['bold', 'italic', 'underline', 'strikethrough', 'code'],
+      ['textColor'],
+      ['horizontalAlignment', 'bulletsNumbers'],
+      ['moreIndent', 'lessIndent'],
+      ['link'],
+      ['image'],
+    ];
+    /**
+     * Specifies the validation status of the rich text editor component.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether automatic validation should be implemented for
+     * the rich text editor.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.autoValidation = true;
+    /**
+     * Defines custom validation rules for the rich text editor.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.validationRules = [];
+  }
+  watchRichTextContentEditable() {
+  }
+  watchPlaceholder() {
+  }
+  watchDisabled() {
+    this.richTextContentController.syncRichTextContentEditable();
+  }
+  watchValueUpdate() {
+  }
+  watchValidationRules() {
+  }
+  componentWillLoad() {
+    this.richTextContentController.syncRichTextContentEditable();
+  }
+  render() {
+    return sanitizeVegaComponent(this.vegaRichTextEditorRenderer.render(), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "richTextContentEditable": ["watchRichTextContentEditable"],
+    "placeholder": ["watchPlaceholder"],
+    "disabled": ["watchDisabled"],
+    "value": ["watchValueUpdate"],
+    "validationRules": ["watchValidationRules"]
+  }; }
+};
+__decorate$6([
+  InjectVegaGlobalSlimmer()
+], VegaRichTextEditor.prototype, "globalSlimmers", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "formFieldController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "changeEventEmitter", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "valueController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "selectionController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "focusController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "darkModeStateControllerSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "toolbarRenderer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "clearStyleToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "boldToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "italicToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "underlineToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "textColorToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "textStylesToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "codeToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "strikethroughToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "imageToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "linkToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "moreIndentToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "lessIndentToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "bulletsNumbersToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "placeholderNotifySlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "disabledNotifySlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "richTextContentController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "userInputController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "insertImageController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "imageInsertedEventEmitter", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "changeEventPreventSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "textNodeColorController", void 0);
+VegaRichTextEditor.style = vegaRichTextEditorCss;
+
+var __decorate$5 = (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;
+};
+class VegaRichTextEditorToolbarButtonRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleClick = (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+      }
+      else {
+        this.clickEventEmitter.emit(undefined, e);
+      }
+    };
+  }
+  render() {
+    return (h("button", { part: "rich-text-editor-toolbar-button", class: {
+        'rich-text-editor-toolbar-btn': true,
+        'rich-text-editor-toolbar-button-disabled': this.disabled,
+        'rich-text-editor-toolbar-button-selected': this.selected,
+      }, onClick: this.handleClick, disabled: this.disabled },
+      h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
+        h("vega-icon", { size: "size-16", color: this.iconColor, icon: VegaInternalIconManager.getIconKey(this.icon) }),
+        this.showArrowIcon && (h("vega-icon", { size: "size-8", color: "text-secondary", icon: VegaInternalIconManager.getIconKey('chevron-down') }))),
+      h("slot", null)));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({
+    'chevron-down': chevronDown,
+  });
+})();
+__decorate$5([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "disabled", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "selected", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "showArrowIcon", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "icon", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "iconColor", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "clickEventEmitter", void 0);
+
+const vegaRichTextEditorToolbarButtonCss = ":host{display:inline-block}.rich-text-editor-toolbar-btn{display:flex;justify-content:center;align-items:center;border-radius:4px;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));padding-top:8px;padding-bottom:8px;padding-left:12px;padding-right:12px;cursor:pointer;position:relative;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.rich-text-editor-toolbar-btn:hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));z-index:1}.rich-text-editor-toolbar-btn:active{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));z-index:1}.rich-text-editor-toolbar-btn:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:-1px;z-index:2}.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-selected{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));z-index:1}.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-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))}.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-disabled vega-icon{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}";
+
+var __decorate$4 = (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 VegaRichTextEditorToolbarButton = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaClick = createEvent(this, "vegaClick", 7);
+    this.click = createEvent(this, "click", 7);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.clickEventEmitter = createEventEmitSlimmer(VegaRichTextEditorToolbarButton, VegaClick);
+    this.eventPrevent = new ChildNodesEventPreventSlimmer([VegaClick], () => this.host, {
+      useCapture: true,
+      customPreventHandle: (e) => {
+        if (this.disabled) {
+          e.stopImmediatePropagation();
+        }
+      },
+    });
+    this.renderer = new VegaRichTextEditorToolbarButtonRenderer();
+    /**
+     * Specifies whether the rich text editor toolbar button element is disabled.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.disabled = false;
+    /**
+     * Specifies whether the rich text editor toolbar button element is selected.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.selected = false;
+    /**
+     * Specifies whether the rich text editor toolbar button element is showArrowIcon.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.showArrowIcon = false;
+    /**
+     * Specifies whether the toolbar button in the rich text editor is represented by an icon.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.icon = '';
+    /**
+     * Specifies the color of the toolbar button icon in the rich text editor.
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.iconColor = 'text-primary';
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$4([
+  InjectVegaGlobalSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "globalSlimmers", void 0);
+__decorate$4([
+  InjectVegaSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$4([
+  InjectVegaSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "clickEventEmitter", void 0);
+__decorate$4([
+  InjectVegaSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "eventPrevent", void 0);
+__decorate$4([
+  InjectVegaSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "renderer", void 0);
+VegaRichTextEditorToolbarButton.style = vegaRichTextEditorToolbarButtonCss;
+
+var __decorate$3 = (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;
+};
+class VegaRichTextImageEditorRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleKeyDown = (e) => {
+      if (e.key === 'Enter') {
+        void this.formRef.getValue().then(({ alt }) => {
+          this.changeEventEmitter.emit({ action: 'edit', payload: { size: this.size, alt: alt } });
+        });
+        void this.popoverRef.hide();
+      }
+    };
+  }
+  render() {
+    return (h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+        this.popoverRef = ref;
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
+          this.selected = true;
+          this.notifyImageSelected();
+          void this.formRef.setValue({
+            alt: this.alt,
+          });
+        });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
+          this.currentPage = 1;
+          this.selected = false;
+          void this.formRef.reset();
+        });
+      } },
+      h("div", { slot: "popover-content" },
+        h("slot", null)),
+      h("div", { slot: "popover" },
+        this.renderImageEditor(),
+        this.renderAltTextEditor())));
+  }
+  findParentContainerRef() {
+    this.parentContainerRef = findParent(this.host, 'vega-rich-text-content');
+  }
+  renderImageEditor() {
+    return (h("vega-box", { display: this.currentPage === 1 ? 'block' : 'none' },
+      h("vega-flex", { gap: "size-12", alignItems: "center" },
+        h("vega-font", { variant: "font-field-label-sm", color: "text-primary" }, "Size:"),
+        h("vega-segment-control", { size: "small", segments: [
+            { key: 'sm', text: 'Sm' },
+            { key: 'md', text: 'Md' },
+            { key: 'lg', text: 'Lg' },
+          ], selected: this.size, ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaChange, (e) => {
+              const size = e.detail;
+              this.size = size;
+              this.changeEventEmitter.emit({
+                action: 'edit',
+                payload: { size: size, alt: this.alt },
+              });
+            });
+          } }),
+        h("vega-button-group", { variant: "tertiary", size: "small", ref: (ref) => {
+            DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (payload) => {
+              if (payload.detail === 'Alt Text') {
+                this.currentPage = 2;
+              }
+              else {
+                this.changeEventEmitter.emit({ action: 'delete' });
+                void this.popoverRef.hide();
+              }
+            });
+          } },
+          h("vega-button-group-item", { label: "Alt Text", itemKey: "Alt Text" }),
+          h("vega-button-group-item", { label: "Delete Image", icon: VegaInternalIconManager.getIconKey('trash-can'), iconOnly: true, itemKey: "trash-can" })))));
+  }
+  renderAltTextEditor() {
+    return (h("vega-box", { display: this.currentPage === 2 ? 'block' : 'none' },
+      h("vega-form", { ref: (ref) => (this.formRef = ref) },
+        h("vega-input", { "data-vega-form": "alt", style: { width: '315px' }, label: "Alt Text", ref: (ref) => {
+            void ref.doFocus();
+          }, onKeyDown: this.handleKeyDown }))));
+  }
+  notifyImageSelected() {
+    if (this.parentContainerRef) {
+      ChangeManager.notify(domNodeSubjectFactory.getSubject(this.parentContainerRef, VegaInternalRichTextImageClick), { host: this.host });
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'trash-can': trashCan });
+})();
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaRichTextImageEditorRenderer.prototype, "currentPage", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaRichTextImageEditorRenderer.prototype, "selected", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "host", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "alt", void 0);
+__decorate$3([
+  MapToComponentField({ writable: true })
+], VegaRichTextImageEditorRenderer.prototype, "size", void 0);
+__decorate$3([
+  MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "changeEventEmitter", void 0);
+__decorate$3([
+  MapToComponentMethod('componentDidLoad')
+], VegaRichTextImageEditorRenderer.prototype, "findParentContainerRef", null);
+
+const vegaRichTextImageEditorCss = ":host{display:inline-block}:host(.rte-image-selected){outline:2px solid rgba(var(--v-border-color-tile-selected, 19, 98, 226, 1));outline-offset:-2px}";
+
+var __decorate$2 = (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 VegaRichTextImageEditor = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaRichTextImageEditorRenderer();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaRichTextImageEditor, VegaChange);
+    this.currentPage = 1;
+    this.selected = false;
+    /**
+     * Specifies the value of image alt
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.alt = '';
+    /**
+     * Specifies the size of the image to the container
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.size = 'md';
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, { class: { 'rte-image-selected': this.selected } }, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+};
+__decorate$2([
+  InjectVegaGlobalSlimmer()
+], VegaRichTextImageEditor.prototype, "globalSlimmers", void 0);
+__decorate$2([
+  InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$2([
+  InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "renderer", void 0);
+__decorate$2([
+  InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "changeEventEmitter", void 0);
+VegaRichTextImageEditor.style = vegaRichTextImageEditorCss;
+
+var __decorate$1 = (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;
+};
+class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleKeyDown = (e) => {
+      if (e.key === 'Enter') {
+        void this.formRef.getValue().then(({ text, url }) => {
+          if (url.length > 0) {
+            this.changeEventEmitter.emit({
+              action: 'link',
+              payload: { text: text || url, url },
+            });
+            void this.popoverRef.hide();
+          }
+        });
+      }
+    };
+  }
+  watchStatusChange() {
+    if (this.status === 'linkEdit') {
+      setTimeout(() => {
+        void this.urlInputRef.doFocus();
+      });
+    }
+  }
+  getPopoverRef() {
+    return this.popoverRef;
+  }
+  render() {
+    return (h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+        this.popoverRef = ref;
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
+          var _a, _b;
+          if (this.status === 'linkEdit') {
+            void this.urlInputRef.doFocus();
+          }
+          void this.formRef.setValue({
+            text: (_a = this.record) === null || _a === void 0 ? void 0 : _a.text,
+            url: (_b = this.record) === null || _b === void 0 ? void 0 : _b.url,
+          });
+        });
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, () => {
+          void this.formRef.reset();
+          if (this.resetStatusAfterHide) {
+            this.status = 'editOrUnlinkSelection';
+          }
+        });
+      } },
+      h("span", { slot: "popover-content" },
+        h("slot", null)),
+      h("div", { slot: "popover" },
+        this.renderLinkUnlinkContent(),
+        this.renderLinkEditContent())));
+  }
+  renderLinkUnlinkContent() {
+    return (h("vega-box", { display: this.status === 'editOrUnlinkSelection' ? 'block' : 'none' },
+      h("vega-button-group", { size: "small", variant: "tertiary", ref: (node) => {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, VegaClick, ({ detail }) => {
+            switch (detail) {
+              case 'edit': {
+                this.status = 'linkEdit';
+                return;
+              }
+              case 'unlink': {
+                this.changeEventEmitter.emit({ action: 'unlink' });
+                void this.popoverRef.hide();
+              }
+            }
+          });
+        } },
+        h("vega-button-group-item", { label: "Edit", itemKey: "edit" }),
+        h("vega-button-group-item", { label: "Unlink", itemKey: "unlink" }))));
+  }
+  renderLinkEditContent() {
+    return (h("vega-box", { display: this.status === 'linkEdit' ? 'block' : 'none' },
+      h("vega-form", { ref: (ref) => (this.formRef = ref) },
+        h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
+          h("vega-input", { "data-vega-form": "url", ref: (ref) => {
+              this.urlInputRef = ref;
+            }, size: "small", label: "URL", onKeyDown: this.handleKeyDown }),
+          h("vega-input", { size: "small", label: "Text", "data-vega-form": "text", onKeyDown: this.handleKeyDown })))));
+  }
+}
+__decorate$1([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "host", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaRichTextLinkEditorRenderer.prototype, "status", void 0);
+__decorate$1([
+  MapToComponentField({ writable: true })
+], VegaRichTextLinkEditorRenderer.prototype, "record", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "changeEventEmitter", void 0);
+__decorate$1([
+  MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "resetStatusAfterHide", void 0);
+__decorate$1([
+  MapToComponentMethod('watchStatusChange')
+], VegaRichTextLinkEditorRenderer.prototype, "watchStatusChange", null);
+
+const vegaRichTextLinkEditorCss = ":host{display:inline}:host vega-popover{display:inline}";
+
+var __decorate = (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 VegaRichTextLinkEditor = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.vegaChange = createEvent(this, "vegaChange", 7);
+    this.change = createEvent(this, "change", 7);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaRichTextLinkEditorRenderer();
+    this.changeEventEmitter = createEventEmitSlimmer(VegaRichTextLinkEditor, VegaChange);
+    /**
+     * Specifies the status of the link editor
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.status = 'editOrUnlinkSelection';
+    /**
+     * Specifies whether the status will be reset after hide the popover
+     *
+     * @vegaVersion __VEGA_VERSION__
+     */
+    this.resetStatusAfterHide = true;
+  }
+  watchStatusChange() {
+  }
+  /**
+   * Provide a method to show the link editor popover
+   *
+   * @vegaVersion __VEGA_VERSION__
+   */
+  async show() {
+    await this.renderer.getPopoverRef().show();
+  }
+  render() {
+    return sanitizeVegaComponent(h(Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "status": ["watchStatusChange"]
+  }; }
+};
+__decorate([
+  InjectVegaGlobalSlimmer()
+], VegaRichTextLinkEditor.prototype, "globalSlimmers", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "renderer", void 0);
+__decorate([
+  InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "changeEventEmitter", void 0);
+VegaRichTextLinkEditor.style = vegaRichTextLinkEditorCss;
+
+export { VegaRichTextEditor as vega_rich_text_editor, VegaRichTextEditorToolbarButton as vega_rich_text_editor_toolbar_button, VegaRichTextImageEditor as vega_rich_text_image_editor, VegaRichTextLinkEditor as vega_rich_text_link_editor };