@heartlandone/vega 2.71.0-RTE-table-preview → 2.72.0

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

@@ -0,0 +1,4648 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-58ea899e.js');
+const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
+const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-d10ace87.js');
+const component = require('./component-1e352960.js');
+const accessibility = require('./accessibility-bfa227f6.js');
+const changeManager = require('./change-manager-a297e4d2.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-1c8f7880.js');
+const vegaInternalEventId = require('./vega-internal-event-id-a5ef414b.js');
+const dtoRendererManager = require('./dto-renderer-manager-f3820a6b.js');
+const typeGuard = require('./type-guard-69d2cf01.js');
+const internalIconManager = require('./internal-icon-manager-32f9ed63.js');
+const codeBlock = require('./code-block-a7c8825f.js');
+const imageAnnotationAction = require('./image-annotation-action-64414e40.js');
+const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
+const index$1 = require('./index-c7fbf32b.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-57525f26.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-f7255138.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-9fe1ab65.js');
+const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-868de3c4.js');
+const staticSubjectTitle = require('./static-subject-title-5829a298.js');
+const observer = require('./observer-f49483e8.js');
+const timer = require('./timer-5f33058b.js');
+const darkModeStateControllerSlimmer = require('./dark-mode-state-controller-slimmer-8a87ec08.js');
+const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-65d85060.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-871855df.js');
+const translationSlimmer = require('./translation-slimmer-f0ebe710.js');
+const darkModeStyleController = require('./dark-mode-style-controller-c21172aa.js');
+const array = require('./array-249289f2.js');
+const chevronDown = require('./chevron-down-9847bf78.js');
+const trashCan = require('./trash-can-46a5e19a.js');
+const ui = require('./ui-9e181079.js');
+const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
+require('./string-39438062.js');
+require('./object-e2e28e3d.js');
+require('./breakpoints-ebde4837.js');
+require('./ui-32e69595.js');
+require('./typography-4560e7f1.js');
+require('./translation-5f9f9c0c.js');
+require('./dynamic-slimmer-f31fdfd7.js');
+require('./wait-for-vega-handler-5469ff80.js');
+require('./page-resize-observer-slimmer-11937d6f.js');
+require('./try-get-document-c0ebd39a.js');
+require('./internal-form-field-validation-rule.abstract-07cdff46.js');
+require('./mutation-observer-slimmer-749d5020.js');
+require('./mutation-observer-filters-38cebc6d.js');
+require('./sub-state-observer-slimmer-2f6f4d28.js');
+require('./internal-vega-event-manager-0e1ba774.js');
+require('./range-14190f6b.js');
+require('./synchronize-task-queue-1ee80e94.js');
+require('./keyboard-manager-slimmer-15e65357.js');
+require('./keyboard-manager-d8adb0ed.js');
+require('./vega-env-manager-23b8b23c.js');
+require('./feature-flag-controller-ce2162c8.js');
+require('./index-4d7bce1a.js');
+require('./_commonjsHelpers-537d719a.js');
+require('./vega-nonce-manager-df69d3ed.js');
+require('./number-4816603d.js');
+
+/**
+ * Class to format HTML code with proper indentation and style cleanup.
+ */
+class CodeFormatter {
+  constructor() {
+    /**
+     * Formats a given HTML source string by applying indentation and cleaning up styles.
+     *
+     * @param {string} source - The HTML source string to format.
+     * @param {CodeFormatOptions} options - Formatting options.
+     * @returns {string} The formatted HTML string.
+     */
+    this.format = (source, options = {}) => {
+      const { tabWidth = 4, useTabs = true } = options;
+      const indentUnit = useTabs ? '\t' : ' ';
+      const INDENT = indentUnit.repeat(tabWidth);
+      const tagRegex = /(<\/?[^>]+>)/g;
+      // Split source into tokens using tag boundaries while filtering out empty strings
+      const tokens = source.split(tagRegex).filter((t) => t.length > 0);
+      let indentLevel = 0;
+      let output = '';
+      for (let i = 0; i < tokens.length; i++) {
+        let token = tokens[i];
+        // Decrease indentation for closing tags
+        if (token.startsWith('</')) {
+          indentLevel = Math.max(0, indentLevel - 1);
+        }
+        const indent = INDENT.repeat(indentLevel);
+        if (token.startsWith('<')) {
+          // Clean and normalize inline style attributes
+          token = token.replace(/style\s*=\s*"([^"]*)"/g, (_, styleContent) => {
+            return `style="${this.formatStyle(styleContent)}"`;
+          });
+          const tagName = CodeFormatter.getTagName(token);
+          const isInline = CodeFormatter.INLINE_TAGS.has(tagName);
+          // Inline tag grouping: e.g., <strong>Text</strong> stays on one line
+          if (isInline && i + 2 < tokens.length && tokens[i + 2] === `</${tagName}>`) {
+            // Group consecutive inline tags
+            let inlineGroup = `${token}${tokens[i + 1]}${tokens[i + 2]}`;
+            i += 2;
+            // Keep merging consecutive inline tag pairs
+            while (i + 2 < tokens.length &&
+              tokens[i + 1].startsWith('<') &&
+              CodeFormatter.INLINE_TAGS.has(CodeFormatter.getTagName(tokens[i + 1])) &&
+              tokens[i + 3] === `</${CodeFormatter.getTagName(tokens[i + 1])}>`) {
+              inlineGroup += `${tokens[i + 1]}${tokens[i + 2]}${tokens[i + 3]}`;
+              i += 3;
+            }
+            output += `${indent}${inlineGroup}\n`;
+          }
+          else {
+            output += `${indent}${token}\n`;
+            // Increase indentation for non-void opening tags
+            if (!token.startsWith('</') &&
+              !token.endsWith('/>') &&
+              !/^<br|^<img|^<meta|^<input|^<hr/i.test(token)) {
+              indentLevel++;
+            }
+          }
+        }
+        else {
+          // Add plain text content with current indentation
+          const text = token;
+          if (text.length > 0) {
+            output += `${INDENT.repeat(indentLevel)}${text}\n`;
+          }
+        }
+      }
+      return output.trim();
+    };
+  }
+  /**
+   * Extracts the tag name from an HTML tag string.
+   *
+   * @param {string} tag - A raw HTML tag string
+   * @returns {string} The lowercase tag name, or an empty string if no match is found.
+   */
+  static getTagName(tag) {
+    var _a;
+    const match = tag.match(/^<\/?([a-z0-9]+)/i);
+    return (_a = match === null || match === void 0 ? void 0 : match[1].toLowerCase()) !== null && _a !== void 0 ? _a : '';
+  }
+  /**
+   * Formats a CSS style string by trimming white space and ensuring consistent semicolon spacing.
+   *
+   * @param {string} style - The CSS style string to format.
+   * @returns {string} The formatted style string.
+   */
+  formatStyle(style) {
+    return style
+      .split(';')
+      .map((s) => s.trim())
+      .filter(Boolean)
+      .join('; ');
+  }
+}
+CodeFormatter.INLINE_TAGS = new Set([
+  'span',
+  'strong',
+  'em',
+  'a',
+  'b',
+  'i',
+  'u',
+  'small',
+  'abbr',
+  'code',
+  'b',
+  'u',
+  's',
+  'mark',
+  'time',
+  'del',
+  'ins',
+]);
+const CodeFormatter$1 = new CodeFormatter();
+
+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;
+};
+class VegaRichTextEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.renderHintMessage = () => {
+      return index.h("vega-text", null, this.hint);
+    };
+    this.renderTextContent = () => {
+      return (index.h("div", { class: {
+          'rich-text-editor-container': true,
+          'disabled': this.disabled,
+          'vega-hidden': this.sourceView,
+        }, style: { minHeight: `${this.rows * 24}px` }, onClick: this.richTextContentFocus, role: "textbox", tabIndex: !this.disabled ? -1 : 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
+        index.h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value, extensions: this.extensions }),
+        this.renderCharacterCounter()));
+    };
+    this.renderCharacterCounter = () => {
+      return (index.h("div", { class: {
+          'text-editor-counter': true,
+          'counter-exceed-max-length': false,
+        }, style: { display: 'none' } },
+        index.h("span", null, "0"),
+        index.h("span", null, "/100")));
+    };
+    this.renderErrorMessage = () => {
+      return index.h("div", { class: "vega-error vega-hidden" });
+    };
+    this.richTextContentFocus = () => {
+      void this.richTextContentRef.vegaFocus();
+    };
+    this.renderSourceViewContent = () => {
+      if (!this.allowSourceEdit)
+        return;
+      const sourceViewValue = this.sourceView ? CodeFormatter$1.format(this.value.toHtml()) : '';
+      return (index.h("div", { class: {
+          'source-view-container': true,
+          'vega-hidden': !this.sourceView,
+        } },
+        index.h("vega-code-block", { ref: (ref) => (this.sourceCodeBlockRef = ref), disabled: this.disabled, value: { language: 'html', code: sourceViewValue } })));
+    };
+  }
+  /**
+   * Component lifecycle - [componentDidRender]{@link VegaRichTextEditor.componentDidRender}
+   */
+  componentDidRender() {
+    changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.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 {Nullable<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 {Nullable<HTMLDivElement>} The div element which has property contenteditable
+   */
+  getRTEEditableElementRef() {
+    if (this.richTextContentRef && this.richTextContentRef.shadowRoot) {
+      return this.richTextContentRef.shadowRoot.querySelector('.rich-text-content');
+    }
+  }
+  getSourceCode() {
+    if (this.sourceCodeBlockRef) {
+      return this.sourceCodeBlockRef.value.code;
+    }
+  }
+  render() {
+    return index.h(index.Host, null, this.renderRichTextEditor());
+  }
+  renderRichTextEditor() {
+    return (index.h("vega-flex", { direction: "col", gap: "0", ref: (flex) => (this.richTextWrapperRef = flex) },
+      this.renderLabel(),
+      this.hint && this.renderHintMessage(),
+      this.toolbarRenderer.render(),
+      this.renderContent(),
+      this.renderErrorMessage()));
+  }
+  renderLabel() {
+    return (this.label && (index.h("vega-field-label", { onClick: this.richTextContentFocus, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
+  }
+  renderContent() {
+    return (index.h(index.Fragment, null,
+      this.renderTextContent(),
+      this.renderSourceViewContent()));
+  }
+}
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "host", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "toolbarRenderer", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "label", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "required", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "hint", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "disabled", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "rows", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "placeholder", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "value", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "sourceView", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "toolbarItems", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "sourceEditConfig", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "allowSourceEdit", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "extensions", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
+], VegaRichTextEditorRenderer.prototype, "componentDidRender", 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;
+};
+class ToolbarRenderer extends globalSlimmerRegistry.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;
+        case 'codeBlock':
+          return this.codeBlockToolbarButtonSlimmer;
+      }
+    };
+  }
+  render() {
+    const [renderedItems, totalVisibleCount] = this.renderToolbarItems();
+    return (index.h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" },
+      this.allowSourceEdit && (index.h(index.Fragment, null,
+        index.h("div", { class: "toolbar-btn-group" }, this.sourceEditToolbarButtonSlimmer.render()),
+        this.toolbarItems.length > 0 && totalVisibleCount > 0 && this.renderVegaDivider())),
+      renderedItems));
+  }
+  renderVegaDivider() {
+    return (index.h("vega-box", { height: "size-32" },
+      index.h("vega-divider", { direction: "vertical" })));
+  }
+  /**
+   * Renders the toolbar items based on the configured toolbar groups and items.
+   *
+   * @returns {[HTMLElement[], number]} A tuple containing the rendered toolbar items and the count of displayed items.
+   */
+  renderToolbarItems() {
+    let totalVisibleCount = 0;
+    const renderedItems = this.toolbarItems.map((group) => {
+      let visibleCountPerGroup = 0;
+      const groupElement = group
+        .map((item) => {
+        const presetRenderer = this.getToolbarBtnRenderer(item);
+        const customRenderer = dtoRendererManager.RTEDTORendererManager.getRTEToolbarButtonRenderer(item);
+        if (presetRenderer) {
+          if (!presetRenderer.isHidden()) {
+            totalVisibleCount++;
+            visibleCountPerGroup++;
+          }
+          return presetRenderer.render();
+        }
+        else if (customRenderer) {
+          const renderContext = {
+            sourceEditMode: this.sourceView,
+            host: this.host,
+            rteRange: this.selectionController.getCurrentRange(),
+          };
+          if (!customRenderer.isHidden(renderContext)) {
+            totalVisibleCount++;
+            visibleCountPerGroup++;
+          }
+          return customRenderer.render(index.h, renderContext);
+        }
+        return null;
+      })
+        .filter(typeGuard.isNonNullable);
+      return (index.h("div", { class: { 'toolbar-btn-group': true, 'vega-hidden': visibleCountPerGroup < 1 } }, groupElement));
+    });
+    return [renderedItems, totalVisibleCount];
+  }
+}
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "toolbarItems", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "allowSourceEdit", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "host", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "clearStyleToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "boldToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "textStylesToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "italicToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "underlineToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "textColorToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "bulletsNumbersToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "strikethroughToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "imageToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "moreIndentToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "lessIndentToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "codeToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "sourceEditToolbarButtonSlimmer", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "selectionController", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "sourceView", 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$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;
+};
+class BoldToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'bold',
+      tooltip: {
+        text: 'Bold',
+      },
+    });
+  }
+  onClick() {
+    const bold = this.isSelected();
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof codeBlock.RTETextNode)
+      .forEach((node) => node.apply(new codeBlock.BoldAnnotationAction(!bold)));
+  }
+  isSelected() {
+    const selectedNodes = this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof codeBlock.RTETextNode);
+    return (selectedNodes.length > 0 &&
+      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.BOLD)) === null || _a === void 0 ? void 0 : _a.bold; }));
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          this.shouldDisabledToolbar(node, codeBlock.BoldAnnotationAction.name);
+      }));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ bold });
+})();
+__decorate$A([
+  globalSlimmerRegistry.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>`,
+};
+
+var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+class ItalicToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'italic',
+      tooltip: { text: 'Italic' },
+    });
+  }
+  isSelected() {
+    const selectedNodes = this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof codeBlock.RTETextNode);
+    return (selectedNodes.length > 0 &&
+      selectedNodes.every((node) => { var _a; return (_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.ITALIC)) === null || _a === void 0 ? void 0 : _a.italic; }));
+  }
+  onClick() {
+    const italic = this.isSelected();
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof codeBlock.RTETextNode)
+      .forEach((node) => node.apply(new codeBlock.ItalicAnnotationAction(!italic)));
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          this.shouldDisabledToolbar(node, codeBlock.ItalicAnnotationAction.name);
+      }));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ italic });
+})();
+__decorate$z([
+  globalSlimmerRegistry.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>`,
+};
+
+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 UnderlineToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'underline',
+      tooltip: { text: 'Underline' },
+    });
+  }
+  isSelected() {
+    const selectedNodes = this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof codeBlock.RTETextNode);
+    return (selectedNodes.length > 0 &&
+      selectedNodes.every((node) => {
+        var _a;
+        return (_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.UNDERLINE)) === null || _a === void 0 ? void 0 : _a.underline;
+      }));
+  }
+  onClick() {
+    const selected = this.isSelected();
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof codeBlock.RTETextNode)
+      .forEach((node) => node.apply(new codeBlock.UnderlineAnnotationAction(!selected)));
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          this.shouldDisabledToolbar(node, codeBlock.UnderlineAnnotationAction.name);
+      }));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ underline });
+})();
+__decorate$y([
+  globalSlimmerRegistry.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$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 TextStylesToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'text-size',
+      tooltip: { text: 'Text Styles' },
+    });
+    this.handleDropdownItemClick = (payload) => {
+      const selectedType = payload.detail;
+      const boldByDefault = TextStylesToolbarButtonSlimmer.items.find((item) => item.key === selectedType).bold;
+      const selectedTextBlocks = this.selectionController
+        .getSelectedBlocks()
+        .filter((block) => block instanceof codeBlock.RTETextBlock);
+      if (selectedTextBlocks.length > 0) {
+        selectedTextBlocks.forEach((item) => {
+          item.apply(new codeBlock.TextStyleAnnotationAction(selectedType, boldByDefault));
+        });
+      }
+      else {
+        void this.focusController.focusOnLastTextNode({ newLine: true }).then(() => {
+          this.selectionController
+            .getSelectedBlocks()
+            .filter((node) => node instanceof codeBlock.RTETextBlock)
+            .forEach((item) => {
+            item.apply(new codeBlock.TextStyleAnnotationAction(selectedType, boldByDefault));
+          });
+        });
+      }
+    };
+  }
+  renderBtnWrapper(renderBtn) {
+    return (index.h("vega-dropdown", { selectType: "single", trigger: "click", alignment: "center", selectedSourceKey: this.getSelectedSourceKey(), ref: (ref) => {
+        this.addDropdownObserver(ref);
+      } },
+      renderBtn({ showArrowIcon: true }),
+      index.h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent())));
+  }
+  renderDropdownContent() {
+    return (index.h(index.Fragment, null, TextStylesToolbarButtonSlimmer.items.map((item) => {
+      const textStyleAnnotation = new codeBlock.TextStyleAnnotation(item.key);
+      const boldAnnotation = new codeBlock.BoldAnnotation(item.bold);
+      return (index.h("vega-dropdown-item", { key: item.key, itemKey: item.key },
+        index.h("vega-box", { padding: { right: 'size-20' } },
+          index.h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.renderStyle({ standalone: true })), boldAnnotation.renderStyle({ standalone: true })) }, this.translationSlimmer.t(item.label)))));
+    })));
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return (super.isDisabled() ||
+      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, codeBlock.TextStyleAnnotationAction.name)));
+  }
+  addDropdownObserver(dropdownRef) {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, domNodeSubjectObserverFactory.VegaDropdownClick, this.handleDropdownItemClick);
+  }
+  getSelectedSourceKey() {
+    var _a;
+    const currentSelectedBlocks = this.selectionController
+      .getSelectedBlocks()
+      .filter((block) => block instanceof codeBlock.RTETextBlock);
+    const isSameType = currentSelectedBlocks.length > 0 &&
+      currentSelectedBlocks.every((block) => block.type === currentSelectedBlocks[0].type);
+    if (isSameType) {
+      const blockAnnotation = currentSelectedBlocks[0].getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.TEXT_STYLE);
+      return (_a = blockAnnotation === null || blockAnnotation === void 0 ? void 0 : blockAnnotation.textStyle) !== null && _a !== void 0 ? _a : '';
+    }
+    return '';
+  }
+}
+(() => {
+  internalIconManager.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$x([
+  globalSlimmerRegistry.MapToComponentField()
+], TextStylesToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$x([
+  globalSlimmerRegistry.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$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 ClearStyleToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'text-slash',
+      tooltip: {
+        text: 'Clear Style',
+      },
+    });
+  }
+  isSelected() {
+    return false;
+  }
+  onClick() {
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof codeBlock.RTETextNode)
+      .forEach((node) => {
+      node.apply(new codeBlock.ClearFormattingAnnotationAction());
+    });
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => this.shouldDisabledToolbar(node, codeBlock.ClearFormattingAnnotationAction.name)));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'text-slash': TextSlash,
+  });
+})();
+__decorate$w([
+  globalSlimmerRegistry.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$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 CodeToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'code-simple',
+      tooltip: { text: 'Code' },
+    });
+  }
+  onClick() {
+    const selected = this.isSelected();
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof codeBlock.RTETextNode)
+      .forEach((node) => node.apply(new codeBlock.CodeAnnotationAction(!selected)));
+  }
+  isSelected() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return (selectedNodes.length > 0 &&
+      selectedNodes
+        .filter((node) => node instanceof codeBlock.RTETextNode)
+        .map((node) => node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE))
+        .every((annotation) => annotation && annotation.code));
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.LINK) ||
+        this.shouldDisabledToolbar(node, codeBlock.CodeAnnotationAction.name)));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ 'code-simple': codeSimple });
+})();
+__decorate$v([
+  globalSlimmerRegistry.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>`,
+};
+
+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 StrikethroughToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'strikethrough',
+      tooltip: { text: 'Strikethrough' },
+    });
+  }
+  isSelected() {
+    const selectedNodes = this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof codeBlock.RTETextNode);
+    return (selectedNodes.length > 0 &&
+      selectedNodes.every((node) => {
+        var _a;
+        return (_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.STRIKETHROUGH)) === null || _a === void 0 ? void 0 : _a.strikethrough;
+      }));
+  }
+  onClick() {
+    const selected = this.isSelected();
+    this.selectionController
+      .getSelectedNodes()
+      .filter((node) => node instanceof codeBlock.RTETextNode)
+      .forEach((node) => node.apply(new codeBlock.StrikethroughAnnotationAction(!selected)));
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => {
+        var _a;
+        return ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+          this.shouldDisabledToolbar(node, codeBlock.StrikethroughAnnotationAction.name);
+      }));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ strikethrough });
+})();
+__decorate$u([
+  globalSlimmerRegistry.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>`,
+};
+
+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 LinkToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  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 = createPublicApiRuntimeMetricsSlimmer.generateUUID();
+          this.currentSelectedNodes.forEach((node) => {
+            node.apply(new codeBlock.SelectionChangeAction(this.currentRange)).apply(new codeBlock.LinkAnnotationAction({
+              link: { href: url, groupKey: groupKey },
+              newText: textChanged ? text : undefined,
+              needMergeNode: textChanged && this.currentSelectedNodes.length > 1,
+              type: 'link',
+            }));
+          });
+          return;
+        }
+      }
+    };
+  }
+  renderBtnWrapper(renderBtn) {
+    return (index.h("div", { class: "toolbar-btn-link-wrapper", ref: (ref) => (this.linkBtnWrapperRef = ref) },
+      renderBtn(),
+      index.h("vega-rich-text-link-editor", { resetStatusAfterHide: false, status: "linkEdit", ref: (ref) => {
+          if (ref) {
+            this.linkEditorRef = ref;
+          }
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaChange, this.handleLinkEditorChange);
+        } })));
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return (super.isDisabled() ||
+      selectedBlocks.length > 1 ||
+      selectedNodes.some((node) => {
+        var _a;
+        return this.shouldDisabledToolbar(node, codeBlock.LinkAnnotationAction.name) ||
+          node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.LINK) ||
+          ((_a = node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code);
+      }));
+  }
+  onClick() {
+    this.currentRange = this.selectionController.getCurrentRange().toNativeRange();
+    this.currentSelectedNodes = this.selectionController.getSelectedNodes();
+    if (this.currentRange) {
+      this.currentSelectedText = this.currentRange.toString();
+      if (this.currentSelectedNodes.length > 0) {
+        this.linkEditorRef.record = {
+          text: this.currentSelectedText,
+          url: '',
+        };
+      }
+    }
+    // Set target prop and call show method at the first time to make sure showing later than overrides method call focusController.focusOnLastTextNode()
+    // Element appender will control the show and hide logic except for the first time.
+    if (!this.linkEditorRef.target) {
+      this.linkEditorRef.target = this.linkBtnWrapperRef;
+      void index$1.waitForComponentDidRender(this.linkEditorRef).then(() => {
+        void this.linkEditorRef.show();
+      });
+    }
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ link: link });
+})();
+__decorate$t([
+  globalSlimmerRegistry.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>`,
+};
+
+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 MoreIndentToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'indent',
+      tooltip: {
+        text: 'More Indent',
+      },
+    });
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return (super.isDisabled() ||
+      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, codeBlock.IndentAnnotationAction.name)));
+  }
+  onClick() {
+    this.selectionController.getSelectedBlocks().forEach((item) => {
+      var _a, _b;
+      const indent = (_b = (_a = item.getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
+      item.apply(new codeBlock.IndentAnnotationAction(indent + 1));
+    });
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ indent: indent });
+})();
+__decorate$s([
+  globalSlimmerRegistry.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$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 LessIndentToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'outdent',
+      tooltip: {
+        text: 'Less Indent',
+      },
+    });
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return (super.isDisabled() ||
+      selectedBlocks.some((node) => this.shouldDisabledToolbar(node, codeBlock.IndentAnnotationAction.name)));
+  }
+  onClick() {
+    this.selectionController.getSelectedBlocks().forEach((item) => {
+      var _a, _b;
+      const indent = (_b = (_a = item.getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
+      const newIndent = indent > 1 ? indent - 1 : 0;
+      item.apply(new codeBlock.IndentAnnotationAction(newIndent));
+    });
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ outdent: outdent });
+})();
+__decorate$r([
+  globalSlimmerRegistry.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>`,
+};
+
+/**
+ * Update the image node property url after the image uploaded.
+ *
+ * @example currentImageNode.apply(new ImageUpdateUrlAction(url))
+ */
+class ImageUpdateUrlAction extends codeBlock.ModifyContentAction {
+  constructor(newUrl) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.UPDATE_IMAGE_NODE_URL;
+    this.url = newUrl;
+  }
+}
+
+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 ImageToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  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.apply(new ImageUpdateUrlAction(url));
+      });
+      const payload = {
+        file: input.files[0],
+        sendBackUploadedURLCallback: this.updateNodeURLMap.get(node),
+      };
+      this.imageInsertedEventEmitter.emit(payload);
+      input.value = '';
+    };
+  }
+  renderBtnWrapper(renderBtn) {
+    return (index.h("vega-box", null,
+      renderBtn({ showArrowIcon: false }),
+      index.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();
+    const selectedBlock = this.selectionController.getSelectedBlocks()[0];
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node.getAnnotationByType(codeBlock.NodeAnnotationTypeEnum.LINK)) ||
+      this.shouldDisabledToolbar(selectedBlock, codeBlock.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ image: image });
+})();
+__decorate$q([
+  globalSlimmerRegistry.MapToComponentField()
+], ImageToolbarButtonSlimmer.prototype, "insertImageController", void 0);
+__decorate$q([
+  globalSlimmerRegistry.MapToComponentField()
+], ImageToolbarButtonSlimmer.prototype, "imageInsertedEventEmitter", void 0);
+__decorate$q([
+  globalSlimmerRegistry.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 codeBlock.ModifyContentAction {
+  constructor(listType, selectedBlocks) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.TRANSFORM_LIST_BLOCK;
+    this.isFlushable = true;
+    this.listType = listType;
+    this.selectedBlocks = selectedBlocks;
+  }
+}
+
+/**
+ * Action to toggle bullet annotation
+ */
+class TransformParagraphAction extends codeBlock.ModifyContentAction {
+  constructor(selectedBlocks) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK;
+    this.isFlushable = true;
+    this.selectedBlocks = selectedBlocks;
+  }
+}
+
+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 BulletsToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  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 (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof dtoRendererManager.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
+  }
+  isListType(selectedBlocks, type = 'bullet-list') {
+    return (selectedBlocks.length > 0 &&
+      selectedBlocks.every((block) => block instanceof dtoRendererManager.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$p([
+  globalSlimmerRegistry.MapToComponentField()
+], BulletsToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$p([
+  globalSlimmerRegistry.MapToComponentField()
+], BulletsToolbarButtonSlimmer.prototype, "popoverRef", void 0);
+
+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 NumbersToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  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 (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof dtoRendererManager.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
+  }
+  isListType(selectedBlocks, type = 'number-list') {
+    return (selectedBlocks.length > 0 &&
+      selectedBlocks.every((block) => block instanceof dtoRendererManager.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$o([
+  globalSlimmerRegistry.MapToComponentField()
+], NumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$o([
+  globalSlimmerRegistry.MapToComponentField()
+], NumbersToolbarButtonSlimmer.prototype, "popoverRef", void 0);
+
+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 BulletsNumbersToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  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 (index.h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", ref: (ref) => (this.popoverRef = ref) },
+      index.h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
+      index.h("div", { slot: "popover" }, this.renderContent())));
+  }
+  renderContent() {
+    return (index.h("vega-flex", { gap: "size-8", "justify-content": "center" },
+      index.h("div", null, this.bulletsToolbarButtonSlimmer.render()),
+      index.h("div", null, this.numbersToolbarButtonSlimmer.render())));
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    return super.isDisabled() || this.shouldDisabledListToolbar();
+  }
+  shouldDisabledListToolbar() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    return selectedBlocks.some((block) => {
+      return (block &&
+        (this.unableToConvertListOrParagraph(block) || this.unableToInsertBlock(block.parent)));
+    });
+  }
+  /**
+   * Check if unable to insert blocks before or after the given block.
+   *
+   * @param {RTEBlock | VegaRTEContent} block - The block to check.
+   * @returns {boolean} - Boolean result.
+   */
+  unableToInsertBlock(block) {
+    return !(codeBlock.ActionHandleStrategyRegistry.canHandle(codeBlock.ModifyContentActionType.INSERT_CHILDREN_AFTER, block) ||
+      codeBlock.ActionHandleStrategyRegistry.canHandle(codeBlock.ModifyContentActionType.INSERT_CHILDREN_BEFORE, block));
+  }
+  /**
+   * Check if unable to convert the block to list or paragraph.
+   *
+   * @param {RTEBlock} block - The block to check.
+   * @returns {boolean} - Boolean result.
+   */
+  unableToConvertListOrParagraph(block) {
+    return (!codeBlock.ActionHandleStrategyRegistry.canHandle(codeBlock.ModifyContentActionType.TRANSFORM_LIST_BLOCK, block) &&
+      !codeBlock.ActionHandleStrategyRegistry.canHandle(codeBlock.ModifyContentActionType.TRANSFORM_PARAGRAPH_BLOCK, block.parent));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'list-ul': ListUL,
+    'list-ol': ListOL,
+  });
+})();
+__decorate$n([
+  globalSlimmerRegistry.MapToComponentField()
+], BulletsNumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$n([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], BulletsNumbersToolbarButtonSlimmer.prototype, "bulletsToolbarButtonSlimmer", void 0);
+__decorate$n([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], BulletsNumbersToolbarButtonSlimmer.prototype, "numbersToolbarButtonSlimmer", void 0);
+__decorate$n([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillRender')
+], BulletsNumbersToolbarButtonSlimmer.prototype, "componentWillRender", null);
+
+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$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 LeftAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  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(codeBlock.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'left';
+      }));
+  }
+  onClick() {
+    this.selectionController
+      .getSelectedBlocks()
+      .forEach((item) => item.apply(new codeBlock.HorizontalAlignmentAnnotationAction('left')));
+    void this.popoverRef.hide();
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'align-left': AlignLeft,
+  });
+})();
+__decorate$m([
+  globalSlimmerRegistry.MapToComponentField()
+], LeftAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$m([
+  globalSlimmerRegistry.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$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 CenterAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  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(codeBlock.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'center';
+      }));
+  }
+  onClick() {
+    this.selectionController
+      .getSelectedBlocks()
+      .forEach((item) => item.apply(new codeBlock.HorizontalAlignmentAnnotationAction('center')));
+    void this.popoverRef.hide();
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'align-center': AlignCenter,
+  });
+})();
+__decorate$l([
+  globalSlimmerRegistry.MapToComponentField()
+], CenterAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$l([
+  globalSlimmerRegistry.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$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 RightAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  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(codeBlock.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'right';
+      }));
+  }
+  onClick() {
+    this.selectionController
+      .getSelectedBlocks()
+      .forEach((item) => item.apply(new codeBlock.HorizontalAlignmentAnnotationAction('right')));
+    void this.popoverRef.hide();
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'align-right': AlignRight,
+  });
+})();
+__decorate$k([
+  globalSlimmerRegistry.MapToComponentField()
+], RightAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$k([
+  globalSlimmerRegistry.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$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 JustifyAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  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(codeBlock.BlockAnnotationTypeEnum.ALIGNMENT)) === null || _a === void 0 ? void 0 : _a.textAlign) === 'justify';
+      }));
+  }
+  onClick() {
+    this.selectionController
+      .getSelectedBlocks()
+      .forEach((item) => item.apply(new codeBlock.HorizontalAlignmentAnnotationAction('justify')));
+    void this.popoverRef.hide();
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'align-justify': AlignJustify,
+  });
+})();
+__decorate$j([
+  globalSlimmerRegistry.MapToComponentField()
+], JustifyAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$j([
+  globalSlimmerRegistry.MapToComponentField()
+], JustifyAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
+
+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 HorizontalAlignmentToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  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 (index.h("vega-popover", { trigger: "click", showArrow: false, alignment: "center", placement: "bottom", ref: (ref) => (this.popoverRef = ref) },
+      index.h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
+      index.h("div", { slot: "popover" }, this.renderContent())));
+  }
+  renderContent() {
+    return (index.h("vega-flex", { gap: "size-8", "justify-content": "center" },
+      index.h("div", null, this.leftAlignToolbarButtonSlimmer.render()),
+      index.h("div", null, this.centerAlignToolbarButtonSlimmer.render()),
+      index.h("div", null, this.rightAlignToolbarButtonSlimmer.render()),
+      index.h("div", null, this.justifiedToolbarButtonSlimmer.render())));
+  }
+  isSelected() {
+    return false;
+  }
+  isDisabled() {
+    return (super.isDisabled() ||
+      this.selectionController
+        .getSelectedBlocks()
+        .some((block) => this.shouldDisabledToolbar(block, codeBlock.HorizontalAlignmentAnnotationAction.name)));
+  }
+}
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentField()
+], HorizontalAlignmentToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$i([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], HorizontalAlignmentToolbarButtonSlimmer.prototype, "leftAlignToolbarButtonSlimmer", void 0);
+__decorate$i([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], HorizontalAlignmentToolbarButtonSlimmer.prototype, "centerAlignToolbarButtonSlimmer", void 0);
+__decorate$i([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], HorizontalAlignmentToolbarButtonSlimmer.prototype, "rightAlignToolbarButtonSlimmer", void 0);
+__decorate$i([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], HorizontalAlignmentToolbarButtonSlimmer.prototype, "justifiedToolbarButtonSlimmer", void 0);
+__decorate$i([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillRender')
+], HorizontalAlignmentToolbarButtonSlimmer.prototype, "componentWillRender", null);
+
+/**
+ * Represents the state of the RTE
+ */
+class RTEEditorState {
+  constructor(content, selection) {
+    this.content = content.clone(true);
+    this.selection = selection.clone();
+    this.refreshSelectionNodes();
+  }
+  /**
+   * Clones the editor state, updating the content and selection based on the provided content.
+   *
+   * @returns {RTEEditorState} A new instance of RTEEditorState with the updated content and selection.
+   */
+  clone() {
+    return new RTEEditorState(this.content, this.selection);
+  }
+  /**
+   * Refreshes the selection nodes in the editor state.
+   */
+  refreshSelectionNodes() {
+    const { startNode: oldStartNode, endNode: oldEndNode, startOffset, endOffset, } = this.selection.range;
+    if (oldStartNode && oldEndNode) {
+      const startNode = this.content.findNodeById(oldStartNode.id);
+      const endNode = this.content.findNodeById(oldEndNode.id);
+      if (startNode && endNode) {
+        this.selection.range.updateRTERange({
+          startNode,
+          endNode,
+          startOffset,
+          endOffset,
+        });
+      }
+    }
+  }
+}
+
+var __decorate$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;
+};
+/**
+ * The value controller is responsible for updating the value of the rich text editor.
+ */
+class ValueController extends globalSlimmerRegistry.VegaSlimmer {
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
+   */
+  connectedCallback() {
+    const flushChangesWithDebounce = timer.debounce(() => {
+      void this.valueController.flushChanges(this.value);
+    }, ValueController.VALUE_CHANGE_DEBOUNCE_TIME, this);
+    this.flushChangeObserver = new observer.Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
+    changeManager.ChangeManager.register(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
+  }
+  /**
+   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
+   */
+  disconnectedCallback() {
+    changeManager.ChangeManager.unregister(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
+  }
+  /**
+   * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
+   */
+  componentWillLoad() {
+    if (this.value && !(this.value instanceof dtoRendererManager.VegaRTEContent)) {
+      this.value = dtoRendererManager.VegaRTEContent.fromJSON(this.value);
+    }
+    this.registerEditorRefAndContent();
+  }
+  /**
+   * Watches the value of the editor and updates the internal value.
+   */
+  watchValueUpdate() {
+    if (this.value && !(this.value instanceof dtoRendererManager.VegaRTEContent)) {
+      this.value = dtoRendererManager.VegaRTEContent.fromJSON(this.value);
+    }
+    else if (!this.value || this.value.children.length === 0) {
+      this.value = dtoRendererManager.VegaRTEContent.createEmptyContent();
+    }
+    else {
+      this.changeEventEmitter.emit(this.value);
+      changeManager.ChangeManager.notify(staticSubjectTitle.FORM_ELEMENT_VALUE_CHANGE, {
+        host: this.host,
+        detail: this.value,
+      });
+    }
+    this.registerEditorRefAndContent();
+  }
+  /**
+   * Updates the value of the editor and restore the selection.
+   *
+   * @param {VegaRTEContent} newValue The new value to set.
+   * @param {boolean} recordHistory - Whether to record the change in history.
+   */
+  async flushChanges(newValue, recordHistory = true) {
+    this.value = newValue.clone();
+    if (recordHistory) {
+      this.historyController.registerHistory(new RTEEditorState(this.value, new componentValueHistoryControllerSlimmer_abstract.RTESelectionState(this.selectionController.getCurrentRange())));
+    }
+    await index$1.waitForComponentDidRender(this.host);
+  }
+  /**
+   * Determines whether the observer should accept changes.
+   *
+   * @returns {boolean} Always returns true in the current implementation.
+   */
+  isAcceptableFlushChange() {
+    return true;
+  }
+  /**
+   * Register the host element and the current content.
+   */
+  registerEditorRefAndContent() {
+    if (this.host && this.host.value) {
+      codeBlock.stateEntityRenderingRegistry.register(this.host, this.host.value);
+    }
+  }
+}
+ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], ValueController.prototype, "host", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], ValueController.prototype, "value", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], ValueController.prototype, "changeEventEmitter", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], ValueController.prototype, "valueController", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], ValueController.prototype, "historyController", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentField()
+], ValueController.prototype, "selectionController", void 0);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], ValueController.prototype, "connectedCallback", null);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], ValueController.prototype, "disconnectedCallback", null);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
+], ValueController.prototype, "componentWillLoad", null);
+__decorate$h([
+  globalSlimmerRegistry.MapToComponentMethod('watchValueUpdate')
+], ValueController.prototype, "watchValueUpdate", null);
+
+/**
+ * The rich text content controller
+ */
+class RichTextContentController {
+  constructor(editor) {
+    this.editor = editor;
+  }
+  /**
+   * Sync rich text content editable with disabled property
+   *
+   */
+  syncRichTextContentEditable() {
+    this.editor.richTextContentEditable = !this.editor.disabled;
+  }
+}
+
+const ROOT_CONTAINER_CLASS_NAME = 'rich-text-content';
+/** This code snippet is defining an abstract class named `BaseHandler` with an abstract method `execute`. */
+class BaseHandler {
+  /**
+   * The function `execute` initializes the current state and selection, and then handles an event if provided.
+   *
+   * @param {VegaRTEContent} currentState - The current state of the VegaRTE content.
+   * @param {SelectionController} selectionController - Manages the selection of items in the user interface.
+   * @param {HTMLElement} richTextEditor - The current rich text editor component
+   * @param {InputEvent} [event] - It is used to pass an input event to the method for handling.
+   */
+  execute(currentState, selectionController, richTextEditor, event) {
+    this.initCurrentStateAndSelection(currentState, selectionController);
+    this.setCurrentRichTextEditor(richTextEditor);
+    this.handleEvent(event);
+  }
+  /**
+   * The function `isRootContainer` checks if an HTML element is a root container with a class of 'rich-text-content'.
+   *
+   * @param {HTMLElement} element - HTMLElement
+   * @returns {boolean} The boolean value
+   */
+  isRootContainer(element) {
+    return (element &&
+      element.nodeType === Node.ELEMENT_NODE &&
+      element.classList.contains(ROOT_CONTAINER_CLASS_NAME));
+  }
+  /**
+   * Checks if a given HTML element represents an empty paragraph containing only a line break element.
+   *
+   * @param {HTMLElement} node - An HTMLElement node that represents a paragraph element in the HTML document.
+   * @returns {boolean} boolean result
+   */
+  isEmptyParagraph(node) {
+    return node && node.childNodes && node.childNodes.length === 0;
+  }
+  /**
+   * Removes selected nodes within a range in a rich text editor content.
+   * The method is only used for different nodes are selected
+   *
+   * @param {boolean} [mergeNode] Merge start node and end node or not, default value is false.
+   * @returns {RTENode} The range start node, usually the start node is the first item of selectedNodes, if the selectedNodes is all removed, the start node will be a new text node.
+   */
+  removeSelectionRange(mergeNode = false) {
+    changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.richTextEditorRef, vegaInternalEventId.VegaInternalRichTextEditDeleteSelectedNodes), { host: this.richTextEditorRef, detail: mergeNode });
+    const range = this.selectionController.getCurrentRange();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return range.startNode || selectedNodes[0];
+  }
+  /**
+   * Creates a new paragraph with an empty text node and returns it.
+   *
+   * @returns {RTETextBlock} An empty paragraph with a unique identifier and a text node appended to it.
+   */
+  createEmptyParagraph() {
+    const paragraph = new codeBlock.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
+    const textNode = new codeBlock.RTETextNode(`${paragraph.id}1`, '', paragraph);
+    paragraph.apply(new codeBlock.AppendChildrenAction([textNode]));
+    return paragraph;
+  }
+  /**
+   * The function initializes the current state and selection controller in TypeScript.
+   *
+   * @param {VegaRTEContent} currentState - The current state of a Vega runtime environment content.
+   * @param {SelectionController} selectionController - It is used to manage the selection of content within the VegaRTE editor.
+   */
+  initCurrentStateAndSelection(currentState, selectionController) {
+    this.currentState = currentState;
+    this.selectionController = selectionController;
+  }
+  /**
+   * Queries the rich text editor element from the input event target.
+   *
+   * @param {HTMLElement} richTextEditor - The current rich text editor component
+   */
+  setCurrentRichTextEditor(richTextEditor) {
+    this.richTextEditorRef = richTextEditor;
+  }
+}
+
+/**
+ * Replace the text node selected content to new text
+ *
+ * @example selectedNode.apply(new ReplaceSelectedTextAction(insertText))
+ */
+class ReplaceSelectedTextAction extends codeBlock.ModifyContentAction {
+  constructor(text, currentRange) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.REPLACE_SELECTED_TEXT;
+    this.textToBeInsert = '';
+    this.textToBeInsert = text;
+    this.currentRange = currentRange;
+  }
+}
+
+/**
+ * Action to type character into a decorator node
+ *
+ * @example decoratorNode.parent.apply(new InsertTextToDecoratorNodeAction(decoratorNode, '', 0 | 1))
+ */
+class InsertTextToDecoratorNodeAction extends codeBlock.ModifyContentAction {
+  constructor(decoratorNode, text, offset) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.INSERT_TEXT_TO_DECORATOR_NODE;
+    this.text = '';
+    this.offset = 0;
+    this.decoratorNode = decoratorNode;
+    this.text = text;
+    this.offset = offset;
+  }
+}
+
+/** 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 currentRange = this.selectionController.getCurrentRange();
+    const { startContainer, startOffset } = currentRange;
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    if (selectedNodes.length < 2) {
+      if (!selectedNodes.length && this.isRootContainer(startContainer)) {
+        const cursorNode = this.insertTextToRoot(text);
+        this.selectionController.enqueueSelectionRangeFutureState(cursorNode, text.length);
+      }
+      else if (selectedNodes[0] instanceof codeBlock.RTETextNode) {
+        if (selectedNodes[0].isContentEditable()) {
+          let nextOffset = startOffset + text.length;
+          let updateFlag = false;
+          let cursorNode = selectedNodes[0];
+          if (cursorNode.text === '\n') {
+            cursorNode = this.insertTextToLineBreakNode(cursorNode, text);
+            updateFlag = true;
+          }
+          else {
+            if (startContainer.nodeValue === codeBlock.ZERO_WIDTH_SPACE &&
+              startOffset === codeBlock.ZERO_WIDTH_SPACE.length &&
+              cursorNode.isEmpty()) {
+              startContainer.nodeValue = '';
+              nextOffset = nextOffset - codeBlock.ZERO_WIDTH_SPACE.length;
+            }
+            if (cursorNode instanceof codeBlock.RTETextNode) {
+              updateFlag = true;
+              cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
+            }
+          }
+          updateFlag &&
+            this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(nextOffset, cursorNode['text'].length));
+        }
+        else {
+          selectedNodes[0].parent.apply(new InsertTextToDecoratorNodeAction(selectedNodes[0], text, startOffset));
+        }
+      }
+    }
+    else {
+      // The selected nodes is multiple nodes
+      const cursorNode = this.removeSelectionRange(true);
+      if (cursorNode instanceof codeBlock.RTETextNode) {
+        cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
+        this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(startOffset + text.length, cursorNode.text.length));
+      }
+    }
+  }
+  /**
+   * Insert the text in root element when root container is empty, should create text block and text node
+   *
+   * @param {string} text The insert text
+   * @returns {RTETextNode} The new create text node
+   */
+  insertTextToRoot(text) {
+    if (this.currentState &&
+      this.currentState.children[0] &&
+      this.currentState.children[0] instanceof codeBlock.RTETextBlock) {
+      const firstNode = this.currentState.children[0].children[0];
+      firstNode.apply(new codeBlock.UpdateTextAction(text));
+      return firstNode;
+    }
+  }
+  /**
+   * 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.parent;
+    if (textBlock instanceof codeBlock.RTETextBlock) {
+      const index = textBlock.children.indexOf(lineBreakNode);
+      if (startOffset === 0 && startOffset === endOffset && textBlock.children[index + 1]) {
+        const newTextNode = lineBreakNode.cloneWithText(text);
+        textBlock.apply(new codeBlock.InsertChildrenBeforeAction(lineBreakNode, newTextNode));
+        return newTextNode;
+      }
+      else {
+        lineBreakNode.apply(new codeBlock.UpdateTextAction(text));
+        return lineBreakNode;
+      }
+    }
+  }
+}
+
+/** 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) {
+      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.parent;
+      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 dtoRendererManager.MergeTwoBlocksNodesAction(lastBlock));
+        const splitAction = new codeBlock.SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
+        firstBlock.apply(splitAction);
+        this.switchCaretPositionToNextElement(splitAction.newBlock);
+        return;
+      }
+    }
+    this.selectionController.enqueueSelectionRangeFutureState(cursorNode, range.startOffset);
+  }
+  /**
+   * Handles breaking a single block in an RTE editor based on the current selection and position.
+   */
+  breakSingleBlock() {
+    const cursorNode = this.removeSelectionRange();
+    const currentBlock = cursorNode.parent;
+    const { startOffset } = this.selectionController.getCurrentRange();
+    if (currentBlock) {
+      const breakAction = new dtoRendererManager.InsertNewParagraphAction(cursorNode, startOffset);
+      currentBlock.apply(breakAction);
+      this.switchCaretPositionToNextElement(breakAction.newBlock);
+    }
+  }
+  /**
+   * 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) {
+    if (newBlock && newBlock.children) {
+      this.selectionController.enqueueSelectionRangeFutureState(newBlock.children[0], 0);
+    }
+  }
+}
+
+/**
+ * Split the block with a split point node
+ *
+ * @example block.apply(new SplitBlockWithNodeAction(node, offset))
+ */
+class LineBreakSingleBlockAction extends codeBlock.ModifyContentAction {
+  constructor(startContainerNode, startOffset) {
+    super();
+    this.type = codeBlock.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 codeBlock.ModifyContentAction {
+  constructor(selectedBlocks) {
+    super();
+    this.type = codeBlock.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) {
+      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() {
+    if (this.currentState &&
+      this.currentState.children[0] &&
+      this.currentState.children[0] instanceof codeBlock.RTETextBlock) {
+      const lineBreakAction = new LineBreakSingleBlockAction(this.currentState.children[0].children[0], 0);
+      this.currentState.children[0].apply(lineBreakAction);
+      this.switchCaretPositionToSpecifiedNode(lineBreakAction.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.parent;
+    if (currentBlock) {
+      const lineBreakAction = new LineBreakSingleBlockAction(cursorNode, range.startOffset);
+      currentBlock.apply(lineBreakAction);
+      if (lineBreakAction.lineBreakNode) {
+        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.parent.apply(lineBreakAction);
+    this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
+  }
+  /**
+   * Moves the caret to the next node element in a rich text editor.
+   *
+   * @param {RTENode} lineBreakNode - Represents a node element in a rich text editor.
+   */
+  switchCaretPositionToSpecifiedNode(lineBreakNode) {
+    this.selectionController.enqueueSelectionRangeFutureState(this.getNextRTENode(lineBreakNode), 0);
+  }
+  /**
+   * Returns the next sibling node 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 {RTENode} The next sibling node of the current line break element, or the current node if next node is not exists.
+   */
+  getNextRTENode(lineBreakNode) {
+    const index = lineBreakNode.parent.children.indexOf(lineBreakNode);
+    const nextNode = lineBreakNode.parent.children[index + 1];
+    return nextNode || lineBreakNode;
+  }
+}
+
+/**
+ * Delete text or image when press delete
+ *
+ * @example currentBlock.apply(new DeleteBlockContentAction(startContainerNode, startOffset))
+ */
+class DeleteBlockContentAction extends codeBlock.ModifyContentAction {
+  constructor(startContainerNode, startOffset) {
+    super();
+    this.type = codeBlock.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)
+          : deleteAction.previousNode.getRangeEndOffset();
+        this.selectionController.enqueueSelectionRangeFutureState(deleteAction.previousNode, nextOffset);
+      }
+      else if (deleteAction.nextNode) {
+        this.selectionController.enqueueSelectionRangeFutureState(deleteAction.nextNode, 0);
+      }
+      else if (this.currentState.children.length === 0) {
+        // Add a empty paragraph if delete all content to make sure the caret position
+        this.insertDefaultParagraph();
+      }
+    }
+  }
+  /**
+   * Deletes the content within multiple nodes selected by the user.
+   */
+  deleteContentWithMultipleNodes() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const cursorNode = this.removeSelectionRange(true);
+    const lastSelectedNode = selectedNodes[selectedNodes.length - 1];
+    if (selectedNodes.length > 1 &&
+      lastSelectedNode instanceof codeBlock.RTETextNode &&
+      lastSelectedNode.isEmpty()) {
+      lastSelectedNode.parent.apply(new codeBlock.RemoveChildrenAction(lastSelectedNode));
+    }
+    this.convertFirstBlockToParagraph(cursorNode.parent);
+  }
+  /**
+   * 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.children[0];
+    if (firstBlock === block &&
+      block instanceof codeBlock.RTETextBlock &&
+      block.children.length === 1 &&
+      block.children[0].isEmpty() &&
+      block.type !== 'paragraph') {
+      const paragraph = this.createEmptyParagraph();
+      paragraph.apply(new codeBlock.ReplaceChildNodesAction(block.children));
+      block.parent.apply(new codeBlock.InsertChildrenBeforeAction(block, paragraph));
+      block.parent.apply(new codeBlock.RemoveChildrenAction(block));
+    }
+  }
+  /**
+   * Creates a new paragraph element with a text node and appends it to the current state.
+   */
+  insertDefaultParagraph() {
+    const paragraph = this.createEmptyParagraph();
+    this.currentState.apply(new codeBlock.AppendChildrenAction([paragraph]));
+    this.selectionController.enqueueSelectionRangeFutureState(paragraph.children[0], 1);
+  }
+}
+
+/**
+ * Action to paste new content into current block.
+ *
+ * @example functionBlock.apply(new PasteContentAction(blocksToBeInserted, startNode, startOffset))
+ * @example host.value.apply(new PasteContentAction(blocksToBeInserted, startNode, startOffset))
+ */
+class PasteContentAction extends codeBlock.ModifyContentAction {
+  constructor(blocksToBeInserted, startNode, startOffset, rteRange) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.PASTE_CONTENT;
+    this.blocksToBeInserted = blocksToBeInserted;
+    this.startNode = startNode;
+    this.startOffset = startOffset;
+    this.rteRange = rteRange;
+  }
+}
+
+/**
+ * Handle user paste
+ */
+class InsertPasteHandler extends BaseHandler {
+  /**
+   * 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);
+      // TODO: Need to check below logic, it seems not correct https://gethired.atlassian.net/browse/VD-7779
+    }
+    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 codeBlock.AppendChildrenAction(blocks));
+  }
+  /**
+   * Insert the blocks to content
+   *
+   * @param { RTEContentBlock[]} blocks - blocks
+   */
+  insertBlocksToContent(blocks) {
+    const cursorNode = this.removeSelectionRange();
+    if (cursorNode && cursorNode.parent) {
+      const { startOffset } = this.selectionController.getCurrentRange();
+      const pasteAction = new PasteContentAction(blocks, cursorNode, startOffset);
+      cursorNode.parent.apply(pasteAction);
+      if (pasteAction.futureFocusBlock) {
+        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock);
+      }
+    }
+  }
+  /**
+   * 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.parent;
+    if (currentBlock) {
+      const pasteAction = new PasteContentAction(blocks, currentBlock.children[0], 0, this.selectionController.getCurrentRange());
+      currentBlock.apply(pasteAction);
+      if (pasteAction.futureFocusBlock) {
+        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock);
+      }
+    }
+  }
+  /**
+   * Format and parse elements from user paste with simple style preservation.
+   *
+   * @param {InputEvent} event - Paste event.
+   * @returns {RTEContentBlock[]} - RTEContentBlock.
+   */
+  parsePastedElements(event) {
+    let pastedHTML = event.dataTransfer.getData('text/html');
+    if (!pastedHTML) {
+      const pastedText = event.dataTransfer.getData('text/plain');
+      pastedHTML = this.parsePlainText(pastedText);
+    }
+    const context = dtoRendererManager.StylePreservator.preserve(pastedHTML);
+    const safeHtml = context.getProcessedHtml();
+    const parser = new DOMParser();
+    const parsedDoc = parser.parseFromString(safeHtml, 'text/html');
+    const htmlElements = Array.from(parsedDoc.body.childNodes);
+    context.restore(htmlElements);
+    return dtoRendererManager.ElementToDtoStrategyProcessor.process(htmlElements)
+      .filter(Boolean)
+      .map((output) => output.toDto())
+      .filter(Boolean);
+  }
+  /**
+   * 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) {
+    if (newBlock && newBlock.children) {
+      this.selectionController.enqueueSelectionRangeFutureState(newBlock.children[0], 0);
+    }
+  }
+  /**
+   * Parses the content of a plain text and formats it into HTML.
+   *
+   * @param {string} content - The content of plain text.
+   * @returns {string} - The formatted HTML string.
+   */
+  parsePlainText(content) {
+    const lines = content.split('\n');
+    return lines
+      .map((line) => {
+      if (line === '') {
+        return '<p>\n</p>';
+      }
+      return `<p>${line}</p>`;
+    })
+      .join('');
+  }
+}
+
+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;
+};
+/** Used to monitoring the user input actions by event listener */
+class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.insertTextHandler = new InsertTextHandler();
+    this.insertParagraphHandler = new InsertParagraphHandler();
+    this.insertLineBreakHandler = new InsertLineBreakHandler();
+    this.deleteContentHandler = new DeleteContentHandler();
+    this.insertPasteHandler = new InsertPasteHandler();
+    /**
+     * 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) => {
+      const inputType = e.inputType;
+      e.preventDefault();
+      this.initValueIfEmpty();
+      // The insertCompositionText type input event can not be prevented, so we process the current action by insertCompositionTextController.
+      // If the focus node is a non-editable element, we do not process the input event.
+      if (inputType === 'insertCompositionText' || this.isFocusNodeNonEditable()) {
+        return;
+      }
+      this.insertCompositionTextController.removeObserver();
+      let updateFlag = false;
+      switch (inputType) {
+        case 'insertParagraph':
+          updateFlag = true;
+          this.insertParagraphHandler.execute(this.value, this.selectionController, this.host, e);
+          break;
+        case 'insertText':
+          updateFlag = true;
+          this.insertTextHandler.execute(this.value, this.selectionController, this.host, e);
+          break;
+        case 'insertLineBreak':
+          updateFlag = true;
+          this.insertLineBreakHandler.execute(this.value, this.selectionController, this.host, e);
+          break;
+        case 'deleteContentBackward':
+          updateFlag = true;
+          this.deleteContentHandler.execute(this.value, this.selectionController, this.host, e);
+          break;
+        case 'insertFromPaste':
+          updateFlag = true;
+          this.insertPasteHandler.execute(this.value, this.selectionController, this.host, e);
+          break;
+      }
+      if (updateFlag) {
+        void this.valueController.flushChanges(this.value);
+      }
+    };
+  }
+  /**
+   * 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);
+    }
+  }
+  /**
+   * 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);
+    }
+  }
+  /**
+   * The function `getEditableElementRef` returns a reference to the editable HTMLDivElement within a rich text editor.
+   *
+   * @returns {Nullable<HTMLDivElement>} A reference to an HTMLDivElement element that is editable.
+   */
+  getEditableElementRef() {
+    if (!this.editableElementRef) {
+      this.editableElementRef = this.vegaRichTextEditorRenderer.getRTEEditableElementRef();
+    }
+    return this.editableElementRef;
+  }
+  /**
+   * 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) {
+      const id = createPublicApiRuntimeMetricsSlimmer.generateUUID();
+      const defaultParagraph = [
+        { id, type: 'paragraph', nodes: [{ id: `${id}1`, type: 'text', text: '' }] },
+      ];
+      void this.valueController.flushChanges(dtoRendererManager.VegaRTEContent.fromJSON(defaultParagraph));
+    }
+  }
+  /**
+   * The code block placeholder element is non-editable, so we need to check if the focus node is a code block placeholder element.
+   *
+   * @returns {boolean} - Returns true if the focus node is a code block placeholder element, otherwise false.
+   */
+  isFocusNodeNonEditable() {
+    const { startContainer, endContainer } = this.selectionController.getCurrentRange();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    if (startContainer && startContainer === endContainer && selectedNodes.length === 0) {
+      const focusElement = startContainer.nodeType === Node.ELEMENT_NODE
+        ? startContainer
+        : startContainer.parentElement;
+      return (focusElement &&
+        focusElement.classList.contains(codeBlock.RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME));
+    }
+    return false;
+  }
+}
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], UserInputController.prototype, "host", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], UserInputController.prototype, "value", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], UserInputController.prototype, "valueController", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], UserInputController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], UserInputController.prototype, "selectionController", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentField()
+], UserInputController.prototype, "insertCompositionTextController", void 0);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], UserInputController.prototype, "addActionListener", null);
+__decorate$g([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], UserInputController.prototype, "removeActionListener", null);
+
+/**
+ * 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 codeBlock.ModifyContentAction {
+  constructor(splitPointNode, startOffsetOfNode, imageBlockToBeInserted) {
+    super();
+    this.isFlushable = true;
+    this.type = codeBlock.ModifyContentActionType.INSERT_IMAGE_TO_BLOCK;
+    this.splitPointNode = splitPointNode;
+    this.startOffsetOfNode = startOffsetOfNode;
+    this.imageBlockToBeInserted = imageBlockToBeInserted;
+  }
+}
+
+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;
+};
+/** Used to control the insert image tool button actions */
+class InsertImageController extends globalSlimmerRegistry.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 dtoRendererManager.RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
+    const newImageNode = new dtoRendererManager.RTEImageNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), imageUrl, imageBlock);
+    newImageNode.apply(new imageAnnotationAction.ImageAnnotationAction('md', ''));
+    imageBlock.apply(new codeBlock.AppendChildrenAction([newImageNode]));
+    if (selectedBlocks.length < 1 || this.value.children.length < 1) {
+      this.value.apply(new codeBlock.AppendChildrenAction([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(newImageNode, 1);
+  }
+  /**
+   * The current selected node should be current image node after click image.
+   */
+  registerImageSelectedObserver() {
+    const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
+    if (richTextContentRef) {
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(richTextContentRef, vegaInternalEventId.VegaInternalRichTextImageClick, (payload) => {
+        const range = this.selectionController.getCurrentRange();
+        if (!range || range.startContainer !== payload.host || range.startOffset !== 0) {
+          const imageNode = codeBlock.stateEntityRenderingRegistry.getEntityByDOM(payload.host.querySelector('img'));
+          this.selectionController.enqueueSelectionRangeFutureState(imageNode, 0, imageNode, 0, true);
+        }
+      });
+      /*
+       * The below method is e2e-test covered in
+       * @see{module:vega-rich-text-editor-image-click-delete-button}
+       */
+      /* istanbul ignore next */
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(richTextContentRef, vegaInternalEventId.VegaInternalRichTextImageDeleteButtonClicked, (payload) => {
+        const range = this.selectionController.getCurrentRange();
+        if (!range || range.startContainer !== payload.host || range.startOffset !== 1) {
+          this.selectionController.enqueueSelectionRangeFutureState(payload.host, 1, payload.host, 1, true);
+        }
+      });
+    }
+  }
+  /**
+   * remove the observer after component delete
+   */
+  removeImageSelectedObserver() {
+    const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
+    if (richTextContentRef) {
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(richTextContentRef, vegaInternalEventId.VegaInternalRichTextImageClick);
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(richTextContentRef, vegaInternalEventId.VegaInternalRichTextImageDeleteButtonClicked);
+    }
+  }
+}
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertImageController.prototype, "selectionController", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertImageController.prototype, "value", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertImageController.prototype, "valueController", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertImageController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], InsertImageController.prototype, "registerObserver", null);
+__decorate$f([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], InsertImageController.prototype, "unRegisterObserver", null);
+
+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;
+};
+/**
+ * Focus controller for RTE
+ */
+class FocusController extends globalSlimmerRegistry.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) => {
+      const lastNode = lastBlock.getLastNode();
+      const dom = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(lastNode);
+      if (dom) {
+        if (!lastNode.isContentEditable()) {
+          this.setCaretRangeToNodeEnd(dom.parentElement, lastNode.getRangeEndOffset());
+        }
+        else {
+          this.setCaretRangeToNodeEnd(dom.firstChild, dom.firstChild.nodeValue.length);
+        }
+        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.children[this.value.children.length - 1];
+    if (!(lastBlock instanceof codeBlock.RTETextBlock) || (options === null || options === void 0 ? void 0 : options.newLine)) {
+      const newTextBlock = codeBlock.RTETextBlock.from({
+        id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
+        type: 'paragraph',
+        nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '' }],
+      });
+      lastBlock.parent.apply(new codeBlock.InsertChildrenAfterAction(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
+   * @param {number} offset - The offset to move the caret to
+   */
+  setCaretRangeToNodeEnd(targetNode, offset) {
+    const range = new Range();
+    range.setStart(targetNode, offset);
+    this.selectionController.setSelectionRange(range);
+  }
+}
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], FocusController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], FocusController.prototype, "selectionController", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], FocusController.prototype, "valueController", void 0);
+__decorate$e([
+  globalSlimmerRegistry.MapToComponentField()
+], FocusController.prototype, "value", void 0);
+
+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;
+};
+/**
+ * Controller for the text node color
+ */
+class TextNodeColorController extends globalSlimmerRegistry.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.Observer(this.isAcceptObserver.bind(this), (isDark) => {
+      const textNodeElements = imageAnnotationAction.TextNodeRenderingRegistry.getTextNodeElements();
+      textNodeElements.forEach((textColorAnnotation, element) => {
+        element.style.color = isDark
+          ? textColorAnnotation.textColor.dark
+          : textColorAnnotation.textColor.light;
+      });
+    });
+    changeManager.ChangeManager.register(staticSubjectTitle.DARK_MODE_CHANGE, this.observer);
+  }
+  /**
+   * cancel dark mode observer when disconnectedCallback
+   */
+  disconnectResizeObserver() {
+    changeManager.ChangeManager.unregister(staticSubjectTitle.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$d([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], TextNodeColorController.prototype, "connectedCallback", null);
+__decorate$d([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], TextNodeColorController.prototype, "disconnectResizeObserver", 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;
+};
+/** Handles inserting composition text into a VegaRTEContent based on the current selection and input event. User input character will trigger this callback */
+class InsertCompositionTextController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.insertCompositionTextEndFlag = true;
+    this.observerOptions = {
+      characterData: true,
+      characterDataOldValue: true,
+      subtree: true,
+      childList: true,
+    };
+    /**
+     * The current method is called when the insert text is update by the Pinyin input or the word correction plugin.
+     *
+     * @param {MutationRecord[]} records - The mutation record object array.
+     */
+    this.updateTextFromDom = (records) => {
+      let updateFlag = false;
+      if (this.insertCompositionTextEndFlag !== false) {
+        records.forEach((record) => {
+          const { target, oldValue } = record;
+          if (target.nodeType === Node.TEXT_NODE && target.parentElement) {
+            const richTextNode = codeBlock.stateEntityRenderingRegistry.getEntityByDOM(target.parentElement);
+            const newValue = target.textContent;
+            if (richTextNode instanceof codeBlock.RTETextNode &&
+              richTextNode.isContentEditable() &&
+              richTextNode.parent instanceof codeBlock.RTETextBlock) {
+              updateFlag = this.updateCurrentNodeText(richTextNode, newValue, oldValue);
+            }
+            else if (newValue) {
+              // The text element should removed if insert text to the image block.
+              target.parentElement.removeChild(target);
+              updateFlag = true;
+            }
+          }
+        });
+      }
+      if (updateFlag) {
+        void this.valueController.flushChanges(this.value);
+      }
+    };
+    /**
+     * Processes mutation records related to character data and updates the text content of a rich text node accordingly.
+     *
+     * @param {MutationRecord[]} records - Each `MutationRecord` object represents a single mutation that occurred in the DOM.
+     */
+    this.handleObserver = (records) => {
+      if (records.every((record) => record.type === 'characterData')) {
+        this.updateTextFromDom(records);
+      }
+    };
+    /**
+     * An event handler function that is triggered when the composition of text input starts. In this case,
+     *  it sets the `insertCompositionTextEndFlag` property of the `UserInputController` class to `false`.
+     */
+    this.handleCompositionStart = () => {
+      this.insertCompositionTextEndFlag = false;
+      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalRichTextEditDeleteSelectedNodes), { host: this.host, detail: true });
+    };
+    /**
+     * An event handler function that is triggered when the composition of text input ends. In this case,
+     *  it sets the `insertCompositionTextEndFlag` property of the `UserInputController` class to `true`.
+     *
+     * @param {CompositionEvent} event The composition event instance
+     */
+    this.handleCompositionEnd = (event) => {
+      this.insertCompositionTextEndFlag = true;
+      const insertData = event.data;
+      if (insertData) {
+        this.dispatchInsertTextEvent(insertData);
+      }
+    };
+  }
+  /**
+   * The function `initMutationObserver` initializes a MutationObserver on an editable HTML element if it exists.
+   */
+  initMutationObserver() {
+    if (this.mutationObserver) {
+      const editableElement = this.getEditableElementRef();
+      if (editableElement) {
+        this.mutationObserver.disconnect();
+        this.mutationObserver.observe(editableElement, this.observerOptions);
+      }
+    }
+  }
+  /**
+   * Disconnects the mutation observer if it exists.
+   */
+  removeObserver() {
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  }
+  /**
+   * The method is to get the composition text insert end or not.
+   *
+   * @returns {boolean} The false is main that insert composition text process is end.
+   */
+  isComposing() {
+    return !this.insertCompositionTextEndFlag;
+  }
+  /**
+   * Adds event listener to an editable HTML element to handle composition text insert actions.
+   */
+  addCompositionTextEventListener() {
+    const editableElement = this.getEditableElementRef();
+    if (editableElement) {
+      editableElement.addEventListener('compositionstart', this.handleCompositionStart);
+      editableElement.addEventListener('compositionend', this.handleCompositionEnd);
+    }
+    this.mutationObserver = new MutationObserver(this.handleObserver);
+    this.initMutationObserver();
+  }
+  /**
+   * Removes event listener to an editable HTML element to handle composition text insert actions.
+   */
+  removeCompositionTextEventListener() {
+    const editableElement = this.getEditableElementRef();
+    if (editableElement) {
+      editableElement.removeEventListener('compositionstart', this.handleCompositionStart);
+      editableElement.removeEventListener('compositionend', this.handleCompositionEnd);
+    }
+    this.removeObserver();
+  }
+  /**
+   * re-connect the observer after the props change and component did render
+   */
+  reConnectObserver() {
+    this.initMutationObserver();
+  }
+  /**
+   * Insert text to a line break node need a special logic if the line break has a next text node.
+   *
+   * @param {RTETextNode} currentNode The current line break node, the text value is \n
+   */
+  appendLineBreakNode(currentNode) {
+    const textBlock = currentNode.parent;
+    const index = textBlock.children.indexOf(currentNode);
+    if (textBlock.children[index + 1]) {
+      const newTextNode = currentNode.cloneWithText('\n');
+      textBlock.apply(new codeBlock.InsertChildrenBeforeAction(textBlock.children[index + 1], newTextNode));
+    }
+  }
+  /**
+   * Updates the text content of a rich text node and handles line breaks.
+   *
+   * @param {RTETextNode} richTextNode - The current rich text node.
+   * @param {string} newValue - The target element textContent
+   * @param {Nullable<string>} oldValue - The target element old textContent
+   * @returns {Nullable<boolean>} The node text is updated or not
+   */
+  updateCurrentNodeText(richTextNode, newValue, oldValue) {
+    const insertText = this.removeZeroWidthSpace(newValue.replace(/(\n)$/, ''));
+    if (richTextNode.text !== insertText) {
+      const { startOffset } = this.selectionController.getCurrentRange();
+      const currentIsLineBreakNode = richTextNode.text === '\n';
+      richTextNode.apply(new codeBlock.UpdateTextAction(insertText));
+      if (currentIsLineBreakNode) {
+        this.appendLineBreakNode(richTextNode);
+      }
+      const lengthGap = oldValue ? oldValue.length - newValue.length : 0;
+      const newOffset = Math.min(insertText.length, startOffset - lengthGap);
+      this.selectionController.enqueueSelectionRangeFutureState(richTextNode, Math.max(0, newOffset));
+      return true;
+    }
+  }
+  /**
+   * The function `getEditableElementRef` returns a reference to the editable HTMLDivElement within a rich text editor.
+   *
+   * @returns {Nullable<HTMLDivElement>} A reference to an HTMLDivElement element that is editable.
+   */
+  getEditableElementRef() {
+    if (!this.editableElementRef) {
+      this.editableElementRef = this.vegaRichTextEditorRenderer.getRTEEditableElementRef();
+    }
+    return this.editableElementRef;
+  }
+  /**
+   * Remove the ZERO_WIDTH_SPACE from the text.
+   *
+   * @param {string} text The input text that could include ZERO_WIDTH_SPACE.
+   * @returns {string} The result text.
+   */
+  removeZeroWidthSpace(text) {
+    if (text.startsWith(codeBlock.ZERO_WIDTH_SPACE)) {
+      return text.slice(codeBlock.ZERO_WIDTH_SPACE.length);
+    }
+    else if (text.endsWith(codeBlock.ZERO_WIDTH_SPACE)) {
+      return text.slice(0, text.length - codeBlock.ZERO_WIDTH_SPACE.length);
+    }
+    return text;
+  }
+  /**
+   * Dispatch a insert text event to handle the composition text insert logic.
+   *
+   * @param {string} text - The text need to insert.
+   */
+  dispatchInsertTextEvent(text) {
+    const inputEvent = new CustomEvent('beforeinput');
+    inputEvent['data'] = text;
+    inputEvent['inputType'] = 'insertText';
+    this.editableElementRef.dispatchEvent(inputEvent);
+  }
+}
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertCompositionTextController.prototype, "selectionController", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertCompositionTextController.prototype, "host", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertCompositionTextController.prototype, "value", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertCompositionTextController.prototype, "valueController", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertCompositionTextController.prototype, "userInputController", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentField()
+], InsertCompositionTextController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], InsertCompositionTextController.prototype, "addCompositionTextEventListener", null);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], InsertCompositionTextController.prototype, "removeCompositionTextEventListener", null);
+__decorate$c([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
+], InsertCompositionTextController.prototype, "reConnectObserver", 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 `DeleteSelectedNodesController` class provides methods to delete selected nodes.
+ */
+class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Deletes the selected nodes.
+     *
+     * @param {NotifyObserverPayload<boolean>} payload The notify payload
+     * @param {boolean} payload.detail The delete process need merge start node and end node or not, default value is true.
+     */
+    this.deleteActionProcess = (payload) => {
+      const range = this.selectionController.getCurrentRange();
+      const { startContainer, endContainer, startOffset, endOffset } = range;
+      if (startContainer !== endContainer || startOffset !== endOffset) {
+        const cursorNode = this.removeSelectionRange();
+        const mergeStartAndEndFlag = payload && payload.detail ? payload.detail : false;
+        if (mergeStartAndEndFlag) {
+          this.mergeRangeStartAndEnd(startContainer, endContainer);
+        }
+        this.selectionController.enqueueSelectionRangeFutureState(cursorNode, range.startOffset);
+      }
+    };
+  }
+  /**
+   * Adds the observer to the host element.
+   */
+  addDeleteObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.host, vegaInternalEventId.VegaInternalRichTextEditDeleteSelectedNodes, this.deleteActionProcess);
+  }
+  /**
+   * Removes the observer from the host element.
+   */
+  removeDeleteObserver() {
+    domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.host, vegaInternalEventId.VegaInternalRichTextEditDeleteSelectedNodes);
+  }
+  /**
+   * Removes selected nodes within a range in a rich text editor content.
+   * The method is only used for different nodes are selected
+   *
+   * @returns {RTENode} The range start node, usually the start node is the first item of selectedNodes, if the selectedNodes is all removed, the start node will be a new text node.
+   */
+  removeSelectionRange() {
+    const range = this.selectionController.getCurrentRange();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const { endOffset, startOffset } = range;
+    const startNode = selectedNodes[0];
+    const endNode = selectedNodes[selectedNodes.length - 1];
+    if (selectedNodes.length > 1) {
+      // Remove all selected nodes except start node and end node(the end image node will be removed), the start node need to get the index of the block
+      const shouldRemovedItems = selectedNodes.filter((item) => {
+        if (item.isContentEditable()) {
+          return item !== startNode && item !== endNode;
+        }
+        else {
+          return (item !== startNode &&
+            (item !== endNode || this.isEndNodeFullyInTheRange(endNode, endOffset, item)));
+        }
+      });
+      shouldRemovedItems.forEach((item) => {
+        item.parent.apply(new codeBlock.RemoveChildrenAction(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.
+     * the code block node should do the same logic.
+     */
+    if (!startNode.isContentEditable() &&
+      this.isStartNodeFullyInTheRange(startNode, endNode, startOffset, endOffset)) {
+      // the image block will be deleted when the image is the only item
+      if (startNode.parent.children.length === 1) {
+        const paragraph = this.createEmptyParagraph();
+        let shouldDeleteBlock = startNode.parent;
+        // if the node grand parent is html block and the html block only has one child, we need insert the paragraph before the html block to jump out the html block
+        if (shouldDeleteBlock.parent &&
+          !(shouldDeleteBlock.parent instanceof dtoRendererManager.VegaRTEContent) &&
+          shouldDeleteBlock.parent.children.length === 1) {
+          shouldDeleteBlock = shouldDeleteBlock.parent;
+        }
+        shouldDeleteBlock.parent.apply(new codeBlock.InsertChildrenBeforeAction(shouldDeleteBlock, paragraph));
+        startNode.parent.apply(new codeBlock.RemoveChildrenAction(startNode));
+        return paragraph.children[0];
+      }
+      else if (startNode === startNode.parent.children[0]) {
+        // the start node should be the next image item if the image is first item
+        startNode.parent.apply(new codeBlock.RemoveChildrenAction(startNode));
+        return startNode.parent.children[0];
+      }
+    }
+    return startNode;
+  }
+  /**
+   * Removes the selected text at the start and end of a range in a Rich Text Editor.
+   */
+  removeRangeStartAndEndSelectedText() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const currentRange = this.selectionController.getCurrentRange();
+    if (selectedNodes[0] instanceof codeBlock.RTETextNode && selectedNodes[0].isContentEditable()) {
+      selectedNodes[0].apply(new ReplaceSelectedTextAction('', currentRange));
+    }
+    const endNode = selectedNodes[selectedNodes.length - 1];
+    if (selectedNodes.length > 1 && endNode instanceof codeBlock.RTETextNode && endNode.isContentEditable()) {
+      selectedNodes[selectedNodes.length - 1].apply(new ReplaceSelectedTextAction('', currentRange));
+    }
+  }
+  /**
+   * Creates a new paragraph with an empty text node and returns it.
+   *
+   * @returns {RTETextBlock} An empty paragraph with a unique identifier and a text node appended to it.
+   */
+  createEmptyParagraph() {
+    const paragraph = new codeBlock.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
+    const textNode = new codeBlock.RTETextNode(`${paragraph.id}1`, '', paragraph);
+    paragraph.apply(new codeBlock.AppendChildrenAction([textNode]));
+    return paragraph;
+  }
+  /**
+   * Merges text nodes in a rich text editor.
+   *
+   * @param {Node} startContainer - Start text node element
+   * @param {Node} endContainer - End text node element
+   */
+  mergeRangeStartAndEnd(startContainer, endContainer) {
+    if (startContainer !== endContainer) {
+      if (startContainer.nodeType === Node.TEXT_NODE && endContainer.nodeType === Node.TEXT_NODE) {
+        const selectedNodes = this.selectionController.getSelectedNodes();
+        const startRTENode = selectedNodes[0];
+        const endRTENode = selectedNodes[selectedNodes.length - 1];
+        if (startRTENode && startRTENode.parent && endRTENode && endRTENode.parent) {
+          const endBlock = endRTENode.parent;
+          if (this.shouldMergeTextNode(startRTENode, endRTENode)) {
+            startRTENode.apply(new codeBlock.UpdateTextAction(startRTENode.text + endRTENode.text));
+            if (startRTENode.parent === endRTENode.parent) {
+              startRTENode.parent.apply(new codeBlock.RemoveChildrenAction(endRTENode));
+            }
+            else {
+              endRTENode.parent.apply(new codeBlock.RemoveChildrenAction(endRTENode.parent.children[0]));
+            }
+          }
+          if (startRTENode instanceof codeBlock.RTETextNode &&
+            endRTENode instanceof codeBlock.RTETextNode &&
+            startRTENode.parent !== endRTENode.parent) {
+            startRTENode.parent.apply(new codeBlock.AppendChildrenAction(endBlock.children));
+            endBlock.children = [];
+          }
+          if (endBlock.children.length < 1) {
+            endBlock.parent.apply(new codeBlock.RemoveChildrenAction(endBlock));
+          }
+        }
+      }
+    }
+  }
+  /**
+   * Compares the annotations of two RTETextNodes to determine if they can be merged.
+   *
+   * @param {RTETextNode} nodeA - node A
+   * @param {RTETextNode} nodeB - node B
+   * @returns {boolean} true or false
+   */
+  shouldMergeTextNode(nodeA, nodeB) {
+    const { annotations: annotationsA } = nodeA.toJSON();
+    const { annotations: annotationsB } = nodeB.toJSON();
+    return (nodeA instanceof codeBlock.RTETextNode &&
+      nodeB instanceof codeBlock.RTETextNode &&
+      JSON.stringify(annotationsA) === JSON.stringify(annotationsB));
+  }
+  /**
+   * Check the decorator node is fully in the range end.
+   *
+   * @param {RTENode} rangeEndNode - The end node of the range
+   * @param {number} endOffset - The end offset of the range
+   * @param {RTENode<RTEBlock>} checkedNode - The checked decorator node
+   * @returns {boolean} - Whether the end node is fully within the range
+   */
+  isEndNodeFullyInTheRange(rangeEndNode, endOffset, checkedNode) {
+    if (checkedNode instanceof codeBlock.RTECodeBlockNode) {
+      return true;
+    }
+    else {
+      return checkedNode === rangeEndNode && endOffset !== 0;
+    }
+  }
+  /**
+   * Check if the start decorator node is fully in the range.
+   *
+   * @param {RTENode<RTEBlock>} rangeStartNode - The start node of the range
+   * @param {RTENode} rangeEndNode - The end node of the range
+   * @param {number} startOffset - The start offset of the range
+   * @param {number} endOffset - The end offset of the range
+   * @returns {boolean} - Whether the start node is fully within the range
+   */
+  isStartNodeFullyInTheRange(rangeStartNode, rangeEndNode, startOffset, endOffset) {
+    if (rangeStartNode instanceof codeBlock.RTECodeBlockNode) {
+      return true;
+    }
+    else {
+      return startOffset === 0 && (rangeEndNode !== rangeStartNode || endOffset !== 0);
+    }
+  }
+}
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], DeleteSelectedNodesController.prototype, "host", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], DeleteSelectedNodesController.prototype, "selectionController", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentField()
+], DeleteSelectedNodesController.prototype, "value", void 0);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], DeleteSelectedNodesController.prototype, "addDeleteObserver", null);
+__decorate$b([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], DeleteSelectedNodesController.prototype, "removeDeleteObserver", null);
+
+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;
+};
+/**
+ * History controller for RTE.
+ */
+class HistoryController extends componentValueHistoryControllerSlimmer_abstract.ComponentValueHistoryControllerSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Gets the effective target elements for the RTE history.
+     *
+     * @returns {HTMLElement[]} - An array of effective target elements.
+     */
+    this.getEffectiveTargets = () => {
+      return [this.vegaRichTextEditorRenderer.getRTEEditableElementRef()];
+    };
+    /**
+     * Gets the ineffective target elements for the RTE history.
+     *
+     * @returns {HTMLElement[]} - An array of ineffective target elements.
+     */
+    this.getIneffectiveTargets = () => {
+      const editorElementRef = this.vegaRichTextEditorRenderer.getRTEEditableElementRef();
+      let result = [];
+      if (editorElementRef) {
+        result = Array.from(editorElementRef.querySelectorAll('.code-block-container'));
+      }
+      return result;
+    };
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]
+   */
+  registerInitState() {
+    if (this.value) {
+      this.registerHistory(new RTEEditorState(this.value, new componentValueHistoryControllerSlimmer_abstract.RTESelectionState(this.selectionController.getCurrentRange())), true);
+    }
+  }
+  /**
+   * Restores the previous state from the undo stack.
+   */
+  async undo() {
+    if (this.undoStack.length > 1) {
+      const clonedState = this.undoStack.pop().clone();
+      this.redoStack.push(clonedState);
+      const prev = this.undoStack[this.undoStack.length - 1];
+      if (prev) {
+        await this.restoreState(prev);
+      }
+    }
+  }
+  /**
+   * Restores the next state from the redo stack.
+   */
+  async redo() {
+    if (this.redoStack.length > 0) {
+      const clonedState = this.redoStack.pop().clone();
+      this.undoStack.push(clonedState);
+      await this.restoreState(clonedState);
+    }
+  }
+  /**
+   * Restores the editor state based on the provided history state.
+   *
+   * @param {RTEEditorState} state - The state to restore to.
+   */
+  async restoreState(state) {
+    const { content, selection } = state.clone();
+    this.selectionController.setSelectionState(selection);
+    await this.valueController.flushChanges(content, false);
+  }
+}
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], HistoryController.prototype, "host", void 0);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], HistoryController.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], HistoryController.prototype, "valueController", void 0);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], HistoryController.prototype, "value", void 0);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentField()
+], HistoryController.prototype, "selectionController", void 0);
+__decorate$a([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], HistoryController.prototype, "registerInitState", null);
+
+const rectangleCode = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill='currentColor' d="M320.1 175L384.1 239C394.3 248.4 394.3 263.6 384.1 272.1L320.1 336.1C311.6 346.3 296.4 346.3 287 336.1C277.7 327.6 277.7 312.4 287 303L334.1 256L287 208.1C277.7 199.6 277.7 184.4 287 175C296.4 165.7 311.6 165.7 320.1 175V175zM177.9 256L224.1 303C234.3 312.4 234.3 327.6 224.1 336.1C215.6 346.3 200.4 346.3 191 336.1L127 272.1C117.7 263.6 117.7 248.4 127 239L191 175C200.4 165.7 215.6 165.7 224.1 175C234.3 184.4 234.3 199.6 224.1 208.1L177.9 256zM448 32C483.3 32 512 60.65 512 96V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V96C0 60.65 28.65 32 64 32H448zM448 80H64C55.16 80 48 87.16 48 96V416C48 424.8 55.16 432 64 432H448C456.8 432 464 424.8 464 416V96C464 87.16 456.8 80 448 80z"/></svg>`,
+};
+
+/**
+ * Transform the selected blocks to a code block.
+ *
+ * @example firstBlock.parent.apply(new TransformToCodeBlockAction(selectedBlocks))
+ */
+class TransformToCodeBlockAction extends codeBlock.ModifyContentAction {
+  constructor(selectedBlocks) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK;
+    this.selectedBlocks = selectedBlocks;
+  }
+}
+
+var __decorate$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;
+};
+/**
+ * The code block toolbar button slimmer.
+ */
+class CodeBlockToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'rectangle-code',
+      tooltip: { text: 'Code Block' },
+    });
+  }
+  /**
+   * The selected blocks should convert to a code block.
+   */
+  onClick() {
+    const selected = this.isSelected();
+    if (!selected) {
+      const selectedBlocks = this.selectionController.getSelectedBlocks();
+      const parentBlock = selectedBlocks[0].parent;
+      const transformToCodeBlockAction = new TransformToCodeBlockAction(selectedBlocks);
+      parentBlock.apply(transformToCodeBlockAction);
+      void this.valueController.flushChanges(this.value);
+      this.selectionController.enqueueSelectionRangeFutureState(transformToCodeBlockAction.newCodeBlock.children[0], 0);
+    }
+  }
+  /**
+   * The button will be selected if the selected blocks all code block.
+   *
+   * @returns {boolean} - The code block should selected or not.
+   */
+  isSelected() {
+    const selectBlocks = this.selectionController.getSelectedBlocks();
+    if (selectBlocks.length && selectBlocks.every((block) => block.type === 'code-block')) {
+      return true;
+    }
+    return false;
+  }
+  isDisabled() {
+    const selectBlocks = this.selectionController.getSelectedBlocks();
+    return (super.isDisabled() ||
+      selectBlocks.some((block) => !(block instanceof codeBlock.RTECodeBlock) && this.shouldDisabledCodeBlockToolbar(block)));
+  }
+  shouldDisabledCodeBlockToolbar(block) {
+    return (block &&
+      !(block instanceof codeBlock.RTETextBlock &&
+        codeBlock.ActionHandleStrategyRegistry.canHandle(codeBlock.ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK, block.parent)));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ 'rectangle-code': rectangleCode });
+})();
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "valueController", void 0);
+__decorate$9([
+  globalSlimmerRegistry.MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "value", void 0);
+
+/**
+ * The rich text internal code block selection controller.
+ */
+class InternalCodeBlockSelectionController extends componentValueHistoryControllerSlimmer_abstract.AutoRunWhenReRenderTaskQueueSlimmer {
+  constructor() {
+    super(1);
+    this.focusNodeOffset = 0;
+    /**
+     * The method invoke after the component re-render.
+     */
+    this.doTask = async () => {
+      await this.focusTheCodeBlock(this.shouldFocusNode);
+    };
+  }
+  /**
+   * Update the internal code block selection.
+   *
+   * @param {RTECodeBlockNode} startNode - The internal code block node DTO.
+   * @param {number} startOffset - The content offset.
+   * @param {boolean} immediatelyRun - Whether to invoke the method immediately.
+   */
+  enqueueSelectionRangeFutureState(startNode, startOffset, immediatelyRun) {
+    this.shouldFocusNode = startNode;
+    this.focusNodeOffset = startOffset;
+    super.enqueueTheTaskIntoQueue(immediatelyRun);
+  }
+  /**
+   * Check the code block is actually selected or not. Because the Code block is a shadow dom, so can't detect the content selected state.
+   * We add two placeholder spans at the begin and end position, we could check the placeholder spans selected state to make sure the code block is selected or not.
+   *
+   *
+   * @example
+   * <div>
+   * <span></span>
+   * <vega-code-block></vega-code-block>
+   * <span><span>
+   * </div>
+   * @param {RTECodeBlock} codeBlock - The code block DTO.
+   * @param {Range} range - The range instance.
+   * @returns {boolean} - The boolean result.
+   */
+  isCodeBlockSelected(codeBlock$1, range) {
+    const codeBlockNode = codeBlock$1.children[0];
+    const entityDom = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(codeBlockNode);
+    return (codeBlock$1.isSelected() ||
+      (entityDom &&
+        range.intersectsNode(entityDom.nextSibling) &&
+        range.intersectsNode(entityDom.previousSibling)));
+  }
+  /**
+   * Focus the code block component.
+   *
+   * @param {RTECodeBlockNode} node - The code block node DTO.
+   */
+  async focusTheCodeBlock(node) {
+    await Promise.resolve();
+    const entityDom = codeBlock.stateEntityRenderingRegistry.getDOMByEntity(node);
+    if (entityDom) {
+      void entityDom.doFocus();
+    }
+  }
+}
+
+const displayCode = {
+  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="M512 48c8.8 0 16 7.2 16 16V352c0 8.8-7.2 16-16 16H336.5c-.3 0-.6 0-.8 0H240.4c-.3 0-.6 0-.8 0H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H512zM64 416H211.7l-8 48H152c-13.3 0-24 10.7-24 24s10.7 24 24 24h72H352h72c13.3 0 24-10.7 24-24s-10.7-24-24-24H372.3l-8-48H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64zm188.3 48l8-48h55.3l8 48H252.3zM249 177c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-48 48c-9.4 9.4-9.4 24.6 0 33.9l48 48c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31 31-31zM361 143c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l48-48c9.4-9.4 9.4-24.6 0-33.9l-48-48z"/></svg>`,
+};
+
+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;
+};
+class SourceEditToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'display-code',
+      tooltip: {
+        text: 'Edit Source',
+      },
+      autoFocusOnClick: false,
+    });
+  }
+  async onClick() {
+    const isSelected = this.sourceView;
+    if (isSelected) {
+      await this.saveSourceCode();
+    }
+    else {
+      this.selectionController.setSelectionRange(new Range());
+    }
+    this.sourceView = !isSelected;
+  }
+  isSelected() {
+    return this.sourceView;
+  }
+  isDisabled() {
+    return super.isDisabled();
+  }
+  async saveSourceCode() {
+    const sourceViewValue = this.vegaRichTextEditorRenderer.getSourceCode();
+    if (typeof sourceViewValue === 'string') {
+      await this.valueController.flushChanges(dtoRendererManager.VegaRTEContent.fromHtml(sourceViewValue, {
+        autoMatchFormat: this.sourceEditConfig.autoMatchFormat,
+      }));
+    }
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ 'display-code': displayCode });
+})();
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], SourceEditToolbarButtonSlimmer.prototype, "sourceView", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "valueController", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "sourceEditConfig", 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;
+};
+/**
+ * Inject the editor context to the extensions.
+ */
+class RTEExtensionController extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    /**
+     * Flush the editor value to the host. Auto focus the last node if autoFocusLastNode is true.
+     *
+     * @param {VegaRTEContent} value - The content value to flush.
+     * @param {boolean} autoFocusLastNode - Whether to auto-focus the last node after flushing.
+     */
+    this.flushValue = (value, autoFocusLastNode = false) => {
+      if (this.host && value) {
+        void this.valueController.flushChanges(value, true);
+        if (autoFocusLastNode) {
+          const lastNode = this.host.value.getLastNode();
+          if (lastNode) {
+            this.selectionController.enqueueSelectionRangeFutureState(lastNode, lastNode.getRangeEndOffset());
+          }
+        }
+      }
+    };
+    /**
+     * Check if the editor is in source edit mode.
+     *
+     * @returns {boolean} - Whether the editor is in source edit mode.
+     */
+    this.isSourceEditMode = () => {
+      return this.sourceView;
+    };
+    /**
+     * Get the currently selected nodes in the editor.
+     *
+     * @returns {RTENode[]} - An array of currently selected RTENode objects.
+     */
+    this.getSelectedNodes = () => {
+      return this.selectionController.getSelectedNodes();
+    };
+  }
+  /**
+   * Initializes the extension context for all registered extensions.
+   * This method is called when the component is connected and whenever the extensions property changes.
+   */
+  initialExtensionContext() {
+    if (this.extensions && this.host) {
+      for (const extension of this.extensions) {
+        extension.initialExtension({
+          host: this.host,
+          flushValue: this.flushValue,
+          isSourceEditMode: this.isSourceEditMode,
+          getSelectedNodes: this.getSelectedNodes,
+        });
+      }
+    }
+  }
+  /**
+   * Update extension context when extensions property changes.
+   *
+   * @param {VegaRTEExtension[]} newValue - New extensions array.
+   * @param {VegaRTEExtension[]} oldValue - Old extensions array.
+   */
+  handleExtensionsChange(newValue, oldValue) {
+    if (!array.isArrayEqual(newValue, oldValue, false, (a, b) => a === b ? 0 : 1)) {
+      this.initialExtensionContext();
+    }
+  }
+}
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], RTEExtensionController.prototype, "extensions", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], RTEExtensionController.prototype, "host", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], RTEExtensionController.prototype, "sourceView", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], RTEExtensionController.prototype, "valueController", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], RTEExtensionController.prototype, "selectionController", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
+], RTEExtensionController.prototype, "initialExtensionContext", null);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentMethod('watchExtensions')
+], RTEExtensionController.prototype, "handleExtensionsChange", 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;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}:host .rich-text-editor-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .rich-text-editor-container:focus-within{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .rich-text-editor-container.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));cursor:not-allowed}:host .rich-text-editor-container.disabled:hover,:host .rich-text-editor-container.disabled:focus-within{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host .rich-text-editor-container.disabled:focus-within{outline:none}:host .rich-text-editor-container.disabled vega-rich-text-content{pointer-events:none;opacity:0.35}:host .rich-text-editor-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .rich-text-editor-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .rich-text-editor-container.error:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}:host .rich-text-editor-container .text-editor-counter{position:absolute;bottom:8px;right:8px;display:flex;padding-left:4px;padding-right:4px;padding-top:2px;padding-bottom:2px;border-radius:4px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));background-color:rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container .text-editor-counter.counter-exceed-max-length{background-color:rgba(var(--v-bg-textarea-counter-exceed-max-length, 214, 46, 81))}.toolbar-btn-group{display:flex;justify-content:center;align-items:center}.toolbar-btn-group>*:not(:first-child):not(:last-child) ::part(rich-text-editor-toolbar-button){border-radius:0px}.toolbar-btn-group>*:first-child:not(:last-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:4px;border-bottom-left-radius:4px;border-top-right-radius:0px;border-bottom-right-radius:0px}.toolbar-btn-group>*:last-child:not(:first-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:4px;border-bottom-right-radius:4px}.toolbar-btn-group>*:not(:first-child) ::part(rich-text-editor-toolbar-button){margin-left:-1px}.toolbar-btn-group .toolbar-btn-color-preview-box{display:flex;border:1px solid rgba(var(--v-border-chip, 205, 209, 211, 1));box-sizing:border-box;border-radius:4px;width:16px;height:16px;justify-content:center;align-items:center;margin-left:6px}.toolbar-btn-group .toolbar-btn-color-preview-box.disabled{opacity:0.35}.toolbar-btn-group .toolbar-btn-link-wrapper{position:relative}.toolbar-btn-group .toolbar-btn-link-wrapper vega-rich-text-link-editor{position:absolute;bottom:0;left:0;right:0}.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;margin-top:12px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-hidden{display:none !important}.source-view-container{margin-top:12px}.source-view-container vega-code-block::part(editor-toolbar){display:none}";
+
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function")
+    r = Reflect.decorate(decorators, target, key, desc);
+  else
+    for (var i = decorators.length - 1; i >= 0; i--)
+      if (d = decorators[i])
+        r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+const VegaRichTextEditor = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
+    this.vegaImageInserted = index.createEvent(this, "vegaImageInserted", 7);
+    this.imageInserted = index.createEvent(this, "imageInserted", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.formFieldController = new formFieldControllerSlimmer.FormFieldControllerSlimmer({
+      propertyRules: [
+        {
+          propertyName: 'required',
+          ruleFactory: (isRequired) => isRequired ? new richTextEditorRequiredRule.RichTextEditorRequiredRule() : null,
+        },
+      ],
+      validationRulesName: 'validationRules',
+      defaultValue: null,
+      attributeGetter: (propertyName) => this[propertyName],
+      inputContainerGetter: () => this.vegaRichTextEditorRenderer.getRichTextContainerRef(),
+      touchableAreaGetter: () => [this.vegaRichTextEditorRenderer.getRichTextContentRef()],
+    });
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditor, domNodeSubjectObserverFactory.VegaChange);
+    this.vegaRichTextEditorRenderer = new VegaRichTextEditorRenderer();
+    this.valueController = new ValueController();
+    this.selectionController = new componentValueHistoryControllerSlimmer_abstract.SelectionController();
+    this.focusController = new FocusController();
+    this.darkModeStateControllerSlimmer = new darkModeStateControllerSlimmer.DarkModeStateControllerSlimmer();
+    this.toolbarRenderer = new ToolbarRenderer();
+    this.clearStyleToolbarButtonSlimmer = new ClearStyleToolbarButtonSlimmer();
+    this.boldToolbarButtonSlimmer = new BoldToolbarButtonSlimmer();
+    this.italicToolbarButtonSlimmer = new ItalicToolbarButtonSlimmer();
+    this.underlineToolbarButtonSlimmer = new UnderlineToolbarButtonSlimmer();
+    this.textColorToolbarButtonSlimmer = new imageAnnotationAction.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.codeBlockToolbarButtonSlimmer = new CodeBlockToolbarButtonSlimmer();
+    this.sourceEditToolbarButtonSlimmer = new SourceEditToolbarButtonSlimmer();
+    this.placeholderNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaRichTextEditor, 'placeholder', 'watchPlaceholder');
+    this.disabledNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaRichTextEditor, 'richTextContentEditable', 'watchRichTextContentEditable');
+    this.richTextContentController = new RichTextContentController(this);
+    this.userInputController = new UserInputController();
+    this.insertImageController = new InsertImageController();
+    this.insertCompositionTextController = new InsertCompositionTextController();
+    this.imageInsertedEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditor, domNodeSubjectObserverFactory.VegaImageInserted);
+    this.changeEventPreventSlimmer = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
+    this.textNodeColorController = new TextNodeColorController();
+    this.deleteSelectedNodesController = new DeleteSelectedNodesController();
+    this.historyController = new HistoryController();
+    this.internalCodeBlockSelectionController = new InternalCodeBlockSelectionController();
+    this.rteExtensionController = new RTEExtensionController();
+    this.richTextContentEditable = true;
+    this.selectionMap = new Map();
+    this.isInDarkMode = darkModeStyleController.VegaInternalThemeManager.isDarkMode();
+    this.sourceView = false;
+    /**
+     * 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 2.34.0
+     */
+    this.label = '';
+    /**
+     * Determines whether the rich text editor field is required.
+     *
+     * @vegaVersion 2.34.0
+     */
+    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 2.34.0
+     */
+    this.placeholder = '';
+    /**
+     * Specifies whether the rich text editor is disabled.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.disabled = false;
+    /**
+     * Provides a supplementary prompt message that assists users in
+     *    understanding the expected value within the rich text editor.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.hint = '';
+    /**
+     * Specifies editable section rows for the rich text editor
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.rows = 4;
+    /**
+     * Specifies the value of the rich text editor, which can be either VegaRTEContent or VegaRTEContentBlock.
+     * It is recommended to use the VegaRTEContent type.
+     * Only in exceptional cases should the original data in the VegaRTEContentBlock type be used.
+     *
+     * @vegaVersion 2.34.0
+     * @defaultValue [{id:'UUID', type:'paragraph', nodes:[{id: 'UUID',type: 'text',text:''}]}]
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.value = dtoRendererManager.VegaRTEContent.createEmptyContent();
+    /**
+     * Specifies the built-in toolbar items available in the rich-text editor.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.toolbarItems = codeBlock.VegaRTEPresetToolbarItems;
+    /**
+     * Determines whether to allow source edit mode in the rich text editor.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.allowSourceEdit = false;
+    /**
+     * Specifies the configuration options for source edit mode.
+     * It includes settings such as autoMatchFormat, which controls whether the editor automatically matches formatting when switching to source edit mode.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.sourceEditConfig = { autoMatchFormat: true };
+    /**
+     * Specifies the validation status of the rich text editor component.
+     *
+     * @vegaVersion 2.34.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.isValid = null;
+    /**
+     * Determines whether automatic validation should be implemented for
+     * the rich text editor.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.autoValidation = true;
+    /**
+     * Defines custom validation rules for the rich text editor.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.validationRules = [];
+    /**
+     * Specifies the configuration for the rich text editor extensions.
+     *
+     * @vegaVersion 2.62.0
+     */
+    this.extensions = [];
+  }
+  watchRichTextContentEditable() {
+  }
+  watchPlaceholder() {
+  }
+  watchDisabled() {
+    this.richTextContentController.syncRichTextContentEditable();
+  }
+  watchValueUpdate() {
+  }
+  watchValidationRules() {
+  }
+  watchExtensions() {
+  }
+  componentWillLoad() {
+    this.richTextContentController.syncRichTextContentEditable();
+  }
+  render() {
+    return component.sanitizeVegaComponent(this.vegaRichTextEditorRenderer.render(), this.host);
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "richTextContentEditable": ["watchRichTextContentEditable"],
+    "placeholder": ["watchPlaceholder"],
+    "disabled": ["watchDisabled"],
+    "value": ["watchValueUpdate"],
+    "validationRules": ["watchValidationRules"],
+    "extensions": ["watchExtensions"]
+  }; }
+};
+__decorate$6([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaRichTextEditor.prototype, "globalSlimmers", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "translationSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "formFieldController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "changeEventEmitter", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "valueController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "selectionController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "focusController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "darkModeStateControllerSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "toolbarRenderer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "clearStyleToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "boldToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "italicToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "underlineToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "textColorToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "textStylesToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "codeToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "strikethroughToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "imageToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "linkToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "moreIndentToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "lessIndentToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "bulletsNumbersToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "sourceEditToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "placeholderNotifySlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "disabledNotifySlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "richTextContentController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "userInputController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "insertImageController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "insertCompositionTextController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "imageInsertedEventEmitter", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "changeEventPreventSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "textNodeColorController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "deleteSelectedNodesController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "historyController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "internalCodeBlockSelectionController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "rteExtensionController", 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 globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.handleClick = (e) => {
+      if (this.disabled) {
+        e.preventDefault();
+      }
+      else {
+        this.clickEventEmitter.emit(undefined, e);
+      }
+    };
+  }
+  render() {
+    return (index.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-hidden': this.hidden,
+        'rich-text-editor-toolbar-button-selected': this.selected,
+      }, onClick: this.handleClick, disabled: this.disabled, hidden: this.hidden },
+      index.h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
+        this.icon && (index.h("vega-icon", { size: "size-16", color: this.iconColor, icon: internalIconManager.VegaInternalIconManager.getIconKey(this.icon) })),
+        this.showArrowIcon && (index.h("vega-icon", { size: "size-8", color: "text-secondary", icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-down') }))),
+      index.h("slot", null)));
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({
+    'chevron-down': chevronDown.chevronDown,
+  });
+})();
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "disabled", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "hidden", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "selected", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "showArrowIcon", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "icon", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "iconColor", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "clickEventEmitter", void 0);
+
+const vegaRichTextEditorToolbarButtonCss = ":host{display:inline-block}:host ::slotted(vega-font.v-font-field-label-sm){line-height:16px}.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));cursor:not-allowed}.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-disabled vega-icon{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-hidden{display:none}";
+
+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) {
+    index.registerInstance(this, hostRef);
+    this.vegaClick = index.createEvent(this, "vegaClick", 7);
+    this.click = index.createEvent(this, "click", 7);
+    this.globalSlimmers = {};
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.clickEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditorToolbarButton, domNodeSubjectObserverFactory.VegaClick);
+    this.eventPrevent = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([domNodeSubjectObserverFactory.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 2.34.0
+     */
+    this.disabled = false;
+    /**
+     * Specifies whether the rich text editor toolbar button element is hidden.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.hidden = false;
+    /**
+     * Specifies whether the rich text editor toolbar button element is selected.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.selected = false;
+    /**
+     * Specifies whether the rich text editor toolbar button element is showArrowIcon.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.showArrowIcon = false;
+    /**
+     * Specifies whether the toolbar button in the rich text editor is represented by an icon.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.icon = '';
+    /**
+     * Specifies the color of the toolbar button icon in the rich text editor.
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.iconColor = 'text-primary';
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate$4([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "globalSlimmers", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "clickEventEmitter", void 0);
+__decorate$4([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditorToolbarButton.prototype, "eventPrevent", void 0);
+__decorate$4([
+  globalSlimmerRegistry.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 globalSlimmerRegistry.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 (index.h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+        this.popoverRef = ref;
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaPopoverShow, () => {
+          this.selected = true;
+          this.notifyImageSelected();
+          void this.formRef.setValue({
+            alt: this.alt,
+          });
+        });
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaPopoverHide, () => {
+          this.currentPage = 1;
+          this.selected = false;
+          void this.formRef.reset();
+        });
+      } },
+      index.h("div", { slot: "popover-content" },
+        index.h("slot", null)),
+      index.h("div", { slot: "popover" },
+        this.renderImageEditor(),
+        this.renderAltTextEditor())));
+  }
+  findParentContainerRef() {
+    this.parentContainerRef = ui.findParent(this.host, 'vega-rich-text-content');
+  }
+  renderImageEditor() {
+    return (index.h("vega-box", { display: this.currentPage === 1 ? 'block' : 'none' },
+      index.h("vega-flex", { gap: "size-12", alignItems: "center" },
+        index.h("vega-font", { variant: "font-field-label-sm", color: "text-primary" },
+          this.translationSlimmer.t('Size'),
+          ":"),
+        index.h("vega-segment-control", { size: "small", segments: [
+            { key: 'sm', text: this.translationSlimmer.t('Sm') },
+            { key: 'md', text: this.translationSlimmer.t('Md') },
+            { key: 'lg', text: this.translationSlimmer.t('Lg') },
+          ], selected: this.size, ref: (ref) => {
+            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaChange, (e) => {
+              // The below line is covered in `history.spec#should register history, and undo/redo for image size change`
+              // Prevent handling vegaChange triggered by DOM ref reuse (e.g., undo/redo) when the image editor is not visible.
+              if (!this.selected)
+                return;
+              const size = e.detail;
+              this.size = size;
+              this.changeEventEmitter.emit({
+                action: 'edit',
+                payload: { size: size, alt: this.alt },
+              });
+            });
+          } }),
+        index.h("vega-button-group", { variant: "tertiary", size: "small", ref: (ref) => {
+            domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaClick, (payload) => {
+              if (payload.detail === 'Alt Text') {
+                this.currentPage = 2;
+              }
+              else {
+                this.notifyImageDeleteButtonClicked();
+                this.changeEventEmitter.emit({ action: 'delete' });
+                void this.popoverRef.hide();
+              }
+            });
+          } },
+          index.h("vega-button-group-item", { label: this.translationSlimmer.t('Alt Text'), itemKey: "Alt Text" }),
+          index.h("vega-button-group-item", { label: this.translationSlimmer.t('Delete Image'), icon: internalIconManager.VegaInternalIconManager.getIconKey('trash-can'), iconOnly: true, itemKey: "trash-can" })))));
+  }
+  renderAltTextEditor() {
+    return (index.h("vega-box", { display: this.currentPage === 2 ? 'block' : 'none' },
+      index.h("vega-form", { ref: (ref) => (this.formRef = ref) },
+        index.h("vega-input", { "data-vega-form": "alt", style: { width: '315px' }, label: this.translationSlimmer.t('Alt Text'), ref: (ref) => {
+            void ref.doFocus();
+          }, onKeyDown: this.handleKeyDown }))));
+  }
+  notifyImageSelected() {
+    if (this.parentContainerRef) {
+      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.parentContainerRef, vegaInternalEventId.VegaInternalRichTextImageClick), { host: this.host });
+    }
+  }
+  /*
+   * The below method is e2e-test covered in
+   * {module:vega-rich-text-editor-image-click-delete-button}
+   */
+  /* istanbul ignore next */
+  notifyImageDeleteButtonClicked() {
+    if (this.parentContainerRef) {
+      changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.parentContainerRef, vegaInternalEventId.VegaInternalRichTextImageDeleteButtonClicked), { host: this.host });
+    }
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ 'trash-can': trashCan.trashCan });
+})();
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaRichTextImageEditorRenderer.prototype, "currentPage", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaRichTextImageEditorRenderer.prototype, "selected", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "host", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "alt", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaRichTextImageEditorRenderer.prototype, "size", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "changeEventEmitter", void 0);
+__decorate$3([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextImageEditorRenderer.prototype, "translationSlimmer", void 0);
+__decorate$3([
+  globalSlimmerRegistry.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) {
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaRichTextImageEditorRenderer();
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextImageEditor, domNodeSubjectObserverFactory.VegaChange);
+    this.currentPage = 1;
+    this.selected = false;
+    /**
+     * Specifies the value of image alt
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.alt = '';
+    /**
+     * Specifies the size of the image to the container
+     *
+     * @vegaVersion 2.34.0
+     */
+    /* eslint-disable-next-line @stencil/strict-mutable */
+    this.size = 'md';
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, { class: { 'rte-image-selected': this.selected } }, this.renderer.render()), this.host);
+  }
+  get host() { return index.getElement(this); }
+};
+__decorate$2([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaRichTextImageEditor.prototype, "globalSlimmers", void 0);
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "translationSlimmer", void 0);
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate$2([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextImageEditor.prototype, "renderer", void 0);
+__decorate$2([
+  globalSlimmerRegistry.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 globalSlimmerRegistry.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();
+          }
+        });
+      }
+    };
+  }
+  /**
+   * Component lifecycle - [componentDidLoad]{@link VegaRichTextLinkEditor.componentDidLoad}
+   */
+  componentDidLoad() {
+    this.updatePopoverTarget();
+  }
+  /**
+   * Component lifecycle - [componentDidRender]{@link VegaRichTextLinkEditor.componentDidRender}
+   */
+  componentDidRender() {
+    changeManager.ChangeManager.notify(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.host, vegaInternalEventId.VegaInternalComponentDidRender), {});
+  }
+  watchStatusChange() {
+    if (this.status === 'linkEdit') {
+      setTimeout(() => {
+        void this.urlInputRef.doFocus();
+      });
+    }
+  }
+  watchTargetChange() {
+    this.updatePopoverTarget();
+  }
+  getPopoverRef() {
+    return this.popoverRef;
+  }
+  render() {
+    return (index.h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+        this.popoverRef = ref;
+        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.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.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, domNodeSubjectObserverFactory.VegaPopoverHide, () => {
+          void this.formRef.reset();
+          if (this.resetStatusAfterHide) {
+            this.status = 'editOrUnlinkSelection';
+          }
+        });
+      } },
+      index.h("span", { slot: "popover-content" },
+        index.h("slot", null)),
+      index.h("div", { slot: "popover" },
+        this.renderLinkUnlinkContent(),
+        this.renderLinkEditContent())));
+  }
+  renderLinkUnlinkContent() {
+    return (index.h("vega-box", { display: this.status === 'editOrUnlinkSelection' ? 'block' : 'none' },
+      index.h("vega-button-group", { size: "small", variant: "tertiary", ref: (node) => {
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(node, domNodeSubjectObserverFactory.VegaClick, ({ detail }) => {
+            switch (detail) {
+              case 'edit': {
+                this.status = 'linkEdit';
+                return;
+              }
+              case 'unlink': {
+                this.changeEventEmitter.emit({ action: 'unlink' });
+                void this.popoverRef.hide();
+              }
+            }
+          });
+        } },
+        index.h("vega-button-group-item", { label: this.translationSlimmer.t('Edit'), itemKey: "edit" }),
+        index.h("vega-button-group-item", { label: this.translationSlimmer.t('Unlink'), itemKey: "unlink" }))));
+  }
+  renderLinkEditContent() {
+    return (index.h("vega-box", { display: this.status === 'linkEdit' ? 'block' : 'none' },
+      index.h("vega-form", { ref: (ref) => (this.formRef = ref) },
+        index.h("vega-flex", { style: { width: '419px' }, direction: "col", gap: "size-16" },
+          index.h("vega-input", { "data-vega-form": "url", ref: (ref) => {
+              this.urlInputRef = ref;
+            }, size: "small", label: this.translationSlimmer.t('URL'), onKeyDown: this.handleKeyDown }),
+          index.h("vega-input", { size: "small", label: this.translationSlimmer.t('Text'), "data-vega-form": "text", onKeyDown: this.handleKeyDown })))));
+  }
+  updatePopoverTarget() {
+    remoteInvocationRegistry.remoteInvocationRegistry.call(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.popoverRef, vegaInternalEventId.VegaInternalPopoverUpdateTarget), this.target);
+  }
+}
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "host", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaRichTextLinkEditorRenderer.prototype, "status", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], VegaRichTextLinkEditorRenderer.prototype, "record", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "changeEventEmitter", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "resetStatusAfterHide", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "translationSlimmer", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextLinkEditorRenderer.prototype, "target", void 0);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
+], VegaRichTextLinkEditorRenderer.prototype, "componentDidLoad", null);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
+], VegaRichTextLinkEditorRenderer.prototype, "componentDidRender", null);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('watchStatusChange')
+], VegaRichTextLinkEditorRenderer.prototype, "watchStatusChange", null);
+__decorate$1([
+  globalSlimmerRegistry.MapToComponentMethod('watchTargetChange')
+], VegaRichTextLinkEditorRenderer.prototype, "watchTargetChange", null);
+
+const vegaRichTextLinkEditorCss = ":host{display:contents}: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) {
+    index.registerInstance(this, hostRef);
+    this.vegaChange = index.createEvent(this, "vegaChange", 7);
+    this.change = index.createEvent(this, "change", 7);
+    this.globalSlimmers = {};
+    this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
+    this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
+    this.renderer = new VegaRichTextLinkEditorRenderer();
+    this.changeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextLinkEditor, domNodeSubjectObserverFactory.VegaChange);
+    /**
+     * Specifies the status of the link editor
+     *
+     * @vegaVersion 2.34.0
+     */
+    // eslint-disable-next-line @stencil/strict-mutable
+    this.status = 'editOrUnlinkSelection';
+    /**
+     * Specifies whether the status will be reset after hide the popover
+     *
+     * @vegaVersion 2.34.0
+     */
+    this.resetStatusAfterHide = true;
+  }
+  watchStatusChange() {
+  }
+  watchTargetChange() {
+  }
+  /**
+   * Provide a method to show the link editor popover
+   *
+   * @vegaVersion 2.34.0
+   */
+  async show() {
+    await this.renderer.getPopoverRef().show();
+  }
+  render() {
+    return component.sanitizeVegaComponent(index.h(index.Host, null, this.renderer.render()), this.host);
+  }
+  get host() { return index.getElement(this); }
+  static get watchers() { return {
+    "status": ["watchStatusChange"],
+    "target": ["watchTargetChange"]
+  }; }
+};
+__decorate([
+  componentUsageRuntimeMetrics.InjectVegaGlobalSlimmer()
+], VegaRichTextLinkEditor.prototype, "globalSlimmers", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "translationSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "renderer", void 0);
+__decorate([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextLinkEditor.prototype, "changeEventEmitter", void 0);
+VegaRichTextLinkEditor.style = vegaRichTextLinkEditorCss;
+
+exports.vega_rich_text_editor = VegaRichTextEditor;
+exports.vega_rich_text_editor_toolbar_button = VegaRichTextEditorToolbarButton;
+exports.vega_rich_text_image_editor = VegaRichTextImageEditor;
+exports.vega_rich_text_link_editor = VegaRichTextLinkEditor;