@heartlandone/vega 2.49.1 → 2.50.0-RTE-preview

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

@@ -1,59 +1,170 @@
-import { h, H as Host, F as Fragment, r as registerInstance, c as createEvent, g as getElement } from './index-187f71d1.js';
-import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer, L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
+import { h, H as Host, F as Fragment, r as registerInstance, c as createEvent, g as getElement } from './index-d0a47531.js';
+import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-385c7124.js';
-import { g as getActiveElement, s as sanitizeVegaComponent } from './component-cae24190.js';
+import { s as sanitizeVegaComponent } from './component-cae24190.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { d as domNodeSubjectFactory, b as VegaDropdownClick, f as VegaChange, P as VegaImageInserted, a as VegaClick, M as VegaPopoverShow, N as VegaPopoverHide } from './dom-node-subject-factory-f77cf9cc.js';
-import { V as VegaInternalComponentDidRender, b as VegaInternalRichTextEditorSelectionRangeChange, a as VegaInternalRichTextEditorFlushChanges, u as VegaInternalRichTextEditDeleteSelectedNodes, v as VegaInternalRichTextImageClick, w as VegaInternalRichTextImageDeleteButtonClicked, q as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-85ad403f.js';
-import { b as ToolbarButtonSlimmer, I as ImageAnnotationAction, T as TextNodeRenderingRegistry, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-1aa938ab.js';
+import { d as domNodeSubjectFactory, b as VegaDropdownClick, f as VegaChange, P as VegaImageInserted, a as VegaClick, M as VegaPopoverShow, N as VegaPopoverHide } from './dom-node-subject-factory-eb6bba5d.js';
+import { V as VegaInternalComponentDidRender, a as VegaInternalRichTextEditorFlushChanges, v as VegaInternalRichTextEditDeleteSelectedNodes, w as VegaInternalRichTextImageClick, x as VegaInternalRichTextImageDeleteButtonClicked, r as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-820393ad.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-58cf8aa6.js';
-import { f as RTETextNode, l as BoldAnnotationAction, h as NodeAnnotationTypeEnum, T as TextSplittableAction, m as ItalicAnnotation, U as UnderlineAnnotation, R as RTETextBlock, n as TextStyleAnnotationAction, o as TextStyleAnnotation, p as BoldAnnotation, q as BlockAnnotationTypeEnum, C as ClearFormattingAnnotationAction, r as CodeAnnotationAction, S as StrikethroughAnnotation, A as AnnotationAction, t as SelectionRangeAnnotation, L as LinkAnnotationAction, u as IndentAnnotation, e as RTEImageNode, M as ModifyContentAction, v as ModifyContentActionType, b as RTEListItemBlock, H as HorizontalAlignmentAnnotation, g as RTENode, s as stateEntityRenderingRegistry, Z as ZERO_WIDTH_SPACE, I as InternalAnnotationTypeEnum, V as VegaRTEContent, w as AppendChildNodesAction, x as UpdateTextAction, y as MergeTwoBlocksNodesAction, z as SplitBlockWithNodeAction, D as BreakSingleBlockAction, E as RemoveChildAction, F as ReplaceChildNodesAction, G as InsertBlocksBeforeAction, k as RTE_TEXT_COLORS, c as RTEListBlock, a as RTEImageBlock, J as InsertBlocksAfterAction } from './content-state-dbc9f635.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-715dccf9.js';
+import { g as RTETextNode, Y as BoldAnnotationAction, N as NodeAnnotationTypeEnum, V as RTECodeBlockNode, _ as ItalicAnnotationAction, $ as UnderlineAnnotationAction, d as RTETextBlock, a0 as TextStyleAnnotationAction, a1 as TextStyleAnnotation, a2 as BoldAnnotation, w as BlockAnnotationTypeEnum, a3 as ClearFormattingAnnotationAction, a4 as CodeAnnotationAction, a5 as StrikethroughAnnotationAction, P as SelectionChangeAction, L as LinkAnnotationAction, a as RTEImageNode, a6 as IndentAnnotationAction, M as ModifyContentAction, f as ModifyContentActionType, H as HorizontalAlignmentAnnotationAction, c as AppendChildNodesAction, Z as ZERO_WIDTH_SPACE, a7 as UpdateTextAction, a8 as MergeTwoBlocksNodesAction, S as SplitBlockWithNodeAction, R as RemoveChildAction, b as ReplaceChildNodesAction, e as InsertBlocksBeforeAction, I as InsertBlocksAfterAction, z as RTECodeBlock, F as stateEntityRenderingRegistry } from './code-block-8b5bd928.js';
+import { V as VisualModeToolbarButtonSlimmer, I as ImageAnnotationAction, T as TextNodeRenderingRegistry, b as ToolbarButtonSlimmer, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-a8b860ad.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-6083d518.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-8ada793f.js';
-import { a as waitForComponentDidRender } from './index-4aa167d6.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-89a72ee7.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-b7d511f6.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-4e3cf09d.js';
-import { d as debounce } from './timer-9321173b.js';
-import { S as SynchronizeTaskQueue } from './synchronize-task-queue-ac8acc3b.js';
-import { O as Observer } from './observer-3959f9dd.js';
-import { f as findParent, r as rgbToHex } from './ui-ed1283bb.js';
+import { a as waitForComponentDidRender } from './index-db0ec3ee.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-bfb4034d.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-480d3b54.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-04e06501.js';
+import { a as RTEListItemBlock, V as VegaRTEContent, B as BreakSingleBlockAction, E as ElementToDtoStrategyProcessor, R as RTEImageBlock } from './content-state-8c3f862b.js';
+import { R as RTESelectionState, A as AutoRunWhenReRenderTaskQueueSlimmer, b as SelectionController } from './selection-controller-dd4f4407.js';
 import { b as FORM_ELEMENT_VALUE_CHANGE, D as DARK_MODE_CHANGE } from './static-subject-title-ca83d6b6.js';
+import { O as Observer } from './observer-3959f9dd.js';
+import { d as debounce } from './timer-9321173b.js';
 import { D as DarkModeStateControllerSlimmer } from './dark-mode-state-controller-slimmer-f1c2c299.js';
-import { i as isNonNullable } from './type-guard-158f6d7a.js';
-import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-6a7cd3ee.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-5d45361e.js';
-import { T as TranslationSlimmer } from './translation-slimmer-88966d5c.js';
+import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-0d470d82.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-1142fb79.js';
+import { T as TranslationSlimmer } from './translation-slimmer-e6b130bf.js';
 import { V as VegaInternalThemeManager } from './dark-mode-style-controller-2ada8e22.js';
 import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-42bf9773.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
 import { t as trashCan } from './trash-can-8819a939.js';
+import { f as findParent } from './ui-ed1283bb.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
 import './icon-manager-638dd4d4.js';
+import './type-guard-158f6d7a.js';
+import './breakpoints-d9faf11c.js';
+import './ui-8424715a.js';
+import './regex-dfe11abf.js';
+import './typography-396de03f.js';
+import './string-a953eafc.js';
 import './dynamic-slimmer-90b8af32.js';
 import './wait-for-vega-handler-b18eb955.js';
-import './string-be824360.js';
-import './translation-cf7f020a.js';
+import './translation-71e0711d.js';
 import './page-resize-observer-slimmer-15a84d26.js';
-import './ui-8424715a.js';
-import './breakpoints-d9faf11c.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import './mutation-observer-slimmer-6cef9549.js';
 import './mutation-observer-filters-1a054fb0.js';
 import './array-7888f339.js';
 import './number-4398f2e1.js';
-import './sub-state-observer-slimmer-be7a6ce3.js';
-import './internal-vega-event-manager-87dc436c.js';
-import './regex-dfe11abf.js';
-import './typography-396de03f.js';
+import './sub-state-observer-slimmer-b4c2ddc3.js';
+import './internal-vega-event-manager-56c6469a.js';
+import './synchronize-task-queue-ac8acc3b.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-0fbe8fb0.js';
 import './index-44c794b4.js';
 import './_commonjsHelpers-9943807e.js';
 import './keyboard-manager-262be5ce.js';
 
-var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+/**
+ * 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.trim().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',
+]);
+const CodeFormatter$1 = new CodeFormatter();
+
+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;
@@ -69,6 +180,7 @@ class VegaRichTextEditorRenderer extends VegaSlimmer {
       return (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: createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
         h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value }),
         this.renderCharacterCounter()));
@@ -87,6 +199,16 @@ class VegaRichTextEditorRenderer extends VegaSlimmer {
     this.richTextContentFocus = () => {
       void this.richTextContentRef.vegaFocus();
     };
+    this.renderSourceViewContent = () => {
+      if (this.toolbarItems && !this.toolbarItems.flat().includes('sourceEdit'))
+        return;
+      const sourceViewValue = this.value.toHtml();
+      return (h("div", { class: {
+          'source-view-container': true,
+          'vega-hidden': !this.sourceView,
+        } },
+        h("vega-code-block", { ref: (ref) => (this.sourceCodeBlockRef = ref), disabled: this.disabled, value: { language: 'html', code: CodeFormatter$1.format(sourceViewValue) } })));
+    };
   }
   /**
    * Component lifecycle - [componentDidRender]{@link VegaRichTextEditor.componentDidRender}
@@ -105,7 +227,7 @@ class VegaRichTextEditorRenderer extends VegaSlimmer {
   /**
    * Returns the HTMLElement reference of the rich text content area.
    *
-   * @returns {HTMLVegaRichTextContentElement} An HTMLVegaRichTextContentElement is being returned.
+   * @returns {Nullable<HTMLVegaRichTextContentElement>} An HTMLVegaRichTextContentElement is being returned.
    */
   getRichTextContentRef() {
     return this.richTextContentRef;
@@ -128,6 +250,11 @@ class VegaRichTextEditorRenderer extends VegaSlimmer {
       return this.richTextContentRef.shadowRoot.querySelector('.rich-text-content');
     }
   }
+  getSourceCode() {
+    if (this.sourceCodeBlockRef) {
+      return this.sourceCodeBlockRef.value.code;
+    }
+  }
   render() {
     return h(Host, null, this.renderRichTextEditor());
   }
@@ -136,45 +263,56 @@ class VegaRichTextEditorRenderer extends VegaSlimmer {
       this.renderLabel(),
       this.hint && this.renderHintMessage(),
       this.toolbarRenderer.render(),
-      this.renderTextContent(),
+      this.renderContent(),
       this.renderErrorMessage()));
   }
   renderLabel() {
     return (this.label && (h("vega-field-label", { onClick: this.richTextContentFocus, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
   }
+  renderContent() {
+    return (h(Fragment, null,
+      this.renderTextContent(),
+      this.renderSourceViewContent()));
+  }
 }
-__decorate$A([
+__decorate$B([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "host", void 0);
-__decorate$A([
+__decorate$B([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "toolbarRenderer", void 0);
-__decorate$A([
+__decorate$B([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "label", void 0);
-__decorate$A([
+__decorate$B([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "required", void 0);
-__decorate$A([
+__decorate$B([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "hint", void 0);
-__decorate$A([
+__decorate$B([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "disabled", void 0);
-__decorate$A([
+__decorate$B([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "rows", void 0);
-__decorate$A([
+__decorate$B([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "placeholder", void 0);
-__decorate$A([
+__decorate$B([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "value", void 0);
-__decorate$A([
+__decorate$B([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "sourceView", void 0);
+__decorate$B([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "toolbarItems", void 0);
+__decorate$B([
   MapToComponentMethod('componentDidRender')
 ], VegaRichTextEditorRenderer.prototype, "componentDidRender", null);
 
-var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -213,6 +351,10 @@ class ToolbarRenderer extends VegaSlimmer {
           return this.bulletsNumbersToolbarButtonSlimmer;
         case 'horizontalAlignment':
           return this.horizontalAlignmentToolbarButtonSlimmer;
+        case 'codeBlock':
+          return this.codeBlockToolbarButtonSlimmer;
+        case 'sourceEdit':
+          return this.sourceEditToolbarButtonSlimmer;
       }
     };
   }
@@ -224,63 +366,69 @@ class ToolbarRenderer extends VegaSlimmer {
     })));
   }
 }
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "toolbarItems", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "clearStyleToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "boldToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "textStylesToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "italicToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "underlineToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "textColorToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "bulletsNumbersToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "strikethroughToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "imageToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "moreIndentToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "lessIndentToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "codeToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);
+__decorate$A([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate$A([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "sourceEditToolbarButtonSlimmer", 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$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class BoldToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'bold',
@@ -308,7 +456,8 @@ class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }
@@ -316,7 +465,7 @@ class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ bold });
 })();
-__decorate$y([
+__decorate$z([
   MapToComponentField()
 ], BoldToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -324,32 +473,13 @@ const italic = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z"/></svg>`,
 };
 
-/**
- * Action to toggle the italic annotation
- */
-class ItalicAnnotationAction extends TextSplittableAction {
-  constructor(italic) {
-    super();
-    this.isFlushable = true;
-    this.italic = italic;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {ItalicAnnotation} The annotation
-   */
-  toAnnotation() {
-    return new ItalicAnnotation(this.italic);
-  }
-}
-
-var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class ItalicToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class ItalicToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'italic',
@@ -375,7 +505,8 @@ class ItalicToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }
@@ -383,7 +514,7 @@ class ItalicToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ italic });
 })();
-__decorate$x([
+__decorate$y([
   MapToComponentField()
 ], ItalicToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -391,32 +522,13 @@ const underline = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M16 64c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H128V224c0 53 43 96 96 96s96-43 96-96V96H304c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H384V224c0 88.4-71.6 160-160 160s-160-71.6-160-160V96H48C30.3 96 16 81.7 16 64zM0 448c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32z"/></svg>`,
 };
 
-/**
- * Action to toggle the underline annotation
- */
-class UnderlineAnnotationAction extends TextSplittableAction {
-  constructor(underline) {
-    super();
-    this.isFlushable = true;
-    this.underline = underline;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {Annotation} the annotation
-   */
-  toAnnotation() {
-    return new UnderlineAnnotation(this.underline);
-  }
-}
-
-var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class UnderlineToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class UnderlineToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'underline',
@@ -445,7 +557,8 @@ class UnderlineToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }
@@ -453,7 +566,7 @@ class UnderlineToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ underline });
 })();
-__decorate$w([
+__decorate$x([
   MapToComponentField()
 ], UnderlineToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -461,13 +574,13 @@ 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$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class TextStylesToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'text-size',
@@ -509,7 +622,7 @@ class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
       const boldAnnotation = new BoldAnnotation(item.bold);
       return (h("vega-dropdown-item", { key: item.key, itemKey: item.key },
         h("vega-box", { padding: { right: 'size-20' } },
-          h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.render()), boldAnnotation.render()) }, this.translationSlimmer.t(item.label)))));
+          h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.renderStyle({ standalone: true })), boldAnnotation.renderStyle({ standalone: true })) }, this.translationSlimmer.t(item.label)))));
     })));
   }
   isSelected() {
@@ -518,7 +631,8 @@ class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
+      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
   addDropdownObserver(dropdownRef) {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, this.handleDropdownItemClick);
@@ -571,10 +685,10 @@ TextStylesToolbarButtonSlimmer.items = [
     label: 'Paragraph',
   },
 ];
-__decorate$v([
+__decorate$w([
   MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$v([
+__decorate$w([
   MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "focusController", void 0);
 
@@ -582,13 +696,13 @@ 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$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class ClearStyleToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class ClearStyleToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'text-slash',
@@ -611,7 +725,8 @@ class ClearStyleToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
+      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
 }
 (() => {
@@ -619,7 +734,7 @@ class ClearStyleToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'text-slash': TextSlash,
   });
 })();
-__decorate$u([
+__decorate$v([
   MapToComponentField()
 ], ClearStyleToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -627,13 +742,13 @@ 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$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class CodeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class CodeToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'code-simple',
@@ -658,14 +773,15 @@ class CodeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
+      selectedNodes.some((node) => node instanceof RTECodeBlockNode ||
+        node.getAnnotationByType(NodeAnnotationTypeEnum.LINK) ||
         node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE)));
   }
 }
 (() => {
   VegaInternalIconManager.register({ 'code-simple': codeSimple });
 })();
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], CodeToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -673,32 +789,13 @@ const strikethrough = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M332.2 319.9c17.22 12.17 22.33 26.51 18.61 48.21c-3.031 17.59-10.88 29.34-24.72 36.99c-35.44 19.75-108.5 11.96-186-19.68c-16.34-6.686-35.03 1.156-41.72 17.53s1.188 35.05 17.53 41.71c31.75 12.93 95.69 35.37 157.6 35.37c29.62 0 58.81-5.156 83.72-18.96c30.81-17.09 50.44-45.46 56.72-82.11c3.998-23.27 2.168-42.58-3.488-59.05H332.2zM488 239.9l-176.5-.0309c-15.85-5.613-31.83-10.34-46.7-14.62c-85.47-24.62-110.9-39.05-103.7-81.33c2.5-14.53 10.16-25.96 22.72-34.03c20.47-13.15 64.06-23.84 155.4 .3438c17.09 4.531 34.59-5.654 39.13-22.74c4.531-17.09-5.656-34.59-22.75-39.12c-91.31-24.18-160.7-21.62-206.3 7.654C121.8 73.72 103.6 101.1 98.09 133.1C89.26 184.5 107.9 217.3 137.2 239.9L24 239.9c-13.25 0-24 10.75-24 23.1c0 13.25 10.75 23.1 24 23.1h464c13.25 0 24-10.75 24-23.1C512 250.7 501.3 239.9 488 239.9z"/></svg>`,
 };
 
-/**
- * Action to toggle the strikethrough annotation
- */
-class StrikethroughAnnotationAction extends TextSplittableAction {
-  constructor(underline) {
-    super();
-    this.isFlushable = true;
-    this.strikethrough = underline;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {Annotation} the annotation
-   */
-  toAnnotation() {
-    return new StrikethroughAnnotation(this.strikethrough);
-  }
-}
-
-var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class StrikethroughToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class StrikethroughToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'strikethrough',
@@ -727,7 +824,8 @@ class StrikethroughToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return (super.isDisabled() ||
       selectedNodes.some((node) => {
         var _a;
-        return ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
+        return node instanceof RTECodeBlockNode ||
+          ((_a = node.getAnnotationByType(NodeAnnotationTypeEnum.CODE)) === null || _a === void 0 ? void 0 : _a.code) ||
           node.getAnnotationByType(NodeAnnotationTypeEnum.IMAGE);
       }));
   }
@@ -735,7 +833,7 @@ class StrikethroughToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ strikethrough });
 })();
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], StrikethroughToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -743,32 +841,13 @@ const link = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M562.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L405.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C189.5 251.2 196 330 246 380c56.5 56.5 148 56.5 204.5 0L562.8 267.7zM43.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C57 372 57 321 88.5 289.5L200.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C416.5 260.8 410 182 360 132c-56.5-56.5-148-56.5-204.5 0L43.2 244.3z"/></svg>`,
 };
 
-/**
- * Action to change the selection range
- */
-class SelectionChangeAction extends AnnotationAction {
-  constructor(range) {
-    super();
-    this.isFlushable = false;
-    this.range = range;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {SelectionRangeAnnotation} The annotation
-   */
-  toAnnotation() {
-    return new SelectionRangeAnnotation(this.range);
-  }
-}
-
-var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class LinkToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'link',
@@ -844,7 +923,7 @@ class LinkToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ link: link });
 })();
-__decorate$r([
+__decorate$s([
   MapToComponentField()
 ], LinkToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -852,32 +931,13 @@ const indent = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M0 64C0 46.3 14.3 32 32 32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64zM192 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32zm32 96H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zM0 448c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM127.8 268.6L25.8 347.9C15.3 356.1 0 348.6 0 335.3V176.7c0-13.3 15.3-20.8 25.8-12.6l101.9 79.3c8.2 6.4 8.2 18.9 0 25.3z"/></svg>`,
 };
 
-/**
- * Action to toggle block indent annotation
- */
-class IndentAnnotationAction extends AnnotationAction {
-  constructor(indent) {
-    super();
-    this.isFlushable = true;
-    this.indent = indent;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {Annotation} The annotation
-   */
-  toAnnotation() {
-    return new IndentAnnotation(this.indent);
-  }
-}
-
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class MoreIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class MoreIndentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'indent',
@@ -893,7 +953,7 @@ class MoreIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => node.type === 'list-item') ||
+      selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
       selectedNodes.some((node) => node instanceof RTEImageNode));
   }
   onClick() {
@@ -907,7 +967,7 @@ class MoreIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ indent: indent });
 })();
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], MoreIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -915,13 +975,13 @@ 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$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class LessIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class LessIndentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'outdent',
@@ -937,7 +997,7 @@ class LessIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedBlocks.some((node) => node.type === 'list-item') ||
+      selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
       selectedNodes.some((node) => node instanceof RTEImageNode));
   }
   onClick() {
@@ -952,7 +1012,7 @@ class LessIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ outdent: outdent });
 })();
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], LessIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -973,13 +1033,13 @@ class ImageUpdateUrlAction extends ModifyContentAction {
   }
 }
 
-var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class ImageToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'image',
@@ -1031,13 +1091,13 @@ class ImageToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ image: image });
 })();
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "insertImageController", void 0);
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "imageInsertedEventEmitter", void 0);
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -1074,13 +1134,13 @@ class TransformParagraphAction extends ModifyContentAction {
   }
 }
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class BulletsToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ul',
@@ -1104,7 +1164,8 @@ class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof RTEImageNode || node instanceof RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'bullet-list') {
     return (selectedBlocks.length > 0 &&
@@ -1132,20 +1193,20 @@ class BulletsToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     }
   }
 }
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], BulletsToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], BulletsToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class NumbersToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ol',
@@ -1167,7 +1228,8 @@ class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof RTEImageNode || node instanceof RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'number-list') {
     return (selectedBlocks.length > 0 &&
@@ -1195,20 +1257,20 @@ class NumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     }
   }
 }
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], NumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], NumbersToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ul',
@@ -1242,7 +1304,8 @@ class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
-    return super.isDisabled() || selectedNodes.some((node) => node instanceof RTEImageNode);
+    return (super.isDisabled() ||
+      selectedNodes.some((node) => node instanceof RTEImageNode || node instanceof RTECodeBlockNode));
   }
 }
 (() => {
@@ -1251,49 +1314,30 @@ class BulletsNumbersToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'list-ol': ListOL,
   });
 })();
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$l([
+__decorate$m([
   InjectVegaSlimmer()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "bulletsToolbarButtonSlimmer", void 0);
-__decorate$l([
+__decorate$m([
   InjectVegaSlimmer()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "numbersToolbarButtonSlimmer", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentMethod('componentWillRender')
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
-/**
- * Action to toggle block horizontal alignment annotation
- */
-class HorizontalAlignmentAnnotationAction extends AnnotationAction {
-  constructor(textAlign) {
-    super();
-    this.isFlushable = true;
-    this.textAlign = textAlign;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {HorizontalAlignmentAnnotation} The annotation
-   */
-  toAnnotation() {
-    return new HorizontalAlignmentAnnotation(this.textAlign);
-  }
-}
-
 const AlignLeft = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M288 64c0 17.7-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32H256c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`,
 };
 
-var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class LeftAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class LeftAlignToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-left',
@@ -1322,10 +1366,10 @@ class LeftAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'align-left': AlignLeft,
   });
 })();
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1333,13 +1377,13 @@ 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$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class CenterAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class CenterAlignToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-center',
@@ -1368,10 +1412,10 @@ class CenterAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'align-center': AlignCenter,
   });
 })();
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1379,13 +1423,13 @@ 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$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class RightAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class RightAlignToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-right',
@@ -1414,10 +1458,10 @@ class RightAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'align-right': AlignRight,
   });
 })();
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1425,13 +1469,13 @@ 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$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class JustifyAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class JustifyAlignToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-justify',
@@ -1460,20 +1504,20 @@ class JustifyAlignToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'align-justify': AlignJustify,
   });
 })();
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], JustifyAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], JustifyAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-class HorizontalAlignmentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class HorizontalAlignmentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-left',
@@ -1518,2279 +1562,703 @@ class HorizontalAlignmentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
   isSelected() {
     return false;
   }
+  isDisabled() {
+    return (super.isDisabled() ||
+      this.selectionController
+        .getSelectedBlocks()
+        .some((block) => block.type === 'code-block'));
+  }
 }
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$g([
+__decorate$h([
   InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "leftAlignToolbarButtonSlimmer", void 0);
-__decorate$g([
+__decorate$h([
   InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "centerAlignToolbarButtonSlimmer", void 0);
-__decorate$g([
+__decorate$h([
   InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "rightAlignToolbarButtonSlimmer", void 0);
-__decorate$g([
+__decorate$h([
   InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "justifiedToolbarButtonSlimmer", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentMethod('componentWillRender')
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
-let processing = false;
 /**
- * Simulate a selection for browsers that don't support shadow selection.
- * Cypress test case added in https://github.com/heartlandpayments/Vega/pull/1561/files#diff-83bdbaaf47fc156ab878099aa1f21b0e8ab92abe5852521299f1fb6efab001c2R300
+ * Represents the state of the RTE
  */
-class ShadowSelection {
-  constructor() {
-    this.rangeCount = 0;
-    this.ranges = [];
+class RTEEditorState {
+  constructor(content, selection) {
+    this.content = content.clone(true);
+    this.selection = selection.clone();
+    this.refreshSelectionNodes();
   }
   /**
-   * Returns a Range object at a specified index.
+   * Clones the editor state, updating the content and selection based on the provided content.
    *
-   * @param {number} index - A specified index.
-   * @returns {Range} - A Range object.
+   * @returns {RTEEditorState} A new instance of RTEEditorState with the updated content and selection.
    */
-  getRangeAt(index) {
-    return this.ranges[index];
+  clone() {
+    return new RTEEditorState(this.content, this.selection);
   }
   /**
-   * Adds a Range to ranges array.
-   *
-   * @param {Range} range - The range of selection.
+   * Refreshes the selection nodes in the editor state.
    */
-  addRange(range) {
-    this.ranges.push(range);
-    this.rangeCount = this.ranges.length;
-    if (!processing) {
-      const windowSelection = window.getSelection();
-      windowSelection.removeAllRanges();
-      windowSelection.setBaseAndExtent(range.startContainer, range.startOffset, range.endContainer, range.endOffset);
+  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,
+        });
+      }
     }
   }
-  /**
-   * Clears all ranges.
-   */
-  removeAllRanges() {
-    this.ranges = [];
-    this.rangeCount = 0;
-  }
 }
+
+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;
+};
 /**
- * Due to the ShadowRoot.getSelection is not a standard API, we add this polyfill to achieve this function.
- *
- * - On Chromium, calling document.getSelection will not pierce into the Shadow DOM and gives you some unhelpful high-level element.
- *   But it does expose the non-standard getSelection method on the ShadowRoot.
- *
- * - On Firefox, it does not implement ShadowRoot.getSelection,
- *   but document.getSelection will pierce through shadow dom and give you the exact element.
- *
- * - On Safari, Selection.getComposedRanges is supported as of v17. On versions before that,
- *   ShadowRoot.getSelection is not supported and apparently document.getSelection does not pierce the Shadow DOM, meaning you are just out of luck.
- *
- * https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot#shadowroot.getselection
- * https://stackoverflow.com/a/70523247
+ * The value controller is responsible for updating the value of the rich text editor.
  */
-class ShadowSelectionPolyfill {
-  constructor() {
-    this.supportShadowSelection = typeof window.ShadowRoot.prototype['getSelection'] === 'function';
-    this.supportBeforeInput = typeof window.InputEvent.prototype.getTargetRanges === 'function';
-    this.isFirefox = window.navigator.userAgent.toLowerCase().indexOf('firefox') > 0;
-    this.listen();
-  }
+class ValueController extends VegaSlimmer {
   /**
-   * For Firefox, we directly use document.getSelection()
-   * For other browser which not support shadowroot.getSelection, we use this.selection which is built by us.
-   * For browser which supported shadowroot.getSelection, we use shadowRoot.getselection().
-   *
-   * @param {ShadowRoot} shadow - A shadow.
-   * @returns {Nullable<Selection>} - The shadow selection.
+   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
    */
-  getSelection(shadow) {
-    if (this.supportShadowSelection) {
-      return shadow['getSelection']();
-    }
-    else {
-      return this.isFirefox
-        ? this.getFirefoxSelection()
-        : this.polyfilledShadowSelection;
-    }
+  connectedCallback() {
+    const flushChangesWithDebounce = debounce(() => {
+      void this.valueController.flushChanges(this.value);
+    }, ValueController.VALUE_CHANGE_DEBOUNCE_TIME, this);
+    this.flushChangeObserver = new Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
+    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
   }
   /**
-   * Get selection in firefox.
-   *
-   * Example:
-   *
-   * <span>span1</span><span>span2</span><span>span3</span>
-   *
-   * In firefox, while selected `span2`, the range be likely to:
-   * range:
-   *   startContainer: #text 'span1'
-   *   startOffset: 5
-   * 	 endContainer: #text 'span3'
-   *   endOffset: 0
-   * start is end of brefore node and end is start of after node.
-   *
-   * So we should modify the startContainer and endContainer here.
-   *
-   * modified range:
-   *   startContainer: #text 'span2'
-   *   startOffset: 0
-   * 	 endContainer: #text 'span2'
-   *   endOffset: 5
-   *
-   * @returns {Selection} - document selection
+   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
    */
-  getFirefoxSelection() {
-    const selection = document.getSelection();
-    const range = selection.getRangeAt(0);
-    const startNode = range.startContainer;
-    const endNode = range.endContainer;
-    if (startNode !== endNode && startNode.textContent.length === range.startOffset) {
-      const nextSibling = startNode.nodeType === Node.TEXT_NODE
-        ? startNode.parentNode.nextSibling
-        : startNode.nextSibling;
-      range.setStart(nextSibling.firstChild, 0);
-    }
-    if (endNode !== startNode && range.endOffset === 0) {
-      const previousSibling = endNode.nodeType === Node.TEXT_NODE
-        ? endNode.parentNode.previousSibling
-        : endNode.previousSibling;
-      range.setEnd(previousSibling.lastChild, previousSibling.lastChild.textContent.length);
-    }
-    return selection;
+  disconnectedCallback() {
+    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
   }
   /**
-   * Sets up event listeners for `selectionchange` and `beforeinput` events to simulate shadow selection.
+   * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
    */
-  listen() {
-    if (this.isFirefox || this.supportShadowSelection || !this.supportBeforeInput)
-      return;
-    this.polyfilledShadowSelection = new ShadowSelection();
-    window.addEventListener('selectionchange', () => {
-      if (!processing) {
-        processing = true;
-        const active = getActiveElement();
-        if (active && active.hasAttribute('contenteditable')) {
-          // This command will not actually work, it only trigger the `beforeinput` event,
-          // the `beforeinput` event will prevented this command work.
-          document.execCommand('indent');
-        }
-        else {
-          this.polyfilledShadowSelection.removeAllRanges();
-        }
-        processing = false;
-      }
-    }, true);
-    window.addEventListener('beforeinput', (event) => {
-      if (processing) {
-        const ranges = event.getTargetRanges();
-        const range = ranges[0];
-        const newRange = new Range();
-        newRange.setStart(range.startContainer, range.startOffset);
-        newRange.setEnd(range.endContainer, range.endOffset);
-        this.polyfilledShadowSelection.removeAllRanges();
-        this.polyfilledShadowSelection.addRange(newRange);
-        event.preventDefault();
-        event.stopImmediatePropagation();
-      }
-    }, true);
+  componentWillLoad() {
+    if (this.value && !(this.value instanceof VegaRTEContent)) {
+      this.value = VegaRTEContent.fromJSON(this.value);
+    }
   }
-}
-const ShadowSelectionPolyfill$1 = new ShadowSelectionPolyfill();
-
-/** Manages selection range for a rich text editor, providing methods to set, sync, and create native ranges based on RTENodes and Nodes. */
-class RTERange {
   /**
-   * Initial the rte range properties
-   *
-   * @param {Node} [startContainer] The range start element.
-   * @param {Node} [endContainer] The range end element.
-   * @param {number} [startOffset] The range start element content offset, default value is 0.
-   * @param {number} [endOffset]  The range end element content offset, default value is 0.
-   * @param {RTENode} [startNode] The range start node, the start node could be null if the start element is root element.
-   * @param {RTENode} [endNode]  The range start node, the start node could be null if the start element is root element.
-   * @param {Range} [nativeRange] The browser native range instance.
+   * Watches the value of the editor and updates the internal value.
    */
-  constructor(startContainer, endContainer, startOffset = 0, endOffset = 0, startNode, endNode, nativeRange) {
-    this._startOffset = 0;
-    this._endOffset = 0;
-    this._startContainer = startContainer;
-    this._endContainer = endContainer;
-    this._startOffset = startOffset;
-    this._endOffset = endOffset;
-    this._startNode = startNode;
-    this._endNode = endNode;
-    if (nativeRange) {
-      this._oldNativeRange = nativeRange;
+  watchValueUpdate() {
+    if (this.value && !(this.value instanceof VegaRTEContent)) {
+      this.value = VegaRTEContent.fromJSON(this.value);
+    }
+    else if (!this.value || this.value.blocks.length === 0) {
+      this.value = VegaRTEContent.createEmptyContent();
+    }
+    else {
+      this.changeEventEmitter.emit(this.value);
+      ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
+        host: this.host,
+        detail: this.value,
+      });
     }
   }
   /**
-   * Returns the start container as a Node or null if it is not set.
-   * The start container could be null when the dom node should be create after re-render.
+   * Updates the value of the editor and restore the selection.
    *
-   * @returns {Nullable<Node>} The range start element.
+   * @param {VegaRTEContent} newValue The new value to set.
+   * @param {boolean} recordHistory - Whether to record the change in history.
    */
-  get startContainer() {
-    return this._startContainer;
+  async flushChanges(newValue, recordHistory = true) {
+    if (recordHistory) {
+      this.historyController.registerHistory(new RTEEditorState(newValue, new RTESelectionState(this.selectionController.getCurrentRange())));
+    }
+    this.value = newValue.clone();
+    await waitForComponentDidRender(this.host);
   }
   /**
-   * Returns the end container as a Node or null if it is not set.
-   * The end container could be null when the dom node should be create after re-render.
+   * Determines whether the observer should accept changes.
    *
-   * @returns {Nullable<Node>} The range start element.
+   * @returns {boolean} Always returns true in the current implementation.
    */
-  get endContainer() {
-    return this._endContainer;
+  isAcceptableFlushChange() {
+    return true;
   }
-  /**
-   * Returns the range start RTE node as a RTENode or null if it is not set.
-   * The start RTENode could be null when the range start node is the root element of the rich text editor.
-   *
-   * @returns {Nullable<RTENode>} The range start element.
-   */
-  get startNode() {
-    return this._startNode;
+}
+ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
+__decorate$g([
+  MapToComponentField()
+], ValueController.prototype, "host", void 0);
+__decorate$g([
+  MapToComponentField({ writable: true })
+], ValueController.prototype, "value", void 0);
+__decorate$g([
+  MapToComponentField()
+], ValueController.prototype, "changeEventEmitter", void 0);
+__decorate$g([
+  MapToComponentField()
+], ValueController.prototype, "valueController", void 0);
+__decorate$g([
+  MapToComponentField()
+], ValueController.prototype, "historyController", void 0);
+__decorate$g([
+  MapToComponentField()
+], ValueController.prototype, "selectionController", void 0);
+__decorate$g([
+  MapToComponentMethod('connectedCallback')
+], ValueController.prototype, "connectedCallback", null);
+__decorate$g([
+  MapToComponentMethod('disconnectedCallback')
+], ValueController.prototype, "disconnectedCallback", null);
+__decorate$g([
+  MapToComponentMethod('componentWillLoad')
+], ValueController.prototype, "componentWillLoad", null);
+__decorate$g([
+  MapToComponentMethod('watchValueUpdate')
+], ValueController.prototype, "watchValueUpdate", null);
+
+/**
+ * The rich text content controller
+ */
+class RichTextContentController {
+  constructor(editor) {
+    this.editor = editor;
   }
   /**
-   * Returns the range end RTE node as a RTENode or null if it is not set.
-   * The end RTENode could be null when the range end node is the root element of the rich text editor.
+   * Sync rich text content editable with disabled property
    *
-   * @returns {Nullable<RTENode>} The range start element.
    */
-  get endNode() {
-    return this._endNode;
+  syncRichTextContentEditable() {
+    this.editor.richTextContentEditable = !this.editor.disabled;
   }
+}
+
+const ROOT_CONTAINER_CLASS_NAME = 'rich-text-content';
+/** This code snippet is defining an abstract class named `BaseHandler` with an abstract method `execute`. */
+class BaseHandler {
   /**
-   * Returns range's start offset.
+   * The function `execute` initializes the current state and selection, and then handles an event if provided.
    *
-   * @returns {number} The character length in text node or the element index of parent element.
+   * @param {VegaRTEContent} currentState - The current state of the VegaRTE content.
+   * @param {SelectionController} selectionController - Manages the selection of items in the user interface.
+   * @param {HTMLElement} richTextEditor - The current rich text editor component
+   * @param {InputEvent} [event] - It is used to pass an input event to the method for handling.
    */
-  get startOffset() {
-    return this._startOffset;
+  execute(currentState, selectionController, richTextEditor, event) {
+    this.initCurrentStateAndSelection(currentState, selectionController);
+    this.setCurrentRichTextEditor(richTextEditor);
+    this.handleEvent(event);
   }
   /**
-   * Returns range's start offset.
+   * The function `isRootContainer` checks if an HTML element is a root container with a class of 'rich-text-content'.
    *
-   * @returns {number} The character length in text node or the element index of parent element.
+   * @param {HTMLElement} element - HTMLElement
+   * @returns {boolean} The boolean value
    */
-  get endOffset() {
-    return this._endOffset;
+  isRootContainer(element) {
+    return (element &&
+      element.nodeType === Node.ELEMENT_NODE &&
+      element.classList.contains(ROOT_CONTAINER_CLASS_NAME));
   }
   /**
-   * Updates the range options for a Rich Text Editor.
-   * This method will called after modify the content, the start node and end node should be rte node.
-   * This method will called after selectionchange event emit, the start node and end node should be the html node.
+   * Checks if a given HTML element represents an empty paragraph containing only a line break element.
    *
-   * @param {RTERangeOptions} options - An object that contains the following properties:
-   * @param {Range} [nativeRange] - The native range instance
-   * @returns {RTERange} - The new RTERange instance
+   * @param {HTMLElement} node - An HTMLElement node that represents a paragraph element in the HTML document.
+   * @returns {boolean} boolean result
    */
-  updateRTERange(options, nativeRange) {
-    const { startOffset, endOffset } = options;
-    this._startOffset = startOffset;
-    this._endOffset = endOffset;
-    const startNode = options.startNode;
-    const endNode = options.endNode;
-    if (startNode instanceof RTENode) {
-      this._startNode = startNode;
-      this._endNode = endNode;
-      const startContainer = this.getElementByRTENode(this._startNode);
-      const endContainer = this._startNode === this._endNode ? startContainer : this.getElementByRTENode(this._endNode);
-      if (startContainer) {
-        this._startContainer = startContainer;
-        this._endContainer = endContainer;
-      }
-    }
-    else {
-      // The selectionchange callback has a 50 ms delay, so we need to check the next range is the same as the current ret range.
-      this._startContainer = startNode;
-      this._endContainer = endNode;
-      this._startNode = this.getRTENodeByElement(this._startContainer);
-      this._endNode =
-        this._startContainer === this._endContainer
-          ? this._startNode
-          : this.getRTENodeByElement(this._endContainer);
-      if (nativeRange) {
-        this._oldNativeRange = nativeRange;
-      }
-    }
-    return new RTERange(this._startContainer, this._endContainer, this._startOffset, this._endOffset, this._startNode, this._endNode, this._oldNativeRange);
+  isEmptyParagraph(node) {
+    return node && node.childNodes && node.childNodes.length === 0;
   }
   /**
-   * Creates a new instance of the `RTERange` class with the same properties as the current instance.
+   * Removes selected nodes within a range in a rich text editor content.
+   * The method is only used for different nodes are selected
    *
-   * @returns {RTERange} A new `RTERange` instance with the same start and end containers, offsets, and nodes.
+   * @param {boolean} [mergeNode] Merge start node and end node or not, default value is false.
+   * @returns {RTENode} The range start node, usually the start node is the first item of selectedNodes, if the selectedNodes is all removed, the start node will be a new text node.
    */
-  clone() {
-    return new RTERange(this._startContainer, this._endContainer, this._startOffset, this._endOffset, this._startNode, this._endNode, this._oldNativeRange);
+  removeSelectionRange(mergeNode = false) {
+    ChangeManager.notify(domNodeSubjectFactory.getSubject(this.richTextEditorRef, VegaInternalRichTextEditDeleteSelectedNodes), { host: this.richTextEditorRef, detail: mergeNode });
+    const range = this.selectionController.getCurrentRange();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    return range.startNode || selectedNodes[0];
   }
   /**
-   * Creates a Range object based on start and end nodes and offsets.
-   * Invoke this method to get the future range state if the range content modified.
-   * Invoke this method to get the native range instance if range start node and end node not defined
+   * Creates a new paragraph with an empty text node and returns it.
    *
-   * @returns {Nullable<Range>} The range instance. The return value could be null if the start node or end node are not rendered.
+   * @returns {RTETextBlock} An empty paragraph with a unique identifier and a text node appended to it.
    */
-  toNativeRange() {
-    const startContainer = this.getElementByRTENode(this._startNode);
-    const endContainer = this._startNode === this._endNode ? startContainer : this.getElementByRTENode(this._endNode);
-    const range = new Range();
-    if (startContainer && endContainer) {
-      range.setStart(startContainer, this._startOffset);
-      range.setEnd(endContainer, this._endOffset);
-      this._startContainer = startContainer;
-      this._endContainer = endContainer;
-      this._oldNativeRange = range;
-      return range;
-    }
-    else if (this._oldNativeRange) {
-      return this._oldNativeRange;
-    }
+  createEmptyParagraph() {
+    const paragraph = new RTETextBlock(generateUUID(), 'paragraph');
+    const textNode = new RTETextNode(`${paragraph.id}1`, '', paragraph);
+    paragraph.apply(new AppendChildNodesAction([textNode]));
+    return paragraph;
   }
   /**
-   * Retrieves the DOM element associated with a given RTENode entity.
+   * The function initializes the current state and selection controller in TypeScript.
    *
-   * @param {Nullable<RTENode>} node - Represents a node in a Rich Text Editor.
-   * @returns {Nullable<Node>} a Node object or null.
+   * @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.
    */
-  getElementByRTENode(node) {
-    if (node) {
-      const element = stateEntityRenderingRegistry.getDOMByEntity(node);
-      if (element) {
-        return node instanceof RTEImageNode
-          ? findParent(element, 'vega-rich-text-image-editor')
-          : element.firstChild;
-      }
-    }
+  initCurrentStateAndSelection(currentState, selectionController) {
+    this.currentState = currentState;
+    this.selectionController = selectionController;
   }
   /**
-   * Retrieves an RTENode based on the given element by checking its type and parent elements.
+   * Queries the rich text editor element from the input event target.
    *
-   * @param {Node} element - An element in the DOM (Document Object Model).
-   * @returns { Nullable<RTENode>} Returns a nullable `RTENode` object.
+   * @param {HTMLElement} richTextEditor - The current rich text editor component
    */
-  getRTENodeByElement(element) {
-    if (element) {
-      const registerElement = element.nodeType === Node.TEXT_NODE
-        ? element.parentElement
-        : element.nodeName === 'VEGA-RICH-TEXT-IMAGE-EDITOR'
-          ? element.querySelector('img')
-          : element;
-      return stateEntityRenderingRegistry.getEntityByDOM(registerElement);
-    }
+  setCurrentRichTextEditor(richTextEditor) {
+    this.richTextEditorRef = richTextEditor;
   }
 }
 
 /**
- * Represents the state of the selection in the RTE.
+ * Insert a new node before a existing node
+ *
+ * @example currentNode.parentBlock.apply(new InsertNodesBeforeAction(currentNode, newNode, ...))
  */
-class RTESelectionState {
-  constructor(range) {
-    this.range = range;
-  }
-  /**
-   * Clones the selection state, updating the range nodes based on the provided content.
-   *
-   * @returns {RTESelectionState} A new instance of RTESelectionState with the updated range.
-   */
-  clone() {
-    const newRange = this.range.clone();
-    return new RTESelectionState(newRange);
-  }
-}
-
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/**
- * The text selection controller
- */
-class SelectionController extends VegaSlimmer {
-  constructor() {
-    super(...arguments);
-    this.currentRange = new RTERange();
-    this.updateCaretPositionTaskQueue = new SynchronizeTaskQueue(1);
-    this.handleSelectionWithDebounce = debounce(this.handleSelectionChange, SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME, this);
-    this.pendingRestoreSelectionNodes = [];
-    /**
-     * Sets the next selection state with specified start and end nodes, offsets, and a timestamp.
-     *
-     * Example:
-     * Before insert text start offset is 0, the new start offset should update to 1
-     * Before delete text start offset is 1, the new start offset should update to 0
-     *
-     */
-    this.createUpdateSelectionRangeTask = async () => {
-      // add await Promise.resolve to put the code behind to a micro task
-      await Promise.resolve();
-      const range = this.currentRange.toNativeRange();
-      if (range) {
-        this.setSelectionRange(range);
-      }
-    };
-  }
-  /**
-   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
-   */
-  connectedCallback() {
-    this.registerSelectionRangeChangeObserver();
-  }
-  /**
-   * Component lifecycle - [disconnectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
-   */
-  disconnectedCallback() {
-    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
-  }
-  /**
-   * Component lifecycle - [componentDidLoad]{@link VegaRichTextEditor.componentDidLoad}
-   */
-  componentDidLoad() {
-    document.addEventListener('selectionchange', this.handleSelectionWithDebounce);
-  }
-  /**
-   * Watches the internal value of the editor
-   */
-  watchValueUpdate() {
-    this.prepareRestoreSelectionState();
-    this.restoreSelection();
-  }
-  /**
-   * Update the caret position after the component re-render
-   */
-  async updateCaretPosition() {
-    if (this.updateCaretPositionTaskQueue.queue.length) {
-      await this.updateCaretPositionTaskQueue.runTask();
-    }
-  }
-  /**
-   * Get the current RTE selection range
-   *
-   * @returns {RTERange} - The current RTE selection range
-   */
-  getCurrentRange() {
-    return this.currentRange;
-  }
-  /**
-   * Get the selected rich text node
-   *
-   * @returns {RTENode[]} Selected rich text nodes
-   */
-  getSelectedNodes() {
-    return Array.from(this.selectionMap.values()).flat();
-  }
-  /**
-   * Get the selected rich text blocks
-   *
-   * @returns {RTEBlock[]} Selected rich text blocks
-   */
-  getSelectedBlocks() {
-    return Array.from(this.selectionMap.keys());
-  }
-  /**
-   * Set the selection state
-   *
-   * @param {RTESelectionState} state - The selection state to set
-   */
-  setSelectionState(state) {
-    this.selectionState = state;
-  }
-  /**
-   * Sets the next selection state with specified start and end nodes, offsets, push the update task to a queue
-   *
-   * @param {SelectionStateType['startNode']} startNode - The starting node of the selection range. It is a Node object representing the node where the selection range starts.
-   * @param {number} startOffset - The `startNode` where the selection range should start. It indicates the position within the `startNode` where the selection should begin.
-   * @param {SelectionStateType['endNode']} [endNode] - The ending node of the selection range. If a value is provided for `endNode`, it will be used as the ending node of the selection range.
-   * @param {number} [endOffset] - The ending offset within the `endNode` where the selection range should end.
-   * @param {boolean} [immediatelyRun] - Should the task run immediately. default is false
-   */
-  enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset, immediatelyRun = false) {
-    endNode = endNode || startNode;
-    endOffset = endOffset || endOffset === 0 ? endOffset : startOffset;
-    this.currentRange = this.currentRange.updateRTERange({ startNode, endNode, startOffset, endOffset });
-    void this.updateCaretPositionTaskQueue.enqueue({
-      /** Add task to the queue and run it until component did render */
-      run: async () => {
-        try {
-          await this.createUpdateSelectionRangeTask();
-        }
-        catch (e) {
-          LogUtility.error('Set range error.', e);
-        }
-      },
-    }, immediatelyRun);
-  }
-  /**
-   * Set selection with a new range
-   *
-   * @param {Range} range - The range to set
-   */
-  setSelectionRange(range) {
-    const selection = this.getSelection();
-    if (selection) {
-      selection.removeAllRanges();
-      selection.addRange(range);
-      this.saveSelection();
-    }
-  }
-  /**
-   * Save the current selection range detail
-   */
-  saveSelection() {
-    const selection = this.getSelection();
-    // The range is out of date if the queue is not empty, or the range is update by the composition text insert, so we should not update the RTERange
-    if (selection &&
-      selection.rangeCount > 0 &&
-      this.updateCaretPositionTaskQueue.queue.length === 0 &&
-      !this.insertCompositionTextController.isComposing()) {
-      const range = selection.getRangeAt(0);
-      const { startContainer: startNode, endContainer: endNode, startOffset, endOffset } = range;
-      this.currentRange = this.currentRange.updateRTERange({ startNode, endNode, startOffset, endOffset }, range);
-    }
-  }
-  /**
-   * Restore the selection to the current selected nodes
-   */
-  restoreSelection() {
-    if (this.selectionState) {
-      const { startNode, endNode, startOffset, endOffset } = this.selectionState.range;
-      if (startNode instanceof RTETextNode && startNode === endNode && startNode.text.length === 0) {
-        this.enqueueSelectionRangeFutureState(startNode, ZERO_WIDTH_SPACE.length);
-      }
-      else {
-        this.enqueueSelectionRangeFutureState(startNode, startOffset, endNode, endOffset);
-      }
-      this.selectionState = null;
-    }
-  }
-  /**
-   * Get the rich text content selected range
-   *
-   * @returns {Selection} A [Selection](https://developer.mozilla.org/en-US/docs/Web/API/Selection) object
-   */
-  getSelection() {
-    const richTextContentRef = this.vegaRichTextEditorRenderer.getRichTextContentRef();
-    return ShadowSelectionPolyfill$1.getSelection(richTextContentRef.shadowRoot);
-  }
-  /**
-   * Get selected rich text
-   */
-  handleSelectionChange() {
-    if (this.disabled)
-      return;
-    const selection = this.getSelection();
-    if (!selection || selection.rangeCount === 0)
-      return;
-    this.clearSelectionMap();
-    this.saveSelection();
-    const range = selection.getRangeAt(0);
-    const commonAncestor = range.commonAncestorContainer;
-    const selectedNodes = [];
-    /**
-     * Rich text node filter
-     *
-     * @param {Node} node - Start node
-     */
-    const filterNode = (node) => {
-      if (!range.intersectsNode(node)) {
-        return;
-      }
-      if (node.nodeType === Node.TEXT_NODE) {
-        const currentNode = node.parentElement;
-        const nodeEntity = stateEntityRenderingRegistry.getEntityByDOM(currentNode);
-        if (nodeEntity instanceof RTENode) {
-          selectedNodes.push(nodeEntity);
-          return;
-        }
-      }
-      if (node.nodeType === Node.ELEMENT_NODE) {
-        const entityElement = node.nodeName === 'VEGA-RICH-TEXT-IMAGE-EDITOR'
-          ? node.querySelector('img')
-          : node;
-        const nodeEntity = stateEntityRenderingRegistry.getEntityByDOM(entityElement);
-        if (nodeEntity instanceof RTENode) {
-          selectedNodes.push(nodeEntity);
-          return;
-        }
-      }
-      node.childNodes.forEach(filterNode);
-    };
-    filterNode(commonAncestor);
-    selectedNodes.forEach((node) => {
-      if (this.selectionMap.has(node.parentBlock)) {
-        this.selectionMap.get(node.parentBlock).push(node);
-      }
-      else {
-        this.selectionMap.set(node.parentBlock, [node]);
-      }
-    });
-    this.getSelectedNodes().forEach((node) => node.apply(new SelectionChangeAction(range)));
-  }
-  /**
-   * Clear the selection map
-   */
-  clearSelectionMap() {
-    this.getSelectedNodes().forEach((node) => {
-      node.annotationMap.delete(InternalAnnotationTypeEnum.SELECTION_RANGE);
-    });
-    this.selectionMap = new Map();
-  }
-  /**
-   * Check if the selection range change is acceptable
-   *
-   * @returns {boolean} - Returns a boolean value.
-   */
-  isAcceptableSelectionRangeChange() {
-    return true;
-  }
-  /**
-   * Register the selection range change observer
-   */
-  registerSelectionRangeChangeObserver() {
-    this.selectionRangeChangeObserver = new Observer(this.isAcceptableSelectionRangeChange.bind(this), (payload) => {
-      this.pendingRestoreSelectionNodes.push(payload.node);
-    });
-    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorSelectionRangeChange), this.selectionRangeChangeObserver);
-  }
-  /**
-   * Prepare the selection state to restore
-   */
-  prepareRestoreSelectionState() {
-    if (this.pendingRestoreSelectionNodes.length > 0) {
-      const startNode = this.pendingRestoreSelectionNodes[0];
-      const endNode = this.pendingRestoreSelectionNodes.length > 1
-        ? this.pendingRestoreSelectionNodes[this.pendingRestoreSelectionNodes.length - 1]
-        : startNode;
-      const { startOffset, endOffset, endContainer, startContainer } = this.currentRange;
-      const nodesInCurrentRange = stateEntityRenderingRegistry.getDOMByEntity(startNode) === startContainer.parentElement &&
-        stateEntityRenderingRegistry.getDOMByEntity(endNode) === endContainer.parentElement;
-      if (nodesInCurrentRange) {
-        this.currentRange = this.currentRange.updateRTERange({
-          startNode,
-          endNode,
-          startOffset,
-          endOffset,
-        });
-        this.selectionState = new RTESelectionState(this.currentRange);
-      }
-      else {
-        this.currentRange = this.currentRange.updateRTERange({
-          startNode,
-          endNode,
-          startOffset: 0,
-          endOffset: endNode.text.length,
-        });
-        this.selectionState = new RTESelectionState(this.currentRange);
-      }
-      this.pendingRestoreSelectionNodes = [];
-    }
-  }
-}
-SelectionController.SELECTION_CHANGE_DEBOUNCE_TIME = 50;
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$f([
-  MapToComponentField({ writable: true })
-], SelectionController.prototype, "selectionMap", void 0);
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "host", void 0);
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "value", void 0);
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "disabled", void 0);
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "valueController", void 0);
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "insertCompositionTextController", void 0);
-__decorate$f([
-  MapToComponentField()
-], SelectionController.prototype, "historyController", void 0);
-__decorate$f([
-  MapToComponentMethod('connectedCallback')
-], SelectionController.prototype, "connectedCallback", null);
-__decorate$f([
-  MapToComponentMethod('disconnectedCallback')
-], SelectionController.prototype, "disconnectedCallback", null);
-__decorate$f([
-  MapToComponentMethod('componentDidLoad')
-], SelectionController.prototype, "componentDidLoad", null);
-__decorate$f([
-  MapToComponentMethod('watchValueUpdate')
-], SelectionController.prototype, "watchValueUpdate", null);
-__decorate$f([
-  MapToComponentMethod('componentDidUpdate')
-], SelectionController.prototype, "updateCaretPosition", null);
-
-/**
- * Represents the state of the RTE
- */
-class RTEEditorState {
-  constructor(content, selection) {
-    this.content = content.clone(true);
-    this.selection = selection.clone();
-    this.refreshSelectionNodes();
-  }
-  /**
-   * Clones the editor state, updating the content and selection based on the provided content.
-   *
-   * @returns {RTEEditorState} A new instance of RTEEditorState with the updated content and selection.
-   */
-  clone() {
-    return new RTEEditorState(this.content, this.selection);
-  }
-  /**
-   * Refreshes the selection nodes in the editor state.
-   */
-  refreshSelectionNodes() {
-    const { startNode: oldStartNode, endNode: oldEndNode, startOffset, endOffset, } = this.selection.range;
-    if (oldStartNode && oldEndNode) {
-      const startNode = this.content.findNodeById(oldStartNode.id);
-      const endNode = this.content.findNodeById(oldEndNode.id);
-      if (startNode && endNode) {
-        this.selection.range.updateRTERange({
-          startNode,
-          endNode,
-          startOffset,
-          endOffset,
-        });
-      }
-    }
-  }
-}
-
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-/**
- * The value controller is responsible for updating the value of the rich text editor.
- */
-class ValueController extends VegaSlimmer {
-  /**
-   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.connectedCallback}
-   */
-  connectedCallback() {
-    const flushChangesWithDebounce = debounce(() => {
-      void this.valueController.flushChanges(this.value);
-    }, ValueController.VALUE_CHANGE_DEBOUNCE_TIME, this);
-    this.flushChangeObserver = new Observer(this.isAcceptableFlushChange.bind(this), flushChangesWithDebounce);
-    ChangeManager.register(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
-  }
-  /**
-   * Component lifecycle - [connectedCallback]{@link VegaRichTextEditor.disconnectedCallback}
-   */
-  disconnectedCallback() {
-    ChangeManager.unregister(domNodeSubjectFactory.getSubject(this.host, VegaInternalRichTextEditorFlushChanges), this.flushChangeObserver);
-  }
-  /**
-   * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
-   */
-  componentWillLoad() {
-    if (this.value && !(this.value instanceof VegaRTEContent)) {
-      this.value = VegaRTEContent.fromJSON(this.value);
-    }
-  }
-  /**
-   * Watches the value of the editor and updates the internal value.
-   */
-  watchValueUpdate() {
-    if (this.value && !(this.value instanceof VegaRTEContent)) {
-      this.value = VegaRTEContent.fromJSON(this.value);
-    }
-    else if (!this.value || this.value.blocks.length === 0) {
-      this.value = VegaRTEContent.createEmptyContent();
-    }
-    else {
-      this.changeEventEmitter.emit(this.value);
-      ChangeManager.notify(FORM_ELEMENT_VALUE_CHANGE, {
-        host: this.host,
-        detail: this.value,
-      });
-    }
-  }
-  /**
-   * Updates the value of the editor and restore the selection.
-   *
-   * @param {VegaRTEContent} newValue The new value to set.
-   * @param {boolean} recordHistory - Whether to record the change in history.
-   */
-  async flushChanges(newValue, recordHistory = true) {
-    if (recordHistory) {
-      this.historyController.registerHistory(new RTEEditorState(newValue, new RTESelectionState(this.selectionController.getCurrentRange())));
-    }
-    this.value = newValue.clone();
-    await waitForComponentDidRender(this.host);
-  }
-  /**
-   * Determines whether the observer should accept changes.
-   *
-   * @returns {boolean} Always returns true in the current implementation.
-   */
-  isAcceptableFlushChange() {
-    return true;
-  }
-}
-ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
-__decorate$e([
-  MapToComponentField()
-], ValueController.prototype, "host", void 0);
-__decorate$e([
-  MapToComponentField({ writable: true })
-], ValueController.prototype, "value", void 0);
-__decorate$e([
-  MapToComponentField()
-], ValueController.prototype, "changeEventEmitter", void 0);
-__decorate$e([
-  MapToComponentField()
-], ValueController.prototype, "valueController", void 0);
-__decorate$e([
-  MapToComponentField()
-], ValueController.prototype, "historyController", void 0);
-__decorate$e([
-  MapToComponentField()
-], ValueController.prototype, "selectionController", void 0);
-__decorate$e([
-  MapToComponentMethod('connectedCallback')
-], ValueController.prototype, "connectedCallback", null);
-__decorate$e([
-  MapToComponentMethod('disconnectedCallback')
-], ValueController.prototype, "disconnectedCallback", null);
-__decorate$e([
-  MapToComponentMethod('componentWillLoad')
-], ValueController.prototype, "componentWillLoad", null);
-__decorate$e([
-  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.notify(domNodeSubjectFactory.getSubject(this.richTextEditorRef, 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 RTETextBlock(generateUUID(), 'paragraph');
-    const textNode = new RTETextNode(`${paragraph.id}1`, '', paragraph);
-    paragraph.apply(new AppendChildNodesAction([textNode]));
-    return paragraph;
-  }
-  /**
-   * The function initializes the current state and selection controller in TypeScript.
-   *
-   * @param {VegaRTEContent} currentState - The current state of a Vega runtime environment content.
-   * @param {SelectionController} selectionController - It is used to manage the selection of content within the VegaRTE editor.
-   */
-  initCurrentStateAndSelection(currentState, selectionController) {
-    this.currentState = currentState;
-    this.selectionController = selectionController;
-  }
-  /**
-   * Queries the rich text editor element from the input event target.
-   *
-   * @param {HTMLElement} richTextEditor - The current rich text editor component
-   */
-  setCurrentRichTextEditor(richTextEditor) {
-    this.richTextEditorRef = richTextEditor;
-  }
-}
-
-/**
- * Insert a new node before a existing node
- *
- * @example currentNode.parentBlock.apply(new InsertNodesBeforeAction(currentNode, newNode, ...))
- */
-class InsertNodesBeforeAction extends ModifyContentAction {
-  constructor(referNode, ...nodesToBeInserted) {
-    super();
-    this.type = ModifyContentActionType.INSERT_NODES_BEFORE;
-    this.referNode = referNode;
-    this.nodesToBeInserted = nodesToBeInserted;
-  }
-}
-
-/**
- * Replace the text node selected content to new text
- *
- * @example selectedNode.apply(new ReplaceSelectedTextAction(insertText))
- */
-class ReplaceSelectedTextAction extends ModifyContentAction {
-  constructor(text, currentRange) {
-    super();
-    this.type = ModifyContentActionType.REPLACE_SELECTED_TEXT;
-    this.textToBeInsert = '';
-    this.textToBeInsert = text;
-    this.currentRange = currentRange;
-  }
-}
-
-/** Handles inserting text into a VegaRTEContent based on the current selection and input event. User input character will trigger this callback */
-class InsertTextHandler extends BaseHandler {
-  /**
-   * 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 RTETextNode) {
-        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 === ZERO_WIDTH_SPACE &&
-            startOffset === ZERO_WIDTH_SPACE.length &&
-            cursorNode.isEmpty()) {
-            startContainer.nodeValue = '';
-            nextOffset = nextOffset - ZERO_WIDTH_SPACE.length;
-          }
-          if (cursorNode instanceof RTETextNode) {
-            updateFlag = true;
-            cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
-          }
-        }
-        updateFlag &&
-          this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(nextOffset, cursorNode['text'].length));
-      }
-    }
-    else {
-      // The selected nodes is multiple nodes
-      const cursorNode = this.removeSelectionRange(true);
-      if (cursorNode instanceof RTETextNode) {
-        cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
-        this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(startOffset + text.length, cursorNode.text.length));
-      }
-    }
-  }
-  /**
-   * 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.blocks[0] &&
-      this.currentState.blocks[0] instanceof RTETextBlock) {
-      const firstNode = this.currentState.blocks[0].nodes[0];
-      firstNode.apply(new 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.parentBlock;
-    const index = textBlock.nodes.indexOf(lineBreakNode);
-    if (startOffset === 0 && startOffset === endOffset && textBlock.nodes[index + 1]) {
-      const newTextNode = lineBreakNode.cloneWithText(text);
-      textBlock.apply(new InsertNodesBeforeAction(lineBreakNode, newTextNode));
-      return newTextNode;
-    }
-    else {
-      lineBreakNode.apply(new UpdateTextAction(text));
-      return lineBreakNode;
-    }
-  }
-}
-
-/** Insert a paragraph in a rich text editor based on the current selection and event. User type enter will trigger this callback */
-class InsertParagraphHandler extends BaseHandler {
-  /**
-   * Create new paragraph node and add node to state value
-   */
-  handleEvent() {
-    const selectedBlocks = this.selectionController.getSelectedBlocks();
-    if (selectedBlocks.length < 2) {
-      this.breakSingleBlock();
-    }
-    else {
-      this.breakMultipleBlocks();
-    }
-  }
-  /**
-   * Handles breaking blocks in an RTE editor based on the current selection and position.
-   */
-  breakMultipleBlocks() {
-    const selectedBlocks = this.selectionController.getSelectedBlocks();
-    const range = this.selectionController.getCurrentRange();
-    const cursorNode = this.removeSelectionRange();
-    // If the start or end block contains a list item block, it needs to be processed separately
-    if ((selectedBlocks.length && selectedBlocks[0].type === 'list-item') ||
-      selectedBlocks[selectedBlocks.length - 1].type === 'list-item') {
-      const firstBlock = cursorNode.parentBlock;
-      const lastBlock = selectedBlocks[selectedBlocks.length - 1];
-      /**
-       * First block is list item
-       * --before--
-       * ul
-       *  - li
-       * p
-       *  - span
-       * --after--
-       * ul
-       *  - li
-       *  - li
-       */
-      /**
-       * End block is list item
-       * --before--
-       * p
-       *  - span
-       * ul
-       *  - li
-       * --after--
-       * p
-       *  - span
-       * p
-       *  - span
-       */
-      if (firstBlock.type !== lastBlock.type &&
-        range.startContainer.nodeType === range.endContainer.nodeType) {
-        firstBlock.apply(new MergeTwoBlocksNodesAction(lastBlock));
-        const splitAction = new SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
-        firstBlock.apply(splitAction);
-        this.switchCaretPositionToNextElement(splitAction.newBlock);
-        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.parentBlock;
-    const { startOffset } = this.selectionController.getCurrentRange();
-    if (currentBlock) {
-      const breakAction = new BreakSingleBlockAction(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['nodes']) {
-      this.selectionController.enqueueSelectionRangeFutureState(newBlock['nodes'][0], 0);
-    }
-  }
-}
-
-/**
- * Split the block with a split point node
- *
- * @example block.apply(new SplitBlockWithNodeAction(node, offset))
- */
-class LineBreakSingleBlockAction extends ModifyContentAction {
-  constructor(startContainerNode, startOffset) {
-    super();
-    this.type = ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK;
-    this.startContainerNode = startContainerNode;
-    this.startOffset = startOffset;
-  }
-}
-
-/**
- * Split the block with a split point node
- *
- * @example block.apply(new SplitBlockWithNodeAction(node, offset))
- */
-class lineBreakMultipleBlocksAction extends ModifyContentAction {
-  constructor(selectedBlocks) {
-    super();
-    this.type = ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS;
-    this.selectedBlocks = selectedBlocks;
-  }
-}
-
-/** User press shift + enter will tigger this callback */
-class InsertLineBreakHandler extends BaseHandler {
-  /**
-   * Create new line break node and add node to state value
-   */
-  handleEvent() {
-    const range = this.selectionController.getCurrentRange();
-    const selectedBlocks = this.selectionController.getSelectedBlocks();
-    if (this.isRootContainer(range.startContainer)) {
-      this.breakNewBlock();
-    }
-    if (selectedBlocks.length < 2) {
-      this.breakSingleBlock();
-    }
-    else {
-      this.breakMultipleBlocks();
-    }
-  }
-  /**
-   * Insert the \n in text element when root container is empty, should create text block and text node
-   * <p>
-   *  <span></span>
-   *  <span></span>
-   * </p>
-   */
-  breakNewBlock() {
-    if (this.currentState &&
-      this.currentState.blocks[0] &&
-      this.currentState.blocks[0] instanceof RTETextBlock) {
-      const lineBreakAction = new LineBreakSingleBlockAction(this.currentState.blocks[0].nodes[0], 0);
-      this.currentState.blocks[0].apply(lineBreakAction);
-      this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
-    }
-  }
-  /**
-   * If the selected node is a text node
-   * <p>
-   *  <span>text</span>
-   * </p>
-   * Insert a line break and the selected node will be split into three text nodes
-   * <p>
-   *  <span>te</span>
-   *  <br>
-   *  <span>xt</span>
-   * </p>
-   */
-  breakSingleBlock() {
-    const range = this.selectionController.getCurrentRange();
-    const cursorNode = this.removeSelectionRange();
-    const currentBlock = cursorNode.parentBlock;
-    if (currentBlock) {
-      const lineBreakAction = new LineBreakSingleBlockAction(cursorNode, range.startOffset);
-      currentBlock.apply(lineBreakAction);
-      this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
-    }
-  }
-  /**
-   * Handles breaking blocks in an RTE editor based on the current selection and position.
-   */
-  breakMultipleBlocks() {
-    const selectedBlocks = this.selectionController.getSelectedBlocks();
-    const cursorNode = this.removeSelectionRange();
-    const lineBreakAction = new lineBreakMultipleBlocksAction(selectedBlocks);
-    cursorNode.parentBlock.apply(lineBreakAction);
-    this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
-  }
-  /**
-   * Moves the caret to the next node element in a rich text editor.
-   *
-   * @param {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.parentBlock['nodes'].indexOf(lineBreakNode);
-    const nextNode = lineBreakNode.parentBlock['nodes'][index + 1];
-    return nextNode || lineBreakNode;
-  }
-}
-
-/**
- * Delete text or image when press delete
- *
- * @example currentBlock.apply(new DeleteBlockContentAction(startContainerNode, startOffset))
- */
-class DeleteBlockContentAction extends ModifyContentAction {
-  constructor(startContainerNode, startOffset) {
-    super();
-    this.type = ModifyContentActionType.DELETE_BLOCK_CONTENT;
-    this.startContainerNode = startContainerNode;
-    this.startOffset = startOffset;
-  }
-}
-
-/** Handles the deletion of content within a VegaRTE editor. User press backspace or delete will trigger this method */
-class DeleteContentHandler extends BaseHandler {
-  /**
-   * Delete the selected node from the current state.
-   */
-  handleEvent() {
-    const selectedBlocks = this.selectionController.getSelectedBlocks();
-    if (selectedBlocks.length < 2) {
-      this.deleteContentWithSingleBlock();
-    }
-    else {
-      this.deleteContentWithMultipleNodes();
-    }
-  }
-  /**
-   * Handles the deletion of content within a single block in an RTE editor.
-   */
-  deleteContentWithSingleBlock() {
-    const range = this.selectionController.getCurrentRange();
-    const { startOffset, endOffset, startContainer, endContainer } = range;
-    const selectedBlocks = this.selectionController.getSelectedBlocks();
-    const selectedNodes = this.selectionController.getSelectedNodes();
-    if (startOffset !== endOffset || startContainer !== endContainer) {
-      this.deleteContentWithMultipleNodes();
-    }
-    else if (selectedBlocks[0]) {
-      const deleteAction = new DeleteBlockContentAction(selectedNodes[0], startOffset);
-      selectedBlocks[0].apply(deleteAction);
-      if (deleteAction.previousNode) {
-        const nextOffset = deleteAction.previousNode === selectedNodes[0]
-          ? Math.max(0, startOffset - 1)
-          : this.getNodeEndOffset(deleteAction.previousNode);
-        this.selectionController.enqueueSelectionRangeFutureState(deleteAction.previousNode, nextOffset);
-      }
-      else if (deleteAction.nextNode) {
-        this.selectionController.enqueueSelectionRangeFutureState(deleteAction.nextNode, 0);
-      }
-      else if (this.currentState.blocks.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 RTETextNode &&
-      lastSelectedNode.isEmpty()) {
-      lastSelectedNode.parentBlock.apply(new RemoveChildAction(lastSelectedNode));
-    }
-    this.convertFirstBlockToParagraph(cursorNode.parentBlock);
-  }
-  /**
-   * If the first block is not paragraph, convert the block to paragraph after delete all text
-   *
-   * @param {RTEBlock} block - The first block instance
-   */
-  convertFirstBlockToParagraph(block) {
-    const firstBlock = this.currentState.blocks[0];
-    if (firstBlock === block &&
-      block instanceof RTETextBlock &&
-      block.nodes.length === 1 &&
-      block.nodes[0].isEmpty() &&
-      block.type !== 'paragraph') {
-      const paragraph = this.createEmptyParagraph();
-      paragraph.apply(new ReplaceChildNodesAction(block.nodes));
-      block.parent.apply(new InsertBlocksBeforeAction(block, paragraph));
-      block.parent.apply(new RemoveChildAction(block));
-    }
-  }
-  /**
-   * Creates a new paragraph element with a text node and appends it to the current state.
-   */
-  insertDefaultParagraph() {
-    const paragraph = this.createEmptyParagraph();
-    this.currentState.apply(new AppendChildNodesAction([paragraph]));
-    this.selectionController.enqueueSelectionRangeFutureState(paragraph.nodes[0], 1);
-  }
-  /**
-   * Returns the end offset of a given node in a Rich Text Editor based on its type and text content.
-   *
-   * @param {RTENode} node - text node or image node
-   * @returns {number} Returns a number value.
-   */
-  getNodeEndOffset(node) {
-    if (node.type === 'IMAGE') {
-      return 1;
-    }
-    else if (node.type === 'TEXT') {
-      return node['text'] === '\n' ? 0 : node['text'].length;
-    }
+class InsertNodesBeforeAction extends ModifyContentAction {
+  constructor(referNode, ...nodesToBeInserted) {
+    super();
+    this.type = ModifyContentActionType.INSERT_NODES_BEFORE;
+    this.referNode = referNode;
+    this.nodesToBeInserted = nodesToBeInserted;
   }
 }
 
 /**
- * Abstract class to define strategies for processing HTML elements
- */
-class ElementToDTOStrategy {
-}
-/**
- * Class to represent the output of a strategy applied to HTML elements
+ * Replace the text node selected content to new text
+ *
+ * @example selectedNode.apply(new ReplaceSelectedTextAction(insertText))
  */
-class ElementToDTOStrategyOutput {
-  constructor(currentStrategy, currentElements) {
-    this.childrenOutput = [];
-    this.currentStrategy = currentStrategy;
-    this.currentElements = currentElements;
-  }
-  /**
-   * Set children output.
-   *
-   * @param {ElementToDTOStrategyOutput[]} childrenOutput - children outputs.
-   */
-  setChildrenOutput(childrenOutput) {
-    this.childrenOutput = childrenOutput;
-  }
-  /**
-   * Transform current output and children output to DTO
-   *
-   * @returns {Nullable<RTEContentBlock>} - DTO.
-   */
-  toDto() {
-    const currentBlock = this.currentStrategy.handle(this.currentElements);
-    if (this.childrenOutput.length > 0 && currentBlock) {
-      this.currentStrategy.appendChildBlocks(currentBlock, this.childrenOutput
-        .map((childOutput) => childOutput.toDto())
-        .filter(isNonNullable));
-    }
-    return currentBlock;
+class ReplaceSelectedTextAction extends ModifyContentAction {
+  constructor(text, currentRange) {
+    super();
+    this.type = ModifyContentActionType.REPLACE_SELECTED_TEXT;
+    this.textToBeInsert = '';
+    this.textToBeInsert = text;
+    this.currentRange = currentRange;
   }
 }
 
-/** Abstract class for block html element to RTE block dto */
-class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
+/** 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 {
   /**
-   * Generate child nodes of block element, this will inherit all annotations from parent to text node and
-   *   flat the child nodes.
-   *
-   * Example:
-   *   <li>
-   *     <u><i>text1</i></u>
-   *     <span style='font-weight: bold;'><span>text2</span></span>
-   *     text3
-   *   </li>
-   * will tranform to:
-   *   <li>
-   *     <span>text1</span> // with underline and italic annotations
-   *     <span>text2</span> // with bold annotations
-   *     <span>text3</span> // no annotations
-   *   </li>
+   * Update the state value when user type character
    *
-   * @param {HTMLElement[]} elements - Child elements.
-   * @param {VegaRTETextAnnotations | VegaRTECodeAnnotations} annotations - Parent annotations.
-   * @returns {VegaRTETextNode[]} - Text node DTO.
+   * @param {InputEvent} event - The input event object
    */
-  generateChildNodes(elements, annotations = {}) {
-    const childNodes = [];
-    elements.forEach((child) => {
-      if (child.nodeType === Node.TEXT_NODE) {
-        if (this.isInvalidTextNode(child))
-          return;
-        childNodes.push({
-          id: generateUUID(),
-          type: 'text',
-          text: String(child.textContent),
-          annotations: annotations,
-        });
+  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 {
-        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), Object.assign({}, annotations, this.generateTextNodeAnnotations(child, annotations))));
+      else if (selectedNodes[0] instanceof RTETextNode) {
+        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 === ZERO_WIDTH_SPACE &&
+            startOffset === ZERO_WIDTH_SPACE.length &&
+            cursorNode.isEmpty()) {
+            startContainer.nodeValue = '';
+            nextOffset = nextOffset - ZERO_WIDTH_SPACE.length;
+          }
+          if (cursorNode instanceof RTETextNode) {
+            updateFlag = true;
+            cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
+          }
+        }
+        updateFlag &&
+          this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(nextOffset, cursorNode['text'].length));
       }
-    });
-    return childNodes;
-  }
-  /**
-   * Generate annotations map for block element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {VegaRTEBlockAnnotations} - Text block annotations.
-   */
-  generateBlockAnnotations(element) {
-    const annotations = {};
-    const textAlign = this.getTextAlign(element);
-    const indent = this.getIndent(element);
-    if (textAlign)
-      annotations.textAlign = textAlign;
-    if (indent)
-      annotations.indent = indent;
-    return annotations;
-  }
-  /**
-   * Generate annotations map for text node element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @param {VegaRTETextAnnotations | VegaRTECodeAnnotations} parentAnnotations - parent annotations
-   * @returns {VegaRTETextAnnotations | VegaRTECodeAnnotations} - Text node annotations.
-   */
-  generateTextNodeAnnotations(element, parentAnnotations = {}) {
-    if (this.isCode(element))
-      return { code: true };
-    const annotations = {
-      bold: this.isBold(element),
-      italic: this.isItalic(element),
-      underline: this.isUnderline(element),
-      strikethrough: this.isStrikethrough(element),
-    };
-    parentAnnotations.bold && (annotations.bold = true);
-    parentAnnotations.underline && (annotations.underline = true);
-    parentAnnotations.italic && (annotations.italic = true);
-    parentAnnotations.strikethrough && (annotations.strikethrough = true);
-    const color = this.getColor(element);
-    const link = this.getLink(element);
-    if (color)
-      annotations.textColor = color;
-    if (link)
-      annotations.link = link;
-    return annotations;
-  }
-  /**
-   * Check is a invalid text node.
-   *
-   * @param {HTMLElement} element - Current node element.
-   * @returns {boolean} - boolean.
-   */
-  isInvalidTextNode(element) {
-    if (element.nodeValue && element.nodeValue.includes('\t')) {
-      const value = element.nodeValue.replace(/\n|\t/gm, '');
-      if (value.length === 0)
-        return true;
-    }
-    return false;
-  }
-  /**
-   * Is code element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {boolean} - boolean.
-   */
-  isCode(element) {
-    return (element.classList.contains('v-rte--code') ||
-      element.nodeName === 'CODE' ||
-      element.style.fontFamily === 'monospace');
-  }
-  /**
-   * Is bold element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {boolean} - boolean.
-   */
-  isBold(element) {
-    return (element.nodeName === 'STRONG' ||
-      element.nodeName === 'B' ||
-      element.style.fontWeight === 'bold' ||
-      element.style.fontWeight === '700');
-  }
-  /**
-   * Is italic element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {boolean} - boolean.
-   */
-  isItalic(element) {
-    return element.nodeName === 'I' || element.style.fontStyle === 'italic' || element.nodeName === 'EM';
-  }
-  /**
-   * Is underline element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {boolean} - boolean.
-   */
-  isUnderline(element) {
-    return (element.style.textDecoration.includes('underline') ||
-      element.nodeName === 'U' ||
-      element.nodeName === 'INS' ||
-      element.classList.contains('v-rte--underline'));
-  }
-  /**
-   * Is strikethrough element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {boolean} - boolean.
-   */
-  isStrikethrough(element) {
-    return (element.style.textDecoration.includes('line-through') ||
-      element.nodeName === 'S' ||
-      element.nodeName === 'DEL' ||
-      element.classList.contains('v-rte--strikethrough'));
-  }
-  /**
-   * Get current color of element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {Nullable<string>} - color.
-   */
-  getColor(element) {
-    var _a;
-    const color = element.style.color;
-    const hexColor = (_a = rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
-    if (hexColor) {
-      const colorSchema = RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
-      if (colorSchema)
-        return colorSchema.key;
-      return null;
     }
     else {
-      for (const color of RTE_TEXT_COLORS) {
-        if (element.style.color.includes(color.key)) {
-          return color.key;
-        }
+      // The selected nodes is multiple nodes
+      const cursorNode = this.removeSelectionRange(true);
+      if (cursorNode instanceof RTETextNode) {
+        cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
+        this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(startOffset + text.length, cursorNode.text.length));
       }
-      return null;
-    }
-  }
-  /**
-   * Get current link of element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {Nullable<VegaRTELink>} - link.
-   */
-  getLink(element) {
-    if (element.nodeName === 'A') {
-      return {
-        href: element.href,
-        groupKey: generateUUID(),
-      };
     }
-    return null;
   }
   /**
-   * Get text align of current element.
+   * Insert the text in root element when root container is empty, should create text block and text node
    *
-   * @param {HTMLElement} element - current element.
-   * @returns {Nullable<VegaRTEBlockAlignment>} - Text align.
+   * @param {string} text The insert text
+   * @returns {RTETextNode} The new create text node
    */
-  getTextAlign(element) {
-    const classList = element.classList;
-    if (classList.contains(`v-rte--horizontal-alignment-left`)) {
-      return 'left';
-    }
-    else if (classList.contains(`v-rte--horizontal-alignment-center`)) {
-      return 'center';
-    }
-    else if (classList.contains(`v-rte--horizontal-alignment-right`)) {
-      return 'right';
-    }
-    else if (classList.contains(`v-rte--horizontal-alignment-justify`)) {
-      return 'justify';
-    }
-    const style = element.style;
-    switch (style.textAlign) {
-      case 'center':
-        return 'center';
-      case 'right':
-        return 'right';
-      case 'justify':
-        return 'justify';
-      case 'left':
-        return 'left';
-      default:
-        return null;
+  insertTextToRoot(text) {
+    if (this.currentState &&
+      this.currentState.blocks[0] &&
+      this.currentState.blocks[0] instanceof RTETextBlock) {
+      const firstNode = this.currentState.blocks[0].nodes[0];
+      firstNode.apply(new UpdateTextAction(text));
+      return firstNode;
     }
   }
   /**
-   * Get indent of current element.
+   * Insert text to a line break node need a special logic if the line break has a next text node.
    *
-   * @param {HTMLElement} element - current element.
-   * @returns {Nullable<number>} - Indent.
+   * @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
    */
-  getIndent(element) {
-    const style = element.style;
-    let marginLeft;
-    if (style.marginLeft) {
-      marginLeft = style.marginLeft;
-    }
-    else if (style.margin) {
-      const margins = style.margin.split(' ');
-      switch (margins.length) {
-        case 4:
-          marginLeft = margins[3];
-          break;
-        case 2:
-        case 3:
-          marginLeft = margins[1];
-          break;
-        default:
-          marginLeft = margins[0];
-          break;
-      }
+  insertTextToLineBreakNode(lineBreakNode, text) {
+    const { startOffset, endOffset } = this.selectionController.getCurrentRange();
+    const textBlock = lineBreakNode.parentBlock;
+    const index = textBlock.nodes.indexOf(lineBreakNode);
+    if (startOffset === 0 && startOffset === endOffset && textBlock.nodes[index + 1]) {
+      const newTextNode = lineBreakNode.cloneWithText(text);
+      textBlock.apply(new InsertNodesBeforeAction(lineBreakNode, newTextNode));
+      return newTextNode;
     }
     else {
-      return null;
+      lineBreakNode.apply(new UpdateTextAction(text));
+      return lineBreakNode;
     }
-    const marginLeftNumber = Number(marginLeft.replace('px', ''));
-    return marginLeftNumber && marginLeftNumber >= 0 ? Math.floor(marginLeftNumber / 16) : null;
   }
 }
 
-/** Transform continue inline block elements to text block DTO */
-class ContinueInlineToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+/** 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 {
   /**
-   * Can be handle.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @param {number} currentIndex - Current element index.
-   * @returns {number} - can be handled element count.
+   * Create new paragraph node and add node to state value
    */
-  canHandle(elementsArray, currentIndex) {
-    let count = 0;
-    for (let i = currentIndex; i < elementsArray.length; i++) {
-      const element = elementsArray[i];
-      if (element.nodeType === Node.TEXT_NODE ||
-        (ContinueInlineToRTETextBlockStrategy.canHandleTags.includes(element.nodeName) &&
-          !(element.textContent === '' && element.querySelector('IMG')))) {
-        count++;
+  handleEvent() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks.length) {
+      if (selectedBlocks.length < 2) {
+        this.breakSingleBlock();
       }
       else {
-        break;
+        this.breakMultipleBlocks();
       }
     }
-    return count;
-  }
-  /**
-   * Parse to a text block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - Text block.
-   */
-  handle(elementsArray) {
-    const parent = elementsArray[0].parentElement;
-    const nodes = this.generateChildNodes(elementsArray, this.generateTextNodeAnnotations(parent));
-    if (nodes.length === 0)
-      return null;
-    return RTETextBlock.from({
-      id: generateUUID(),
-      type: 'paragraph',
-      nodes: nodes,
-      annotations: this.generateBlockAnnotations(parent),
-    });
-  }
-  /* istanbul ignore next */
-  /**
-   * Append child blocks.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  appendChildBlocks() { }
-  /**
-   * Should continue process to child elements.
-   *
-   * @returns {boolean} - boolean.
-   */
-  shouldProceedToElementChildren() {
-    return false;
-  }
-}
-ContinueInlineToRTETextBlockStrategy.canHandleTags = [
-  'SPAN',
-  'STRONG',
-  'CODE',
-  'I',
-  'EM',
-  'S',
-  'U',
-  'A',
-  'VEGA-RICH-TEXT-LINK-EDITOR',
-  'B',
-  'INS',
-  'DEL',
-];
-
-/** Transform ul element to list block DTO */
-class UlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
-  /**
-   * Can be handle.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @param {number} currentIndex - Current element index.
-   * @returns {number} - can be handled element count.
-   */
-  canHandle(elementsArray, currentIndex) {
-    return elementsArray[currentIndex].tagName === 'UL' ? 1 : 0;
-  }
-  /**
-   * Parse to a block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - Bullet list block.
-   */
-  handle(elementsArray) {
-    if (elementsArray[0].childNodes.length === 0)
-      return null;
-    return RTEListBlock.from({
-      id: generateUUID(),
-      type: 'bullet-list',
-      blocks: [],
-      annotations: this.generateBlockAnnotations(elementsArray[0]),
-    });
-  }
-  /**
-   * Append child list item blocks to current list block.
-   *
-   * @param {RTEListBlock} currentBlock - Current list block.
-   * @param {RTEListItemBlock[]} childBlocks - Current list item blocks.
-   */
-  appendChildBlocks(currentBlock, childBlocks) {
-    currentBlock.blocks = childBlocks;
-    childBlocks.forEach((block) => (block.parent = currentBlock));
-  }
-  /**
-   * Should continue process to child elements.
-   *
-   * @returns {boolean} - boolean.
-   */
-  shouldProceedToElementChildren() {
-    return true;
-  }
-}
-
-/** Transform li element to list item block DTO */
-class LiToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
-  /**
-   * Can be handle.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @param {number} currentIndex - Current element index.
-   * @returns {number} - can be handled element count.
-   */
-  canHandle(elementsArray, currentIndex) {
-    return elementsArray[currentIndex].tagName === 'LI' ? 1 : 0;
-  }
-  /**
-   * Parse to a list item block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - List item block.
-   */
-  handle(elementsArray) {
-    if (elementsArray[0].childNodes.length === 0)
-      return null;
-    return RTEListItemBlock.from({
-      id: generateUUID(),
-      type: 'list-item',
-      nodes: this.generateChildNodes(Array.from(elementsArray[0].childNodes).filter((item) => !['UL', 'OL'].includes(item.nodeName)), this.generateTextNodeAnnotations(elementsArray[0])),
-      annotations: this.generateBlockAnnotations(elementsArray[0]),
-    });
-  }
-  /**
-   * Append child list blocks to current list item block.
-   *
-   * @param {RTEListBlock} currentBlock - Current list item block.
-   * @param {RTEListItemBlock[]} childBlocks - Current list blocks.
-   */
-  appendChildBlocks(currentBlock, childBlocks) {
-    currentBlock.children = childBlocks.filter((block) => ['bullet-list', 'number-list'].includes(block.type));
-  }
-  /**
-   * Should continue process to child elements.
-   *
-   * @returns {boolean} - boolean.
-   */
-  shouldProceedToElementChildren() {
-    return true;
-  }
-}
-
-/** Transform inline block element to text block DTO */
-class InlineBlockToRTETextBlockStrategy extends BlockToRTEBlockStrategyAbstract {
-  /**
-   * Can be handle.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @param {number} currentIndex - Current element index.
-   * @returns {number} - can be handled element count.
-   */
-  canHandle(elementsArray, currentIndex) {
-    return [
-      'heading-1',
-      'heading-2',
-      'heading-3',
-      'heading-4',
-      'heading-5',
-      'heading-6',
-      'title',
-      'subtitle',
-    ].includes(this.getElementType(elementsArray[currentIndex]))
-      ? 1
-      : 0;
   }
   /**
-   * Parse to a text block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - Text block.
+   * Handles breaking blocks in an RTE editor based on the current selection and position.
    */
-  handle(elementsArray) {
-    const nodes = this.generateChildNodes(elementsArray);
-    if (nodes.length === 0)
-      return null;
-    return RTETextBlock.from({
-      id: generateUUID(),
-      type: this.getElementType(elementsArray[0]),
-      nodes: nodes,
-      annotations: Object.assign(Object.assign({}, this.generateBlockAnnotations(elementsArray[0])), { textStyle: this.getElementType(elementsArray[0]) }),
-    });
+  breakMultipleBlocks() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const range = this.selectionController.getCurrentRange();
+    const cursorNode = this.removeSelectionRange();
+    // If the start or end block contains a list item block, it needs to be processed separately
+    if ((selectedBlocks.length && selectedBlocks[0].type === 'list-item') ||
+      selectedBlocks[selectedBlocks.length - 1].type === 'list-item') {
+      const firstBlock = cursorNode.parentBlock;
+      const lastBlock = selectedBlocks[selectedBlocks.length - 1];
+      /**
+       * First block is list item
+       * --before--
+       * ul
+       *  - li
+       * p
+       *  - span
+       * --after--
+       * ul
+       *  - li
+       *  - li
+       */
+      /**
+       * End block is list item
+       * --before--
+       * p
+       *  - span
+       * ul
+       *  - li
+       * --after--
+       * p
+       *  - span
+       * p
+       *  - span
+       */
+      if (firstBlock.type !== lastBlock.type &&
+        range.startContainer.nodeType === range.endContainer.nodeType) {
+        firstBlock.apply(new MergeTwoBlocksNodesAction(lastBlock));
+        const splitAction = new SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
+        firstBlock.apply(splitAction);
+        this.switchCaretPositionToNextElement(splitAction.newBlock);
+        return;
+      }
+    }
+    this.selectionController.enqueueSelectionRangeFutureState(cursorNode, range.startOffset);
   }
-  /* istanbul ignore next */
-  /**
-   * Append child blocks.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  appendChildBlocks() { }
   /**
-   * Should continue process to child elements.
-   *
-   * @returns {boolean} - boolean.
+   * Handles breaking a single block in an RTE editor based on the current selection and position.
    */
-  shouldProceedToElementChildren() {
-    return false;
+  breakSingleBlock() {
+    const cursorNode = this.removeSelectionRange();
+    const currentBlock = cursorNode.parentBlock;
+    const { startOffset } = this.selectionController.getCurrentRange();
+    if (currentBlock) {
+      const breakAction = new BreakSingleBlockAction(cursorNode, startOffset);
+      currentBlock.apply(breakAction);
+      this.switchCaretPositionToNextElement(breakAction.newBlock);
+    }
   }
   /**
-   * Get node type of element.
+   * Moves the caret to the next block element in a rich text editor.
    *
-   * @param {HTMLElement} element - element.
-   * @returns {string} - node type.
+   * @param {RTEBlock} newBlock - Represents a new create block element in a rich text editor.
    */
-  getElementType(element) {
-    var _a;
-    if (element.nodeType !== Node.TEXT_NODE && element.hasAttribute('data-type')) {
-      return element.getAttribute('data-type');
-    }
-    switch ((_a = element.style) === null || _a === void 0 ? void 0 : _a.fontSize) {
-      case '36px':
-        return 'title';
-      case '28px':
-        return 'subtitle';
-      case '22px':
-        return 'heading-1';
-      case '20px':
-        return 'heading-2';
-      case '18px':
-        return 'heading-3';
-    }
-    switch (element.nodeName) {
-      case 'H1':
-        return 'heading-1';
-      case 'H2':
-        return 'heading-2';
-      case 'H3':
-        return 'heading-3';
-      case 'H4':
-        return 'heading-4';
-      case 'H5':
-        return 'heading-5';
-      case 'H6':
-        return 'heading-6';
-      default:
-        return '';
+  switchCaretPositionToNextElement(newBlock) {
+    if (newBlock && newBlock['nodes']) {
+      this.selectionController.enqueueSelectionRangeFutureState(newBlock['nodes'][0], 0);
     }
   }
 }
 
-/** Transform img element to image block DTO */
-class ImgToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
-  /**
-   * Can be handle.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @param {number} currentIndex - Current element index.
-   * @returns {number} - can be handled element count.
-   */
-  canHandle(elementsArray, currentIndex) {
-    return elementsArray[currentIndex].tagName === 'IMG' ? 1 : 0;
-  }
-  /**
-   * Parse to a image block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - Image block.
-   */
-  handle(elementsArray) {
-    const element = elementsArray[0];
-    return RTEImageBlock.from({
-      id: generateUUID(),
-      type: 'image',
-      nodes: [
-        {
-          id: generateUUID(),
-          type: 'image',
-          url: element.src,
-          annotations: {
-            size: 'md',
-            alt: element.alt,
-          },
-        },
-      ],
-      annotations: this.generateBlockAnnotations(element),
-    });
-  }
-  /* istanbul ignore next */
-  /**
-   * Append child blocks.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  appendChildBlocks() { }
-  /**
-   * Should continue process to child elements.
-   *
-   * @returns {boolean} - boolean.
-   */
-  shouldProceedToElementChildren() {
-    return false;
+/**
+ * Split the block with a split point node
+ *
+ * @example block.apply(new SplitBlockWithNodeAction(node, offset))
+ */
+class LineBreakSingleBlockAction extends ModifyContentAction {
+  constructor(startContainerNode, startOffset) {
+    super();
+    this.type = ModifyContentActionType.LINE_BREAK_SINGLE_BLOCK;
+    this.startContainerNode = startContainerNode;
+    this.startOffset = startOffset;
   }
 }
 
-/** Transform vega-rich-text-image-editor element to image block DTO */
-class VegaImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
-  /**
-   * Can be handle.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @param {number} currentIndex - Current element index.
-   * @returns {number} - can be handled element count.
-   */
-  canHandle(elementsArray, currentIndex) {
-    return elementsArray[currentIndex].tagName === 'VEGA-RICH-TEXT-IMAGE-EDITOR' ? 1 : 0;
+/**
+ * Split the block with a split point node
+ *
+ * @example block.apply(new SplitBlockWithNodeAction(node, offset))
+ */
+class lineBreakMultipleBlocksAction extends ModifyContentAction {
+  constructor(selectedBlocks) {
+    super();
+    this.type = ModifyContentActionType.LINE_BREAK_MULTIPLE_BLOCKS;
+    this.selectedBlocks = selectedBlocks;
   }
+}
+
+/** User press shift + enter will tigger this callback */
+class InsertLineBreakHandler extends BaseHandler {
   /**
-   * Parse to a image block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - Image block.
+   * Create new line break node and add node to state value
    */
-  handle(elementsArray) {
-    const element = elementsArray[0];
-    const image = element.querySelector('img');
-    if (isNonNullable(image)) {
-      return RTEImageBlock.from({
-        id: generateUUID(),
-        type: 'image',
-        nodes: [
-          {
-            id: generateUUID(),
-            type: 'image',
-            url: image.src,
-            annotations: {
-              size: element.size || 'md',
-              alt: element.alt,
-            },
-          },
-        ],
-        annotations: this.generateBlockAnnotations(element),
-      });
+  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();
+      }
     }
   }
-  /* istanbul ignore next */
-  /**
-   * Append child blocks.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  appendChildBlocks() { }
   /**
-   * Should continue process to child elements.
-   *
-   * @returns {boolean} - boolean.
+   * Insert the \n in text element when root container is empty, should create text block and text node
+   * <p>
+   *  <span></span>
+   *  <span></span>
+   * </p>
    */
-  shouldProceedToElementChildren() {
-    return false;
+  breakNewBlock() {
+    if (this.currentState &&
+      this.currentState.blocks[0] &&
+      this.currentState.blocks[0] instanceof RTETextBlock) {
+      const lineBreakAction = new LineBreakSingleBlockAction(this.currentState.blocks[0].nodes[0], 0);
+      this.currentState.blocks[0].apply(lineBreakAction);
+      this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
+    }
   }
-}
-
-/** Transform ol element to list block DTO */
-class OlToRTEListBlockStrategy extends BlockToRTEBlockStrategyAbstract {
   /**
-   * Can be handle.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @param {number} currentIndex - Current element index.
-   * @returns {number} - can be handled element count.
+   * 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>
    */
-  canHandle(elementsArray, currentIndex) {
-    return elementsArray[currentIndex].tagName === 'OL' ? 1 : 0;
+  breakSingleBlock() {
+    const range = this.selectionController.getCurrentRange();
+    const cursorNode = this.removeSelectionRange();
+    const currentBlock = cursorNode.parentBlock;
+    if (currentBlock) {
+      const lineBreakAction = new LineBreakSingleBlockAction(cursorNode, range.startOffset);
+      currentBlock.apply(lineBreakAction);
+      this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
+    }
   }
   /**
-   * Parse to a number list block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - Number list block.
+   * Handles breaking blocks in an RTE editor based on the current selection and position.
    */
-  handle(elementsArray) {
-    if (elementsArray[0].childNodes.length === 0)
-      return null;
-    return RTEListBlock.from({
-      id: generateUUID(),
-      type: 'number-list',
-      blocks: [],
-      annotations: this.generateBlockAnnotations(elementsArray[0]),
-    });
+  breakMultipleBlocks() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const cursorNode = this.removeSelectionRange();
+    const lineBreakAction = new lineBreakMultipleBlocksAction(selectedBlocks);
+    cursorNode.parentBlock.apply(lineBreakAction);
+    this.switchCaretPositionToSpecifiedNode(lineBreakAction.lineBreakNode);
   }
   /**
-   * Append child list item blocks to current list block.
+   * Moves the caret to the next node element in a rich text editor.
    *
-   * @param {RTEListBlock} currentBlock - Current list block.
-   * @param {RTEListItemBlock[]} childBlocks - Current list item blocks.
+   * @param {RTENode} lineBreakNode - Represents a node element in a rich text editor.
    */
-  appendChildBlocks(currentBlock, childBlocks) {
-    currentBlock.blocks = childBlocks;
-    childBlocks.forEach((block) => (block.parent = currentBlock));
+  switchCaretPositionToSpecifiedNode(lineBreakNode) {
+    this.selectionController.enqueueSelectionRangeFutureState(this.getNextRTENode(lineBreakNode), 0);
   }
   /**
-   * Should continue process to child elements.
+   * Returns the next sibling node of a given block element in a rich text editor.
    *
-   * @returns {boolean} - boolean.
+   * @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.
    */
-  shouldProceedToElementChildren() {
-    return true;
+  getNextRTENode(lineBreakNode) {
+    const index = lineBreakNode.parentBlock['nodes'].indexOf(lineBreakNode);
+    const nextNode = lineBreakNode.parentBlock['nodes'][index + 1];
+    return nextNode || lineBreakNode;
   }
 }
 
-/** Transform img in span or other inline element to image block DTO */
-class SpanImageToRTEImageBlockStrategy extends BlockToRTEBlockStrategyAbstract {
-  /**
-   * Can be handle.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @param {number} currentIndex - Current element index.
-   * @returns {number} - can be handled element count.
-   */
-  canHandle(elementsArray, currentIndex) {
-    const element = elementsArray[currentIndex];
-    return element.nodeType === Node.ELEMENT_NODE &&
-      element.textContent === '' &&
-      element.querySelector('img')
-      ? 1
-      : 0;
-  }
-  /**
-   * Parse to a image block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - Image block.
-   */
-  handle(elementsArray) {
-    const element = elementsArray[0].querySelector('img');
-    return RTEImageBlock.from({
-      id: generateUUID(),
-      type: 'image',
-      nodes: [
-        {
-          id: generateUUID(),
-          type: 'image',
-          url: element.src,
-          annotations: {
-            size: 'md',
-            alt: element.alt,
-          },
-        },
-      ],
-      annotations: this.generateBlockAnnotations(element),
-    });
-  }
-  /* istanbul ignore next */
-  /**
-   * Append child blocks.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  appendChildBlocks() { }
-  /**
-   * Should continue process to child elements.
-   *
-   * @returns {boolean} - boolean.
-   */
-  shouldProceedToElementChildren() {
-    return false;
+/**
+ * Delete text or image when press delete
+ *
+ * @example currentBlock.apply(new DeleteBlockContentAction(startContainerNode, startOffset))
+ */
+class DeleteBlockContentAction extends ModifyContentAction {
+  constructor(startContainerNode, startOffset) {
+    super();
+    this.type = ModifyContentActionType.DELETE_BLOCK_CONTENT;
+    this.startContainerNode = startContainerNode;
+    this.startOffset = startOffset;
   }
 }
 
-/** Transform child element of UL element which are not LI element to list item block DTO */
-class ULNotLiChildToRTEListItemBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+/** Handles the deletion of content within a VegaRTE editor. User press backspace or delete will trigger this method */
+class DeleteContentHandler extends BaseHandler {
   /**
-   * Can be handle.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @param {number} currentIndex - Current element index.
-   * @returns {number} - can be handled element count.
+   * Delete the selected node from the current state.
    */
-  canHandle(elementsArray, currentIndex) {
-    const element = elementsArray[currentIndex];
-    const parent = element.parentElement;
-    return element.nodeName !== 'LI' && parent && ['UL', 'OL'].includes(parent.nodeName) ? 1 : 0;
+  handleEvent() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks.length < 2) {
+      this.deleteContentWithSingleBlock();
+    }
+    else {
+      this.deleteContentWithMultipleNodes();
+    }
   }
   /**
-   * Parse to a list item block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - List item block.
+   * Handles the deletion of content within a single block in an RTE editor.
    */
-  handle(elementsArray) {
-    const nodes = this.generateChildNodes(elementsArray);
-    if (nodes.length === 0)
-      return null;
-    return RTEListItemBlock.from({
-      id: generateUUID(),
-      type: 'list-item',
-      nodes: nodes,
-      annotations: {},
-    });
+  deleteContentWithSingleBlock() {
+    const range = this.selectionController.getCurrentRange();
+    const { startOffset, endOffset, startContainer, endContainer } = range;
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    if (startOffset !== endOffset || startContainer !== endContainer) {
+      this.deleteContentWithMultipleNodes();
+    }
+    else if (selectedBlocks[0]) {
+      const deleteAction = new DeleteBlockContentAction(selectedNodes[0], startOffset);
+      selectedBlocks[0].apply(deleteAction);
+      if (deleteAction.previousNode) {
+        const nextOffset = deleteAction.previousNode === selectedNodes[0]
+          ? Math.max(0, startOffset - 1)
+          : this.getNodeEndOffset(deleteAction.previousNode);
+        this.selectionController.enqueueSelectionRangeFutureState(deleteAction.previousNode, nextOffset);
+      }
+      else if (deleteAction.nextNode) {
+        this.selectionController.enqueueSelectionRangeFutureState(deleteAction.nextNode, 0);
+      }
+      else if (this.currentState.blocks.length === 0) {
+        // Add a empty paragraph if delete all content to make sure the caret position
+        this.insertDefaultParagraph();
+      }
+    }
   }
-  /* istanbul ignore next */
   /**
-   * Append child blocks.
-   */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  appendChildBlocks() { }
-  /**
-   * Should continue process to child elements.
-   *
-   * @returns {boolean} - boolean.
+   * Deletes the content within multiple nodes selected by the user.
    */
-  shouldProceedToElementChildren() {
-    return false;
-  }
-}
-
-/** Element to DTO processor */
-class ElementToDtoStrategyProcessor {
-  constructor() {
-    this.elementStrategies = [
-      new UlToRTEListBlockStrategy(),
-      new OlToRTEListBlockStrategy(),
-      new ULNotLiChildToRTEListItemBlockStrategy(),
-      new LiToRTEListItemBlockStrategy(),
-      new InlineBlockToRTETextBlockStrategy(),
-      new ImgToRTEImageBlockStrategy(),
-      new VegaImageToRTEImageBlockStrategy(),
-      new SpanImageToRTEImageBlockStrategy(),
-      new ContinueInlineToRTETextBlockStrategy(),
-    ];
+  deleteContentWithMultipleNodes() {
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    const cursorNode = this.removeSelectionRange(true);
+    const lastSelectedNode = selectedNodes[selectedNodes.length - 1];
+    if (selectedNodes.length > 1 &&
+      lastSelectedNode instanceof RTETextNode &&
+      lastSelectedNode.isEmpty()) {
+      lastSelectedNode.parentBlock.apply(new RemoveChildAction(lastSelectedNode));
+    }
+    this.convertFirstBlockToParagraph(cursorNode.parentBlock);
   }
   /**
-   * Transform process.
+   * If the first block is not paragraph, convert the block to paragraph after delete all text
    *
-   * @param {HTMLElement[]} elements - Current elements.
-   * @returns {ElementToDTOStrategyOutput[]} - outputs.
+   * @param {RTEBlock} block - The first block instance
    */
-  process(elements) {
-    const outputs = [];
-    for (let i = 0; i < elements.length; i++) {
-      if (this.isInvalidElement(elements[i]))
-        continue;
-      let canHandledCount = 0;
-      for (const strategy of this.elementStrategies) {
-        canHandledCount = strategy.canHandle(elements, i);
-        if (canHandledCount > 0) {
-          const handledElements = elements.slice(i, i + canHandledCount);
-          const output = new ElementToDTOStrategyOutput(strategy, handledElements);
-          if (canHandledCount === 1 && strategy.shouldProceedToElementChildren()) {
-            output.setChildrenOutput(this.process(Array.from(handledElements[0].childNodes)));
-          }
-          outputs.push(output);
-          i += canHandledCount - 1;
-          break;
-        }
-      }
-      if (canHandledCount === 0 && i < elements.length) {
-        const elementChildren = Array.from(elements[i].childNodes);
-        const childrenOutputs = this.process(Array.from(elementChildren));
-        if (childrenOutputs.length > 0) {
-          outputs.push(...childrenOutputs);
-        }
-      }
+  convertFirstBlockToParagraph(block) {
+    const firstBlock = this.currentState.blocks[0];
+    if (firstBlock === block &&
+      block instanceof RTETextBlock &&
+      block.nodes.length === 1 &&
+      block.nodes[0].isEmpty() &&
+      block.type !== 'paragraph') {
+      const paragraph = this.createEmptyParagraph();
+      paragraph.apply(new ReplaceChildNodesAction(block.nodes));
+      block.parent.apply(new InsertBlocksBeforeAction(block, paragraph));
+      block.parent.apply(new RemoveChildAction(block));
     }
-    return outputs;
   }
   /**
-   * Checks if the given element is valid to parse.
+   * Creates a new paragraph element with a text node and appends it to the current state.
+   */
+  insertDefaultParagraph() {
+    const paragraph = this.createEmptyParagraph();
+    this.currentState.apply(new AppendChildNodesAction([paragraph]));
+    this.selectionController.enqueueSelectionRangeFutureState(paragraph.nodes[0], 1);
+  }
+  /**
+   * Returns the end offset of a given node in a Rich Text Editor based on its type and text content.
    *
-   * @param {HTMLElement} element - The pasted element.
-   * @returns {boolean} Is valid
+   * @param {RTENode} node - text node or image node
+   * @returns {number} Returns a number value.
    */
-  isInvalidElement(element) {
-    if (element.nodeType === Node.COMMENT_NODE)
-      return true;
-    return ['META', 'BUTTON', 'STYLE'].includes(element.nodeName);
+  getNodeEndOffset(node) {
+    if (node.type === 'IMAGE') {
+      return 1;
+    }
+    else if (node.type === 'TEXT') {
+      return node['text'] === '\n' ? 0 : node['text'].length;
+    }
   }
 }
 
@@ -3798,10 +2266,6 @@ class ElementToDtoStrategyProcessor {
  * Handle user paste
  */
 class InsertPasteHandler extends BaseHandler {
-  constructor() {
-    super(...arguments);
-    this.elementToDTOProcessor = new ElementToDtoStrategyProcessor();
-  }
   /**
    * Update the state value when user paste html elements.
    *
@@ -3853,8 +2317,10 @@ class InsertPasteHandler extends BaseHandler {
     const cursorNode = this.removeSelectionRange();
     /* istanbul ignore next */
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parentBlock;
-    currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, ...blocks));
-    this.switchCaretPositionToNextElement(currentBlock);
+    if (currentBlock) {
+      currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, ...blocks));
+      this.switchCaretPositionToNextElement(currentBlock);
+    }
   }
   /**
    * Format and parse elements from user paste.
@@ -3863,11 +2329,14 @@ class InsertPasteHandler extends BaseHandler {
    * @returns {RTEContentBlock[]} - RTEContentBlock.
    */
   parsePastedElements(event) {
-    const pastedHTML = event.dataTransfer.getData('text/html');
+    let pastedHTML = event.dataTransfer.getData('text/html');
+    if (!pastedHTML) {
+      const pastedText = event.dataTransfer.getData('text/plain');
+      pastedHTML = this.parsePlainText(pastedText);
+    }
     const tempContainer = document.createElement('div');
     tempContainer.innerHTML = pastedHTML;
-    return this.elementToDTOProcessor
-      .process(Array.from(tempContainer.childNodes))
+    return ElementToDtoStrategyProcessor.process(Array.from(tempContainer.childNodes))
       .filter(Boolean)
       .map((output) => output.toDto())
       .filter(Boolean);
@@ -3882,9 +2351,23 @@ class InsertPasteHandler extends BaseHandler {
       this.selectionController.enqueueSelectionRangeFutureState(newBlock['nodes'][0], 0);
     }
   }
+  /**
+   * Parses the content of a plain text and formats it into HTML.
+   *
+   * @param {string} content - The content of plain text.
+   * @returns {string} - The formatted HTML string.
+   */
+  parsePlainText(content) {
+    const lines = content.split('\n');
+    return lines
+      .map((line) => {
+      return `<span>${line}</span>`;
+    })
+      .join('<span>\n</span>');
+  }
 }
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$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;
@@ -3909,7 +2392,8 @@ class UserInputController extends VegaSlimmer {
       e.preventDefault();
       this.initValueIfEmpty();
       // The insertCompositionText type input event can not be prevented, so we process the current action by insertCompositionTextController.
-      if (inputType === 'insertCompositionText') {
+      // If the focus node is a non-editable element, we do not process the input event.
+      if (inputType === 'insertCompositionText' || this.isFocusNodeNonEditable()) {
         return;
       }
       this.insertCompositionTextController.removeObserver();
@@ -3937,7 +2421,7 @@ class UserInputController extends VegaSlimmer {
           break;
       }
       if (updateFlag) {
-        this.notifyComponentFlushValue();
+        void this.valueController.flushChanges(this.value);
       }
     };
   }
@@ -3972,12 +2456,6 @@ class UserInputController extends VegaSlimmer {
     }
     return this.editableElementRef;
   }
-  /**
-   * Notifies a change manager with the host and value details and logs the current value.
-   */
-  notifyComponentFlushValue() {
-    void this.valueController.flushChanges(this.value);
-  }
   /**
    * Prevents the default behavior of a drag event.
    *
@@ -3998,29 +2476,46 @@ class UserInputController extends VegaSlimmer {
       void this.valueController.flushChanges(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(RTECodeBlock.CODE_BLOCK_PLACEHOLDER_CLASS_NAME));
+    }
+    return false;
+  }
 }
-__decorate$d([
+__decorate$f([
   MapToComponentField()
 ], UserInputController.prototype, "host", void 0);
-__decorate$d([
+__decorate$f([
   MapToComponentField()
 ], UserInputController.prototype, "value", void 0);
-__decorate$d([
+__decorate$f([
   MapToComponentField()
 ], UserInputController.prototype, "valueController", void 0);
-__decorate$d([
+__decorate$f([
   MapToComponentField()
 ], UserInputController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$d([
+__decorate$f([
   MapToComponentField()
 ], UserInputController.prototype, "selectionController", void 0);
-__decorate$d([
+__decorate$f([
   MapToComponentField()
 ], UserInputController.prototype, "insertCompositionTextController", void 0);
-__decorate$d([
+__decorate$f([
   MapToComponentMethod('componentDidLoad')
 ], UserInputController.prototype, "addActionListener", null);
-__decorate$d([
+__decorate$f([
   MapToComponentMethod('disconnectedCallback')
 ], UserInputController.prototype, "removeActionListener", null);
 
@@ -4040,7 +2535,7 @@ class InsertImageToBlockAction extends ModifyContentAction {
   }
 }
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4129,26 +2624,26 @@ class InsertImageController extends VegaSlimmer {
     }
   }
 }
-__decorate$c([
+__decorate$e([
   MapToComponentField()
 ], InsertImageController.prototype, "selectionController", void 0);
-__decorate$c([
+__decorate$e([
   MapToComponentField()
 ], InsertImageController.prototype, "value", void 0);
-__decorate$c([
+__decorate$e([
   MapToComponentField()
 ], InsertImageController.prototype, "valueController", void 0);
-__decorate$c([
+__decorate$e([
   MapToComponentField()
 ], InsertImageController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$c([
+__decorate$e([
   MapToComponentMethod('componentDidLoad')
 ], InsertImageController.prototype, "registerObserver", null);
-__decorate$c([
+__decorate$e([
   MapToComponentMethod('disconnectedCallback')
 ], InsertImageController.prototype, "unRegisterObserver", null);
 
-var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4204,20 +2699,20 @@ class FocusController extends VegaSlimmer {
     this.selectionController.setSelectionRange(range);
   }
 }
-__decorate$b([
+__decorate$d([
   MapToComponentField()
 ], FocusController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$b([
+__decorate$d([
   MapToComponentField()
 ], FocusController.prototype, "selectionController", void 0);
-__decorate$b([
+__decorate$d([
   MapToComponentField()
 ], FocusController.prototype, "valueController", void 0);
-__decorate$b([
+__decorate$d([
   MapToComponentField()
 ], FocusController.prototype, "value", void 0);
 
-var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4257,14 +2752,14 @@ class TextNodeColorController extends VegaSlimmer {
     return true;
   }
 }
-__decorate$a([
+__decorate$c([
   MapToComponentMethod('connectedCallback')
 ], TextNodeColorController.prototype, "connectedCallback", null);
-__decorate$a([
+__decorate$c([
   MapToComponentMethod('disconnectedCallback')
 ], TextNodeColorController.prototype, "disconnectResizeObserver", null);
 
-var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4472,35 +2967,35 @@ class InsertCompositionTextController extends VegaSlimmer {
     this.editableElementRef.dispatchEvent(inputEvent);
   }
 }
-__decorate$9([
+__decorate$b([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "selectionController", void 0);
-__decorate$9([
+__decorate$b([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "host", void 0);
-__decorate$9([
+__decorate$b([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "value", void 0);
-__decorate$9([
+__decorate$b([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "valueController", void 0);
-__decorate$9([
+__decorate$b([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "userInputController", void 0);
-__decorate$9([
+__decorate$b([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$9([
+__decorate$b([
   MapToComponentMethod('componentDidLoad')
 ], InsertCompositionTextController.prototype, "addCompositionTextEventListener", null);
-__decorate$9([
+__decorate$b([
   MapToComponentMethod('disconnectedCallback')
 ], InsertCompositionTextController.prototype, "removeCompositionTextEventListener", null);
-__decorate$9([
+__decorate$b([
   MapToComponentMethod('componentDidRender')
 ], InsertCompositionTextController.prototype, "reConnectObserver", null);
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4558,7 +3053,10 @@ class DeleteSelectedNodesController extends VegaSlimmer {
     if (selectedNodes.length > 1) {
       // Remove all selected nodes except start node and end node(the end image node will be removed), the start node need to get the index of the block
       const shouldRemovedItems = selectedNodes.filter((item) => {
-        if (item.type !== 'IMAGE') {
+        if (item instanceof RTECodeBlockNode) {
+          return item !== startNode;
+        }
+        else if (item.type !== 'IMAGE') {
           return item !== startNode && item !== endNode;
         }
         else {
@@ -4572,7 +3070,8 @@ class DeleteSelectedNodesController extends VegaSlimmer {
     this.removeRangeStartAndEndSelectedText();
     /**
      * if the range start node is image and the item is selected, so we need remove the image item, the image block will be removed if the item is the only item.
-     * but before remove the image block, we need insert a paragraph to make sure the start block and start node could be get correct before insert text or break paragraph action
+     * but before remove the image block, we need insert a paragraph to make sure the start block and start node could be get correct before insert text or break paragraph action.
+     * the code block node should do the same logic.
      */
     if (startNode instanceof RTEImageNode &&
       startOffset !== 1 &&
@@ -4590,6 +3089,12 @@ class DeleteSelectedNodesController extends VegaSlimmer {
         return startNode.parentBlock.nodes[0];
       }
     }
+    else if (startNode instanceof RTECodeBlockNode) {
+      const paragraph = this.createEmptyParagraph();
+      startNode.parentBlock.parent.apply(new InsertBlocksBeforeAction(startNode.parentBlock, paragraph));
+      startNode.parentBlock.apply(new RemoveChildAction(startNode));
+      return paragraph.nodes[0];
+    }
     return startNode;
   }
   /**
@@ -4639,7 +3144,9 @@ class DeleteSelectedNodesController extends VegaSlimmer {
               endRTENode.parentBlock.apply(new RemoveChildAction(endRTENode.parentBlock.nodes[0]));
             }
           }
-          if (startRTENode.parentBlock !== endRTENode.parentBlock) {
+          if (startRTENode instanceof RTETextNode &&
+            endRTENode instanceof RTETextNode &&
+            startRTENode.parentBlock !== endRTENode.parentBlock) {
             startRTENode.parentBlock.apply(new AppendChildNodesAction(endBlock.nodes));
             endBlock.nodes = [];
           }
@@ -4660,26 +3167,28 @@ class DeleteSelectedNodesController extends VegaSlimmer {
   shouldMergeTextNode(nodeA, nodeB) {
     const { annotations: annotationsA } = nodeA.toJSON();
     const { annotations: annotationsB } = nodeB.toJSON();
-    return JSON.stringify(annotationsA) === JSON.stringify(annotationsB);
+    return (nodeA instanceof RTETextNode &&
+      nodeB instanceof RTETextNode &&
+      JSON.stringify(annotationsA) === JSON.stringify(annotationsB));
   }
 }
-__decorate$8([
+__decorate$a([
   MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "host", void 0);
-__decorate$8([
+__decorate$a([
   MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "selectionController", void 0);
-__decorate$8([
+__decorate$a([
   MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "value", void 0);
-__decorate$8([
+__decorate$a([
   MapToComponentMethod('connectedCallback')
 ], DeleteSelectedNodesController.prototype, "addDeleteObserver", null);
-__decorate$8([
+__decorate$a([
   MapToComponentMethod('disconnectedCallback')
 ], DeleteSelectedNodesController.prototype, "removeDeleteObserver", null);
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$9 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4793,26 +3302,227 @@ class HistoryController extends KeyboardManagerSlimmer {
     ];
   }
 }
-__decorate$7([
+__decorate$9([
   MapToComponentField()
 ], HistoryController.prototype, "host", void 0);
-__decorate$7([
+__decorate$9([
   MapToComponentField()
 ], HistoryController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$7([
+__decorate$9([
   MapToComponentField()
 ], HistoryController.prototype, "valueController", void 0);
-__decorate$7([
+__decorate$9([
   MapToComponentField()
 ], HistoryController.prototype, "value", void 0);
-__decorate$7([
+__decorate$9([
   MapToComponentField()
 ], HistoryController.prototype, "selectionController", void 0);
-__decorate$7([
+__decorate$9([
   MapToComponentMethod('componentDidLoad')
 ], HistoryController.prototype, "registerInitState", null);
 
-const vegaRichTextEditorCss = ":host{display:block}:host vega-field-label{margin-bottom:8px}:host vega-text{margin-bottom:16px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container{display:flex;box-sizing:content-box;position:relative;box-sizing:content-box;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));margin-top:12px;overflow:auto;resize:vertical;padding-top:12px;padding-right:16px;padding-bottom:32px;padding-left:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-editor-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-editor-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-editor-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .rich-text-editor-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .rich-text-editor-container:focus-within{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset: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}";
+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 ModifyContentAction {
+  constructor(selectedBlocks) {
+    super();
+    this.type = ModifyContentActionType.TRANSFORM_TO_CODE_BLOCK;
+    this.selectedBlocks = selectedBlocks;
+  }
+}
+
+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;
+};
+/**
+ * The code block toolbar button slimmer.
+ */
+class CodeBlockToolbarButtonSlimmer extends 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.nodes[0], 0);
+    }
+  }
+  /**
+   * The button will be selected if the selected blocks all code block.
+   *
+   * @returns {boolean} - The code block should selected or not.
+   */
+  isSelected() {
+    const selectBlocks = this.selectionController.getSelectedBlocks();
+    if (selectBlocks.length && selectBlocks.every((block) => block.type === 'code-block')) {
+      return true;
+    }
+    return false;
+  }
+  isDisabled() {
+    const selectBlocks = this.selectionController.getSelectedBlocks();
+    return (super.isDisabled() ||
+      selectBlocks.some((block) => block.type === 'image' || block.type === 'list-item'));
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'rectangle-code': rectangleCode });
+})();
+__decorate$8([
+  MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$8([
+  MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "valueController", void 0);
+__decorate$8([
+  MapToComponentField()
+], CodeBlockToolbarButtonSlimmer.prototype, "value", void 0);
+
+/**
+ * The rich text internal code block selection controller.
+ */
+class InternalCodeBlockSelectionController extends 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, range) {
+    const codeBlockNode = codeBlock.nodes[0];
+    const entityDom = stateEntityRenderingRegistry.getDOMByEntity(codeBlockNode);
+    return (codeBlock.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 = stateEntityRenderingRegistry.getDOMByEntity(node);
+    if (entityDom) {
+      void entityDom.doFocus();
+    }
+  }
+}
+
+const fileCode = {
+  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="M64 464c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H224v80c0 17.7 14.3 32 32 32h80V448c0 8.8-7.2 16-16 16H64zM64 0C28.7 0 0 28.7 0 64V448c0 35.3 28.7 64 64 64H320c35.3 0 64-28.7 64-64V154.5c0-17-6.7-33.3-18.7-45.3L274.7 18.7C262.7 6.7 246.5 0 229.5 0H64zm97 289c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L79 303c-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-31zM257 255c-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$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;
+};
+class SourceEditToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'file-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') {
+      const sourceCode = sourceViewValue.replace(/[\t\n]/g, '');
+      await this.valueController.flushChanges(VegaRTEContent.fromHtml(sourceCode));
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'file-code': fileCode });
+})();
+__decorate$7([
+  MapToComponentField({ writable: true })
+], SourceEditToolbarButtonSlimmer.prototype, "sourceView", void 0);
+__decorate$7([
+  MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$7([
+  MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "valueController", void 0);
+__decorate$7([
+  MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "vegaRichTextEditorRenderer", void 0);
+
+const vegaRichTextEditorCss = ":host{display:block}:host vega-field-label{margin-bottom:8px}:host vega-text{margin-bottom:16px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container{display:flex;box-sizing:content-box;position:relative;box-sizing:content-box;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));margin-top:12px;overflow:auto;resize:vertical;padding-top:12px;padding-right:16px;padding-bottom:32px;padding-left:16px}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-editor-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-editor-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-editor-container{font-family:\"Inter\", sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0px}}:host .rich-text-editor-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .rich-text-editor-container:focus-within{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .rich-text-editor-container.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));cursor:not-allowed}:host .rich-text-editor-container.disabled:hover,:host .rich-text-editor-container.disabled:focus-within{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host .rich-text-editor-container.disabled:focus-within{outline:none}:host .rich-text-editor-container.disabled vega-rich-text-content{pointer-events:none;opacity:0.35}:host .rich-text-editor-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .rich-text-editor-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .rich-text-editor-container.error:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}:host .rich-text-editor-container .text-editor-counter{position:absolute;bottom:8px;right:8px;display:flex;padding-left:4px;padding-right:4px;padding-top:2px;padding-bottom:2px;border-radius:4px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));background-color:rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container .text-editor-counter.counter-exceed-max-length{background-color:rgba(var(--v-bg-textarea-counter-exceed-max-length, 214, 46, 81))}.toolbar-btn-group{display:flex;justify-content:center;align-items:center}.toolbar-btn-group>*:not(:first-child):not(:last-child) ::part(rich-text-editor-toolbar-button){border-radius:0px}.toolbar-btn-group>*:first-child:not(:last-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:4px;border-bottom-left-radius:4px;border-top-right-radius:0px;border-bottom-right-radius:0px}.toolbar-btn-group>*:last-child:not(:first-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:4px;border-bottom-right-radius:4px}.toolbar-btn-group>*:not(:first-child) ::part(rich-text-editor-toolbar-button){margin-left:-1px}.toolbar-btn-group .toolbar-btn-color-preview-box{display:flex;border:1px solid rgba(var(--v-border-chip, 205, 209, 211, 1));box-sizing:border-box;border-radius:4px;width:16px;height:16px;justify-content:center;align-items:center;margin-left:6px}.toolbar-btn-group .toolbar-btn-color-preview-box.disabled{opacity:0.35}.toolbar-btn-group .toolbar-btn-link-wrapper{position:relative}.toolbar-btn-group .toolbar-btn-link-wrapper vega-rich-text-link-editor{position:absolute;bottom:0;left:0;right:0}.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;margin-top:12px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-hidden{display:none !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;
@@ -4868,6 +3578,8 @@ const VegaRichTextEditor = class {
     this.lessIndentToolbarButtonSlimmer = new LessIndentToolbarButtonSlimmer();
     this.bulletsNumbersToolbarButtonSlimmer = new BulletsNumbersToolbarButtonSlimmer();
     this.horizontalAlignmentToolbarButtonSlimmer = new HorizontalAlignmentToolbarButtonSlimmer();
+    this.codeBlockToolbarButtonSlimmer = new CodeBlockToolbarButtonSlimmer();
+    this.sourceEditToolbarButtonSlimmer = new SourceEditToolbarButtonSlimmer();
     this.placeholderNotifySlimmer = createSubStateNotifySlimmer(VegaRichTextEditor, 'placeholder', 'watchPlaceholder');
     this.disabledNotifySlimmer = createSubStateNotifySlimmer(VegaRichTextEditor, 'richTextContentEditable', 'watchRichTextContentEditable');
     this.richTextContentController = new RichTextContentController(this);
@@ -4879,9 +3591,11 @@ const VegaRichTextEditor = class {
     this.textNodeColorController = new TextNodeColorController();
     this.deleteSelectedNodesController = new DeleteSelectedNodesController();
     this.historyController = new HistoryController();
+    this.internalCodeBlockSelectionController = new InternalCodeBlockSelectionController();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
+    this.sourceView = false;
     /**
      * Specifies the label for the rich text editor.
      *
@@ -5073,6 +3787,12 @@ __decorate$6([
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "sourceEditToolbarButtonSlimmer", void 0);
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "placeholderNotifySlimmer", void 0);
@@ -5106,6 +3826,9 @@ __decorate$6([
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "historyController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "internalCodeBlockSelectionController", void 0);
 VegaRichTextEditor.style = vegaRichTextEditorCss;
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {