@globalpayments/vega 2.58.0 → 2.59.0

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

@@ -1,62 +1,180 @@
-import { h, H as Host, F as Fragment, r as registerInstance, c as createEvent, g as getElement } from './index-d0a47531.js';
+import { h, H as Host, F as Fragment, r as registerInstance, c as createEvent, g as getElement } from './index-057d0f70.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-a84cc93e.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.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-6374611f.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-4072659b.js';
-import { b as ToolbarButtonSlimmer, I as ImageAnnotationAction, T as TextNodeRenderingRegistry, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-1e88f5a0.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-202655e7.js';
+import { V as VegaInternalComponentDidRender, b as VegaInternalRichTextEditorFlushChanges, y as VegaInternalRichTextEditDeleteSelectedNodes, z as VegaInternalRichTextImageClick, A as VegaInternalRichTextImageDeleteButtonClicked, s as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-b7c865de.js';
+import { R as RTEDTORendererManager, V as VisualModeToolbarButtonSlimmer, I as ImageAnnotationAction, T as TextNodeRenderingRegistry, b as ToolbarButtonSlimmer, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-215f92d6.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-7eac52c8.js';
-import { g as RTETextNode, J as BoldAnnotationAction, N as NodeAnnotationTypeEnum, G as RTECodeBlockNode, T as TextSplittableAction, K as ItalicAnnotation, O as UnderlineAnnotation, d as RTETextBlock, P as TextStyleAnnotationAction, Q as TextStyleAnnotation, V as BoldAnnotation, W as BlockAnnotationTypeEnum, X as ClearFormattingAnnotationAction, Y as CodeAnnotationAction, _ as StrikethroughAnnotation, D as SelectionChangeAction, L as LinkAnnotationAction, H as AnnotationAction, $ as IndentAnnotation, a as RTEImageNode, M as ModifyContentAction, f as ModifyContentActionType, a0 as HorizontalAlignmentAnnotation, c as AppendChildNodesAction, Z as ZERO_WIDTH_SPACE, a1 as UpdateTextAction, a2 as MergeTwoBlocksNodesAction, S as SplitBlockWithNodeAction, R as RemoveChildAction, b as ReplaceChildNodesAction, e as InsertBlocksBeforeAction, F as RTE_TEXT_COLORS, u as RTECodeBlock, I as InsertBlocksAfterAction, w as stateEntityRenderingRegistry } from './code-block-7bd4cb87.js';
-import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-c345ca2e.js';
+import { a as RTETextNode, Y as BoldAnnotationAction, p as NodeAnnotationTypeEnum, X as RTECodeBlockNode, _ as ItalicAnnotationAction, $ as UnderlineAnnotationAction, R as RTETextBlock, a0 as TextStyleAnnotationAction, a1 as TextStyleAnnotation, a2 as BoldAnnotation, k as BlockAnnotationTypeEnum, a3 as ClearFormattingAnnotationAction, a4 as CodeAnnotationAction, a5 as StrikethroughAnnotationAction, T as SelectionChangeAction, L as LinkAnnotationAction, a6 as IndentAnnotationAction, w as ModifyContentAction, M as ModifyContentActionType, H as HorizontalAlignmentAnnotationAction, s as stateEntityRenderingRegistry, b as AppendChildrenAction, Z as ZERO_WIDTH_SPACE, U as UpdateTextAction, i as InsertChildrenBeforeAction, x as SplitBlockWithNodeAction, h as RemoveChildrenAction, v as ReplaceChildNodesAction, I as InsertChildrenAfterAction, o as RTECodeBlock } from './code-block-3d519665.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-999e21e3.js';
 import { g as generateUUID } from './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
-import { a as waitForComponentDidRender } from './index-fb3b74bd.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-f0982f11.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-b5cb9b81.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-0a6c3cbb.js';
-import { a as RTEListItemBlock, V as VegaRTEContent, B as BreakSingleBlockAction, b as RTEListBlock, R as RTEImageBlock } from './content-state-a43e703e.js';
-import { R as RTESelectionState, C as ComponentValueHistoryControllerSlimmer, A as AutoRunWhenReRenderTaskQueueSlimmer, a as SelectionController } from './component-value-history-controller-slimmer.abstract-41c58caf.js';
-import { b as FORM_ELEMENT_VALUE_CHANGE, D as DARK_MODE_CHANGE } from './static-subject-title-ca83d6b6.js';
+import { a as waitForComponentDidRender } from './index-18a340fb.js';
+import { c as RTEImageNode, a as RTEListItemBlock, V as VegaRTEContent, M as MergeTwoBlocksNodesAction, d as InsertNewParagraphAction, E as ElementToDtoStrategyProcessor, R as RTEImageBlock } from './content-state-100d1efd.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-47820eaa.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-40973ec2.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-b3524c09.js';
+import { R as RTESelectionState, C as ComponentValueHistoryControllerSlimmer, A as AutoRunWhenReRenderTaskQueueSlimmer, a as SelectionController } from './component-value-history-controller-slimmer.abstract-8b5be007.js';
+import { b as FORM_ELEMENT_VALUE_CHANGE, D as DARK_MODE_CHANGE } from './static-subject-title-633b3474.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-84b1f192.js';
-import { r as rgbToHex, f as findParent } from './ui-7d177fb0.js';
-import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-69d5f035.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-b59a578e.js';
-import { T as TranslationSlimmer } from './translation-slimmer-f28e4708.js';
-import { V as VegaInternalThemeManager } from './dark-mode-style-controller-ea798fc8.js';
+import { D as DarkModeStateControllerSlimmer } from './dark-mode-state-controller-slimmer-0c7d1c77.js';
+import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-423c3c83.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-6b5b31f5.js';
+import { T as TranslationSlimmer } from './translation-slimmer-c83b52c1.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-3bbb32dc.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-c20be16d.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
 import './icon-manager-2ee1c619.js';
+import './string-a953eafc.js';
+import './type-guard-84b1f192.js';
+import './breakpoints-d9faf11c.js';
+import './ui-8424715a.js';
+import './regex-dfe11abf.js';
+import './typography-396de03f.js';
+import './object-66c37948.js';
 import './dynamic-slimmer-90b8af32.js';
 import './wait-for-vega-handler-c2c07ac3.js';
-import './string-be824360.js';
-import './translation-a6eacb5f.js';
+import './translation-833d9ef4.js';
 import './page-resize-observer-slimmer-0bf7fbf3.js';
-import './ui-8424715a.js';
-import './breakpoints-d9faf11c.js';
 import './try-get-document-bef0f526.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
 import './array-7888f339.js';
 import './number-4398f2e1.js';
-import './sub-state-observer-slimmer-53eec5fb.js';
-import './internal-vega-event-manager-d80c53c5.js';
+import './sub-state-observer-slimmer-c823d69c.js';
+import './internal-vega-event-manager-526f8ed1.js';
 import './synchronize-task-queue-ac8acc3b.js';
-import './keyboard-manager-slimmer-751e98f5.js';
-import './keyboard-manager-3ffe81b0.js';
-import './regex-dfe11abf.js';
-import './typography-396de03f.js';
+import './keyboard-manager-slimmer-818050ee.js';
+import './keyboard-manager-fa6355cb.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-51659753.js';
 import './index-e9da316f.js';
 import './_commonjsHelpers-9943807e.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.length > 0);
+      let indentLevel = 0;
+      let output = '';
+      for (let i = 0; i < tokens.length; i++) {
+        let token = tokens[i];
+        // Decrease indentation for closing tags
+        if (token.startsWith('</')) {
+          indentLevel = Math.max(0, indentLevel - 1);
+        }
+        const indent = INDENT.repeat(indentLevel);
+        if (token.startsWith('<')) {
+          // Clean and normalize inline style attributes
+          token = token.replace(/style\s*=\s*"([^"]*)"/g, (_, styleContent) => {
+            return `style="${this.formatStyle(styleContent)}"`;
+          });
+          const tagName = CodeFormatter.getTagName(token);
+          const isInline = CodeFormatter.INLINE_TAGS.has(tagName);
+          // Inline tag grouping: e.g., <strong>Text</strong> stays on one line
+          if (isInline && i + 2 < tokens.length && tokens[i + 2] === `</${tagName}>`) {
+            // Group consecutive inline tags
+            let inlineGroup = `${token}${tokens[i + 1]}${tokens[i + 2]}`;
+            i += 2;
+            // Keep merging consecutive inline tag pairs
+            while (i + 2 < tokens.length &&
+              tokens[i + 1].startsWith('<') &&
+              CodeFormatter.INLINE_TAGS.has(CodeFormatter.getTagName(tokens[i + 1])) &&
+              tokens[i + 3] === `</${CodeFormatter.getTagName(tokens[i + 1])}>`) {
+              inlineGroup += `${tokens[i + 1]}${tokens[i + 2]}${tokens[i + 3]}`;
+              i += 3;
+            }
+            output += `${indent}${inlineGroup}\n`;
+          }
+          else {
+            output += `${indent}${token}\n`;
+            // Increase indentation for non-void opening tags
+            if (!token.startsWith('</') &&
+              !token.endsWith('/>') &&
+              !/^<br|^<img|^<meta|^<input|^<hr/i.test(token)) {
+              indentLevel++;
+            }
+          }
+        }
+        else {
+          // Add plain text content with current indentation
+          const text = token;
+          if (text.length > 0) {
+            output += `${INDENT.repeat(indentLevel)}${text}\n`;
+          }
+        }
+      }
+      return output.trim();
+    };
+  }
+  /**
+   * Extracts the tag name from an HTML tag string.
+   *
+   * @param {string} tag - A raw HTML tag string
+   * @returns {string} The lowercase tag name, or an empty string if no match is found.
+   */
+  static getTagName(tag) {
+    var _a;
+    const match = tag.match(/^<\/?([a-z0-9]+)/i);
+    return (_a = match === null || match === void 0 ? void 0 : match[1].toLowerCase()) !== null && _a !== void 0 ? _a : '';
+  }
+  /**
+   * Formats a CSS style string by trimming white space and ensuring consistent semicolon spacing.
+   *
+   * @param {string} style - The CSS style string to format.
+   * @returns {string} The formatted style string.
+   */
+  formatStyle(style) {
+    return style
+      .split(';')
+      .map((s) => s.trim())
+      .filter(Boolean)
+      .join('; ');
+  }
+}
+CodeFormatter.INLINE_TAGS = new Set([
+  'span',
+  'strong',
+  'em',
+  'a',
+  'b',
+  'i',
+  'u',
+  'small',
+  'abbr',
+  'code',
+  'b',
+  'u',
+  's',
+  'mark',
+  'time',
+  'del',
+  'ins',
+]);
+const CodeFormatter$1 = new CodeFormatter();
+
+var __decorate$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;
@@ -72,6 +190,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()));
@@ -90,6 +209,20 @@ class VegaRichTextEditorRenderer extends VegaSlimmer {
     this.richTextContentFocus = () => {
       void this.richTextContentRef.vegaFocus();
     };
+    this.renderSourceViewContent = () => {
+      if (!this.allowSourceEdit)
+        return;
+      const sourceViewValue = this.sourceView
+        ? CodeFormatter$1.format(this.value.toHtml({
+          autoMatchFormat: this.sourceEditConfig.autoMatchFormat,
+        }))
+        : '';
+      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: sourceViewValue } })));
+    };
   }
   /**
    * Component lifecycle - [componentDidRender]{@link VegaRichTextEditor.componentDidRender}
@@ -108,7 +241,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;
@@ -131,6 +264,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());
   }
@@ -139,45 +277,62 @@ 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([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "sourceEditConfig", void 0);
+__decorate$B([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "allowSourceEdit", 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;
@@ -222,73 +377,108 @@ class ToolbarRenderer extends VegaSlimmer {
     };
   }
   render() {
-    return (h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" }, this.toolbarItems.map((group) => {
-      return (h("div", { class: "toolbar-btn-group" }, group.map((item) => {
-        return this.getToolbarBtnRenderer(item).render();
+    return (h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" },
+      this.allowSourceEdit && (h(Fragment, null,
+        h("div", { class: "toolbar-btn-group" }, this.sourceEditToolbarButtonSlimmer.render()),
+        !this.sourceView && this.toolbarItems.length > 0 && this.renderVegaDivider())),
+      this.toolbarItems.map((group) => {
+        return (h("div", { class: "toolbar-btn-group" }, group.map((item) => {
+          const presetRenderer = this.getToolbarBtnRenderer(item);
+          const customRenderer = RTEDTORendererManager.getRTEToolbarButtonRenderer(item);
+          if (presetRenderer) {
+            return presetRenderer.render();
+          }
+          else if (customRenderer) {
+            return customRenderer.render(h, {
+              host: this.host,
+              rteRange: this.selectionController.getCurrentRange(),
+              sourceEditMode: this.sourceView,
+            });
+          }
+          return null;
+        })));
       })));
-    })));
+  }
+  renderVegaDivider() {
+    return (h("vega-box", { height: "size-32" },
+      h("vega-divider", { direction: "vertical" })));
   }
 }
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "toolbarItems", void 0);
-__decorate$z([
+__decorate$A([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "allowSourceEdit", void 0);
+__decorate$A([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "host", void 0);
+__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$z([
+__decorate$A([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate$A([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "sourceEditToolbarButtonSlimmer", void 0);
+__decorate$A([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "selectionController", void 0);
+__decorate$A([
+  MapToComponentField()
+], ToolbarRenderer.prototype, "sourceView", void 0);
 
 const bold = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>`,
 };
 
-var __decorate$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',
@@ -325,7 +515,7 @@ class BoldToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ bold });
 })();
-__decorate$y([
+__decorate$z([
   MapToComponentField()
 ], BoldToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -333,32 +523,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',
@@ -393,7 +564,7 @@ class ItalicToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ italic });
 })();
-__decorate$x([
+__decorate$y([
   MapToComponentField()
 ], ItalicToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -401,32 +572,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',
@@ -464,7 +616,7 @@ class UnderlineToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ underline });
 })();
-__decorate$w([
+__decorate$x([
   MapToComponentField()
 ], UnderlineToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -472,13 +624,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',
@@ -520,7 +672,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() {
@@ -536,6 +688,7 @@ class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, this.handleDropdownItemClick);
   }
   getSelectedSourceKey() {
+    var _a;
     const currentSelectedBlocks = this.selectionController
       .getSelectedBlocks()
       .filter((block) => block instanceof RTETextBlock);
@@ -543,7 +696,7 @@ class TextStylesToolbarButtonSlimmer extends ToolbarButtonSlimmer {
       currentSelectedBlocks.every((block) => block.type === currentSelectedBlocks[0].type);
     if (isSameType) {
       const blockAnnotation = currentSelectedBlocks[0].getAnnotationByType(BlockAnnotationTypeEnum.TEXT_STYLE);
-      return blockAnnotation.textStyle;
+      return (_a = blockAnnotation === null || blockAnnotation === void 0 ? void 0 : blockAnnotation.textStyle) !== null && _a !== void 0 ? _a : '';
     }
     return '';
   }
@@ -583,10 +736,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);
 
@@ -594,13 +747,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',
@@ -632,7 +785,7 @@ class ClearStyleToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     'text-slash': TextSlash,
   });
 })();
-__decorate$u([
+__decorate$v([
   MapToComponentField()
 ], ClearStyleToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -640,13 +793,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',
@@ -679,7 +832,7 @@ class CodeToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ 'code-simple': codeSimple });
 })();
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], CodeToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -687,32 +840,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',
@@ -750,7 +884,7 @@ class StrikethroughToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ strikethrough });
 })();
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], StrikethroughToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -758,13 +892,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>`,
 };
 
-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',
@@ -783,6 +917,7 @@ class LinkToolbarButtonSlimmer extends ToolbarButtonSlimmer {
               link: { href: url, groupKey: groupKey },
               newText: textChanged ? text : undefined,
               needMergeNode: textChanged && this.currentSelectedNodes.length > 1,
+              type: 'link',
             }));
           });
           return;
@@ -840,7 +975,7 @@ class LinkToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ link: link });
 })();
-__decorate$r([
+__decorate$s([
   MapToComponentField()
 ], LinkToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -848,32 +983,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',
@@ -903,7 +1019,7 @@ class MoreIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ indent: indent });
 })();
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], MoreIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -911,13 +1027,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',
@@ -948,7 +1064,7 @@ class LessIndentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ outdent: outdent });
 })();
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], LessIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -969,13 +1085,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',
@@ -1027,13 +1143,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);
 
@@ -1070,13 +1186,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',
@@ -1129,20 +1245,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',
@@ -1193,20 +1309,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',
@@ -1250,49 +1366,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',
@@ -1321,10 +1418,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);
 
@@ -1332,13 +1429,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',
@@ -1367,10 +1464,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);
 
@@ -1378,13 +1475,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',
@@ -1413,10 +1510,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);
 
@@ -1424,13 +1521,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',
@@ -1459,20 +1556,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',
@@ -1524,22 +1621,22 @@ class HorizontalAlignmentToolbarButtonSlimmer extends ToolbarButtonSlimmer {
         .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);
 
@@ -1580,7 +1677,7 @@ class RTEEditorState {
   }
 }
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1613,6 +1710,7 @@ class ValueController extends VegaSlimmer {
     if (this.value && !(this.value instanceof VegaRTEContent)) {
       this.value = VegaRTEContent.fromJSON(this.value);
     }
+    this.registerEditorRefAndContent();
   }
   /**
    * Watches the value of the editor and updates the internal value.
@@ -1631,6 +1729,7 @@ class ValueController extends VegaSlimmer {
         detail: this.value,
       });
     }
+    this.registerEditorRefAndContent();
   }
   /**
    * Updates the value of the editor and restore the selection.
@@ -1653,36 +1752,44 @@ class ValueController extends VegaSlimmer {
   isAcceptableFlushChange() {
     return true;
   }
+  /**
+   * Register the host element and the current content.
+   */
+  registerEditorRefAndContent() {
+    if (this.host && this.host.value) {
+      stateEntityRenderingRegistry.register(this.host, this.host.value);
+    }
+  }
 }
 ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], ValueController.prototype, "host", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField({ writable: true })
 ], ValueController.prototype, "value", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], ValueController.prototype, "changeEventEmitter", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], ValueController.prototype, "valueController", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], ValueController.prototype, "historyController", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], ValueController.prototype, "selectionController", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentMethod('connectedCallback')
 ], ValueController.prototype, "connectedCallback", null);
-__decorate$f([
+__decorate$g([
   MapToComponentMethod('disconnectedCallback')
 ], ValueController.prototype, "disconnectedCallback", null);
-__decorate$f([
+__decorate$g([
   MapToComponentMethod('componentWillLoad')
 ], ValueController.prototype, "componentWillLoad", null);
-__decorate$f([
+__decorate$g([
   MapToComponentMethod('watchValueUpdate')
 ], ValueController.prototype, "watchValueUpdate", null);
 
@@ -1759,7 +1866,7 @@ class BaseHandler {
   createEmptyParagraph() {
     const paragraph = new RTETextBlock(generateUUID(), 'paragraph');
     const textNode = new RTETextNode(`${paragraph.id}1`, '', paragraph);
-    paragraph.apply(new AppendChildNodesAction([textNode]));
+    paragraph.apply(new AppendChildrenAction([textNode]));
     return paragraph;
   }
   /**
@@ -1782,20 +1889,6 @@ class BaseHandler {
   }
 }
 
-/**
- * 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
  *
@@ -1811,6 +1904,23 @@ class ReplaceSelectedTextAction extends ModifyContentAction {
   }
 }
 
+/**
+ * Action to type character into a decorator node
+ *
+ * @example decoratorNode.parent.apply(new InsertTextToDecoratorNodeAction(decoratorNode, '', 0 | 1))
+ */
+class InsertTextToDecoratorNodeAction extends ModifyContentAction {
+  constructor(decoratorNode, text, offset) {
+    super();
+    this.type = ModifyContentActionType.INSERT_TEXT_TO_DECORATOR_NODE;
+    this.text = '';
+    this.offset = 0;
+    this.decoratorNode = decoratorNode;
+    this.text = text;
+    this.offset = offset;
+  }
+}
+
 /** Handles inserting text into a VegaRTEContent based on the current selection and input event. User input character will trigger this callback */
 class InsertTextHandler extends BaseHandler {
   /**
@@ -1829,27 +1939,32 @@ class InsertTextHandler extends BaseHandler {
         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) {
+        if (selectedNodes[0].isContentEditable()) {
+          let nextOffset = startOffset + text.length;
+          let updateFlag = false;
+          let cursorNode = selectedNodes[0];
+          if (cursorNode.text === '\n') {
+            cursorNode = this.insertTextToLineBreakNode(cursorNode, text);
             updateFlag = true;
-            cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
           }
+          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 {
+          selectedNodes[0].parent.apply(new InsertTextToDecoratorNodeAction(selectedNodes[0], text, startOffset));
         }
-        updateFlag &&
-          this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(nextOffset, cursorNode['text'].length));
       }
     }
     else {
@@ -1886,15 +2001,17 @@ class InsertTextHandler extends BaseHandler {
   insertTextToLineBreakNode(lineBreakNode, text) {
     const { startOffset, endOffset } = this.selectionController.getCurrentRange();
     const textBlock = lineBreakNode.parent;
-    const index = textBlock.children.indexOf(lineBreakNode);
-    if (startOffset === 0 && startOffset === endOffset && textBlock.children[index + 1]) {
-      const newTextNode = lineBreakNode.cloneWithText(text);
-      textBlock.apply(new InsertNodesBeforeAction(lineBreakNode, newTextNode));
-      return newTextNode;
-    }
-    else {
-      lineBreakNode.apply(new UpdateTextAction(text));
-      return lineBreakNode;
+    if (textBlock instanceof RTETextBlock) {
+      const index = textBlock.children.indexOf(lineBreakNode);
+      if (startOffset === 0 && startOffset === endOffset && textBlock.children[index + 1]) {
+        const newTextNode = lineBreakNode.cloneWithText(text);
+        textBlock.apply(new InsertChildrenBeforeAction(lineBreakNode, newTextNode));
+        return newTextNode;
+      }
+      else {
+        lineBreakNode.apply(new UpdateTextAction(text));
+        return lineBreakNode;
+      }
     }
   }
 }
@@ -1971,7 +2088,7 @@ class InsertParagraphHandler extends BaseHandler {
     const currentBlock = cursorNode.parent;
     const { startOffset } = this.selectionController.getCurrentRange();
     if (currentBlock) {
-      const breakAction = new BreakSingleBlockAction(cursorNode, startOffset);
+      const breakAction = new InsertNewParagraphAction(cursorNode, startOffset);
       currentBlock.apply(breakAction);
       this.switchCaretPositionToNextElement(breakAction.newBlock);
     }
@@ -2121,1114 +2238,85 @@ class DeleteBlockContentAction extends ModifyContentAction {
 /** 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.children.length === 0) {
-        // Add a empty paragraph if delete all content to make sure the caret position
-        this.insertDefaultParagraph();
-      }
-    }
-  }
-  /**
-   * Deletes the content within multiple nodes selected by the user.
-   */
-  deleteContentWithMultipleNodes() {
-    const selectedNodes = this.selectionController.getSelectedNodes();
-    const cursorNode = this.removeSelectionRange(true);
-    const lastSelectedNode = selectedNodes[selectedNodes.length - 1];
-    if (selectedNodes.length > 1 &&
-      lastSelectedNode instanceof RTETextNode &&
-      lastSelectedNode.isEmpty()) {
-      lastSelectedNode.parent.apply(new RemoveChildAction(lastSelectedNode));
-    }
-    this.convertFirstBlockToParagraph(cursorNode.parent);
-  }
-  /**
-   * If the first block is not paragraph, convert the block to paragraph after delete all text
-   *
-   * @param {RTEBlock} block - The first block instance
-   */
-  convertFirstBlockToParagraph(block) {
-    const firstBlock = this.currentState.children[0];
-    if (firstBlock === block &&
-      block instanceof RTETextBlock &&
-      block.children.length === 1 &&
-      block.children[0].isEmpty() &&
-      block.type !== 'paragraph') {
-      const paragraph = this.createEmptyParagraph();
-      paragraph.apply(new ReplaceChildNodesAction(block.children));
-      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.children[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;
-    }
-  }
-}
-
-/**
- * Abstract class to define strategies for processing HTML elements
- */
-class ElementToDTOStrategy {
-}
-/**
- * Class to represent the output of a strategy applied to HTML elements
- */
-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;
-  }
-}
-
-/** Abstract class for block html element to RTE block dto */
-class BlockToRTEBlockStrategyAbstract extends ElementToDTOStrategy {
-  /**
-   * 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>
-   *
-   * @param {HTMLElement[]} elements - Child elements.
-   * @param {VegaRTETextAnnotations | VegaRTECodeAnnotations} annotations - Parent annotations.
-   * @returns {VegaRTETextNode[]} - Text node DTO.
-   */
-  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,
-        });
-      }
-      else {
-        childNodes.push(...this.generateChildNodes(Array.from(child.childNodes), Object.assign({}, annotations, this.generateTextNodeAnnotations(child, annotations))));
-      }
-    });
-    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;
-        }
-      }
-      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.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {Nullable<VegaRTEBlockAlignment>} - Text align.
-   */
-  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;
-    }
-  }
-  /**
-   * Get indent of current element.
-   *
-   * @param {HTMLElement} element - current element.
-   * @returns {Nullable<number>} - Indent.
-   */
-  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;
-      }
-    }
-    else {
-      return null;
-    }
-    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 {
-  /**
-   * Can be handle.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @param {number} currentIndex - Current element index.
-   * @returns {number} - can be handled element count.
-   */
-  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++;
-      }
-      else {
-        break;
-      }
-    }
-    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.children = 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.nestList = 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.
-   */
-  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]) }),
-    });
-  }
-  /* 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;
-  }
-  /**
-   * Get node type of element.
-   *
-   * @param {HTMLElement} element - element.
-   * @returns {string} - node type.
-   */
-  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 '';
-    }
-  }
-}
-
-/** 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;
-  }
-}
-
-/** 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;
-  }
-  /**
-   * Parse to a image block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - Image block.
-   */
-  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),
-      });
-    }
-  }
-  /* 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;
-  }
-}
-
-/** 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.
-   */
-  canHandle(elementsArray, currentIndex) {
-    return elementsArray[currentIndex].tagName === 'OL' ? 1 : 0;
-  }
-  /**
-   * Parse to a number list block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - Number list block.
-   */
-  handle(elementsArray) {
-    if (elementsArray[0].childNodes.length === 0)
-      return null;
-    return RTEListBlock.from({
-      id: generateUUID(),
-      type: 'number-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.children = childBlocks;
-    childBlocks.forEach((block) => (block.parent = currentBlock));
-  }
-  /**
-   * Should continue process to child elements.
-   *
-   * @returns {boolean} - boolean.
-   */
-  shouldProceedToElementChildren() {
-    return true;
-  }
-}
-
-/** 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;
-  }
-}
-
-/** Transform child element of UL element which are not LI element to list item block DTO */
-class ULNotLiChildToRTEListItemBlockStrategy 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];
-    const parent = element.parentElement;
-    return element.nodeName !== 'LI' && parent && ['UL', 'OL'].includes(parent.nodeName) ? 1 : 0;
-  }
-  /**
-   * Parse to a list item block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTEContentBlock>} - List item block.
-   */
-  handle(elementsArray) {
-    const nodes = this.generateChildNodes(elementsArray);
-    if (nodes.length === 0)
-      return null;
-    return RTEListItemBlock.from({
-      id: generateUUID(),
-      type: 'list-item',
-      nodes: nodes,
-      annotations: {},
-    });
-  }
-  /* 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;
-  }
-}
-
-/** Transform other editor code element which has attribute data-language to RTE code block DTO */
-class JiraCodeToRTECodeBlockStrategy 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 === 'PRE' ||
-      elementsArray[currentIndex].tagName === 'CODE') &&
-      elementsArray[currentIndex].hasAttribute('data-language')
-      ? 1
-      : 0;
-  }
-  /**
-   * Parse to a code block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTECodeBlock>} - Code block.
-   */
-  handle(elementsArray) {
-    const codeRef = elementsArray[0];
-    if (codeRef) {
-      const content = codeRef.textContent;
-      const language = codeRef.dataset
-        .language;
-      return RTECodeBlock.from({
-        id: generateUUID(),
-        type: 'code-block',
-        content,
-        language,
-      });
-    }
-  }
-  /* 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;
-  }
-}
-
-/** Transform vega-code-block element to code block DTO */
-class VegaCodeBlockToRTECodeBlockStrategy extends JiraCodeToRTECodeBlockStrategy {
-  /**
-   * Can be handle.
-   *
-   * TODO: Update the browser clipboard data to fix the issue with nested vega-code-block elements.
-   * In safari the html snippet will be like: <vega-code-block><p><span>paragraph</span></p><vega-code-block></vega-code-block></vega-code-block>
-   * The vega-code-block nested inside the vega-code-block, so we need to check the child element.
-   *
-   * @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-CODE-BLOCK' &&
-      !!elementsArray[currentIndex].querySelector('vega-code-block') === false) ||
-      this.isCodeBlockContainer(elementsArray[currentIndex])
-      ? 1
-      : 0;
-  }
-  /**
-   * Parse to a code block.
-   *
-   * @param {HTMLElement[]} elementsArray - Current elements.
-   * @returns {Nullable<RTECodeBlock>} - Code block.
+   * Delete the selected node from the current state.
    */
-  handle(elementsArray) {
-    const codeBlockElement = this.isCodeBlockContainer(elementsArray[0])
-      ? elementsArray[0].querySelector('vega-code-block')
-      : elementsArray[0];
-    const code = codeBlockElement.querySelector('code');
-    if (code) {
-      return super.handle([code]); // Call the parent method to handle the code element
+  handleEvent() {
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    if (selectedBlocks.length < 2) {
+      this.deleteContentWithSingleBlock();
     }
-    else if (codeBlockElement.hasAttribute('data-content')) {
-      // The code element in shadow dom could be empty in firefox.
-      // eslint-disable-next-line no-restricted-globals
-      const code = document.createElement('code');
-      code.textContent = codeBlockElement.dataset.content;
-      code.dataset.language = codeBlockElement.dataset.language;
-      return super.handle([code]); // Call the parent method to handle the code element
+    else {
+      this.deleteContentWithMultipleNodes();
     }
   }
-  /* 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 the deletion of content within a single block in an RTE editor.
    */
-  shouldProceedToElementChildren() {
-    return false;
+  deleteContentWithSingleBlock() {
+    const range = this.selectionController.getCurrentRange();
+    const { startOffset, endOffset, startContainer, endContainer } = range;
+    const selectedBlocks = this.selectionController.getSelectedBlocks();
+    const selectedNodes = this.selectionController.getSelectedNodes();
+    if (startOffset !== endOffset || startContainer !== endContainer) {
+      this.deleteContentWithMultipleNodes();
+    }
+    else if (selectedBlocks[0]) {
+      const deleteAction = new DeleteBlockContentAction(selectedNodes[0], startOffset);
+      selectedBlocks[0].apply(deleteAction);
+      if (deleteAction.previousNode) {
+        const nextOffset = deleteAction.previousNode === selectedNodes[0]
+          ? Math.max(0, startOffset - 1)
+          : deleteAction.previousNode.getRangeEndOffset();
+        this.selectionController.enqueueSelectionRangeFutureState(deleteAction.previousNode, nextOffset);
+      }
+      else if (deleteAction.nextNode) {
+        this.selectionController.enqueueSelectionRangeFutureState(deleteAction.nextNode, 0);
+      }
+      else if (this.currentState.children.length === 0) {
+        // Add a empty paragraph if delete all content to make sure the caret position
+        this.insertDefaultParagraph();
+      }
+    }
   }
   /**
-   * Checks if the given element is a code block container.
-   *
-   * @param {HTMLElement} element - The element to check.
-   * @returns {boolean} - Boolean result.
+   * Deletes the content within multiple nodes selected by the user.
    */
-  isCodeBlockContainer(element) {
-    return (element.tagName === 'PRE' &&
-      element.classList.contains('code-block-container') &&
-      element.querySelectorAll('vega-code-block').length === 1);
-  }
-}
-
-/** Element to DTO processor */
-class ElementToDtoStrategyProcessor {
-  constructor() {
-    this.elementStrategies = [
-      new UlToRTEListBlockStrategy(),
-      new OlToRTEListBlockStrategy(),
-      new ULNotLiChildToRTEListItemBlockStrategy(),
-      new LiToRTEListItemBlockStrategy(),
-      new VegaCodeBlockToRTECodeBlockStrategy(),
-      new JiraCodeToRTECodeBlockStrategy(),
-      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.parent.apply(new RemoveChildrenAction(lastSelectedNode));
+    }
+    this.convertFirstBlockToParagraph(cursorNode.parent);
   }
   /**
-   * 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.children[0];
+    if (firstBlock === block &&
+      block instanceof RTETextBlock &&
+      block.children.length === 1 &&
+      block.children[0].isEmpty() &&
+      block.type !== 'paragraph') {
+      const paragraph = this.createEmptyParagraph();
+      paragraph.apply(new ReplaceChildNodesAction(block.children));
+      block.parent.apply(new InsertChildrenBeforeAction(block, paragraph));
+      block.parent.apply(new RemoveChildrenAction(block));
     }
-    return outputs;
   }
   /**
-   * Checks if the given element is valid to parse.
-   *
-   * @param {HTMLElement} element - The pasted element.
-   * @returns {boolean} Is valid
+   * Creates a new paragraph element with a text node and appends it to the current state.
    */
-  isInvalidElement(element) {
-    if (element.nodeType === Node.COMMENT_NODE)
-      return true;
-    return ['META', 'BUTTON', 'STYLE'].includes(element.nodeName);
+  insertDefaultParagraph() {
+    const paragraph = this.createEmptyParagraph();
+    this.currentState.apply(new AppendChildrenAction([paragraph]));
+    this.selectionController.enqueueSelectionRangeFutureState(paragraph.children[0], 1);
   }
 }
 
@@ -3236,10 +2324,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.
    *
@@ -3264,7 +2348,7 @@ class InsertPasteHandler extends BaseHandler {
    * @param { RTEContentBlock[]} blocks - blocks
    */
   insertBlocksToRoot(blocks) {
-    this.currentState.apply(new AppendChildNodesAction(blocks));
+    this.currentState.apply(new AppendChildrenAction(blocks));
   }
   /**
    * Insert the blocks to content
@@ -3278,7 +2362,7 @@ class InsertPasteHandler extends BaseHandler {
       const { startOffset } = this.selectionController.getCurrentRange();
       const breakAction = new SplitBlockWithNodeAction(cursorNode, startOffset);
       currentBlock.apply(breakAction);
-      currentBlock.parent.apply(new InsertBlocksAfterAction(currentBlock, ...blocks));
+      currentBlock.parent.apply(new InsertChildrenAfterAction(currentBlock, ...blocks));
       this.switchCaretPositionToNextElement(breakAction.newBlock);
     }
   }
@@ -3292,7 +2376,7 @@ class InsertPasteHandler extends BaseHandler {
     /* istanbul ignore next */
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parent;
     if (currentBlock) {
-      currentBlock.parent.apply(new InsertBlocksBeforeAction(currentBlock, ...blocks));
+      currentBlock.parent.apply(new InsertChildrenBeforeAction(currentBlock, ...blocks));
       this.switchCaretPositionToNextElement(currentBlock);
     }
   }
@@ -3311,8 +2395,7 @@ class InsertPasteHandler extends BaseHandler {
     // eslint-disable-next-line no-restricted-globals
     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);
@@ -3337,13 +2420,16 @@ class InsertPasteHandler extends BaseHandler {
     const lines = content.split('\n');
     return lines
       .map((line) => {
-      return `<span>${line}</span>`;
+      if (line === '') {
+        return '<p>\n</p>';
+      }
+      return `<p>${line}</p>`;
     })
-      .join('<span>\n</span>');
+      .join('');
   }
 }
 
-var __decorate$e = (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;
@@ -3470,28 +2556,28 @@ class UserInputController extends VegaSlimmer {
     return false;
   }
 }
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], UserInputController.prototype, "host", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], UserInputController.prototype, "value", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], UserInputController.prototype, "valueController", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], UserInputController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], UserInputController.prototype, "selectionController", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], UserInputController.prototype, "insertCompositionTextController", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentMethod('componentDidLoad')
 ], UserInputController.prototype, "addActionListener", null);
-__decorate$e([
+__decorate$f([
   MapToComponentMethod('disconnectedCallback')
 ], UserInputController.prototype, "removeActionListener", null);
 
@@ -3511,7 +2597,7 @@ class InsertImageToBlockAction extends ModifyContentAction {
   }
 }
 
-var __decorate$d = (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;
@@ -3530,9 +2616,9 @@ class InsertImageController extends VegaSlimmer {
     const imageBlock = new RTEImageBlock(generateUUID());
     const newImageNode = new RTEImageNode(generateUUID(), imageUrl, imageBlock);
     newImageNode.apply(new ImageAnnotationAction('md', ''));
-    imageBlock.apply(new AppendChildNodesAction([newImageNode]));
+    imageBlock.apply(new AppendChildrenAction([newImageNode]));
     if (selectedBlocks.length < 1 || this.value.children.length < 1) {
-      this.value.apply(new AppendChildNodesAction([imageBlock]));
+      this.value.apply(new AppendChildrenAction([imageBlock]));
       void this.valueController.flushChanges(this.value);
     }
     else {
@@ -3600,26 +2686,26 @@ class InsertImageController extends VegaSlimmer {
     }
   }
 }
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], InsertImageController.prototype, "selectionController", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], InsertImageController.prototype, "value", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], InsertImageController.prototype, "valueController", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentField()
 ], InsertImageController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$d([
+__decorate$e([
   MapToComponentMethod('componentDidLoad')
 ], InsertImageController.prototype, "registerObserver", null);
-__decorate$d([
+__decorate$e([
   MapToComponentMethod('disconnectedCallback')
 ], InsertImageController.prototype, "unRegisterObserver", null);
 
-var __decorate$c = (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;
@@ -3637,7 +2723,14 @@ class FocusController extends VegaSlimmer {
      * @param {RTEContentBlock} lastBlock - The last block of the content
      */
     this.doFocusOnLastTextNode = async (lastBlock) => {
-      this.setCaretRangeToNodeEnd(stateEntityRenderingRegistry.getDOMByEntity(lastBlock.getLastNode()).firstChild);
+      const lastNode = lastBlock.getLastNode();
+      const dom = stateEntityRenderingRegistry.getDOMByEntity(lastNode);
+      if (!lastNode.isContentEditable()) {
+        this.setCaretRangeToNodeEnd(dom.parentElement, lastNode.getRangeEndOffset());
+      }
+      else {
+        this.setCaretRangeToNodeEnd(dom.firstChild, dom.firstChild.nodeValue.length);
+      }
       await this.vegaRichTextEditorRenderer.getRichTextContentRef().vegaFocus();
     };
   }
@@ -3656,7 +2749,7 @@ class FocusController extends VegaSlimmer {
         type: 'paragraph',
         nodes: [{ id: generateUUID(), type: 'text', text: '' }],
       });
-      lastBlock.parent.apply(new InsertBlocksAfterAction(lastBlock, newTextBlock));
+      lastBlock.parent.apply(new InsertChildrenAfterAction(lastBlock, newTextBlock));
       await this.valueController.flushChanges(this.value);
       await this.doFocusOnLastTextNode(newTextBlock);
     }
@@ -3668,27 +2761,28 @@ class FocusController extends VegaSlimmer {
    * Move the caret to the end of the node
    *
    * @param {Node} targetNode - The node to move the caret to
+   * @param {number} offset - The offset to move the caret to
    */
-  setCaretRangeToNodeEnd(targetNode) {
+  setCaretRangeToNodeEnd(targetNode, offset) {
     const range = new Range();
-    range.setStart(targetNode, targetNode.nodeValue.length);
+    range.setStart(targetNode, offset);
     this.selectionController.setSelectionRange(range);
   }
 }
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], FocusController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], FocusController.prototype, "selectionController", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], FocusController.prototype, "valueController", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], FocusController.prototype, "value", void 0);
 
-var __decorate$b = (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;
@@ -3728,14 +2822,14 @@ class TextNodeColorController extends VegaSlimmer {
     return true;
   }
 }
-__decorate$b([
+__decorate$c([
   MapToComponentMethod('connectedCallback')
 ], TextNodeColorController.prototype, "connectedCallback", null);
-__decorate$b([
+__decorate$c([
   MapToComponentMethod('disconnectedCallback')
 ], TextNodeColorController.prototype, "disconnectResizeObserver", null);
 
-var __decorate$a = (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;
@@ -3765,7 +2859,9 @@ class InsertCompositionTextController extends VegaSlimmer {
           if (target.nodeType === Node.TEXT_NODE && target.parentElement) {
             const richTextNode = stateEntityRenderingRegistry.getEntityByDOM(target.parentElement);
             const newValue = target.textContent;
-            if (richTextNode instanceof RTETextNode) {
+            if (richTextNode instanceof RTETextNode &&
+              richTextNode.isContentEditable() &&
+              richTextNode.parent instanceof RTETextBlock) {
               updateFlag = this.updateCurrentNodeText(richTextNode, newValue, oldValue);
             }
             else if (newValue) {
@@ -3879,7 +2975,7 @@ class InsertCompositionTextController extends VegaSlimmer {
     const index = textBlock.children.indexOf(currentNode);
     if (textBlock.children[index + 1]) {
       const newTextNode = currentNode.cloneWithText('\n');
-      textBlock.apply(new InsertNodesBeforeAction(textBlock.children[index + 1], newTextNode));
+      textBlock.apply(new InsertChildrenBeforeAction(textBlock.children[index + 1], newTextNode));
     }
   }
   /**
@@ -3943,35 +3039,35 @@ class InsertCompositionTextController extends VegaSlimmer {
     this.editableElementRef.dispatchEvent(inputEvent);
   }
 }
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "selectionController", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "host", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "value", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "valueController", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "userInputController", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentMethod('componentDidLoad')
 ], InsertCompositionTextController.prototype, "addCompositionTextEventListener", null);
-__decorate$a([
+__decorate$b([
   MapToComponentMethod('disconnectedCallback')
 ], InsertCompositionTextController.prototype, "removeCompositionTextEventListener", null);
-__decorate$a([
+__decorate$b([
   MapToComponentMethod('componentDidRender')
 ], InsertCompositionTextController.prototype, "reConnectObserver", null);
 
-var __decorate$9 = (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;
@@ -4029,18 +3125,16 @@ 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 instanceof RTECodeBlockNode) {
-          return item !== startNode;
-        }
-        else if (item.type !== 'IMAGE') {
+        if (item.isContentEditable()) {
           return item !== startNode && item !== endNode;
         }
         else {
-          return item !== startNode && (item !== endNode || (item === endNode && endOffset !== 0));
+          return (item !== startNode &&
+            (item !== endNode || this.isEndNodeFullyInTheRange(endNode, endOffset, item)));
         }
       });
       shouldRemovedItems.forEach((item) => {
-        item.parent.apply(new RemoveChildAction(item));
+        item.parent.apply(new RemoveChildrenAction(item));
       });
     }
     this.removeRangeStartAndEndSelectedText();
@@ -4049,28 +3143,21 @@ class DeleteSelectedNodesController extends VegaSlimmer {
      * 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 &&
-      (endNode !== startNode || endOffset !== 0)) {
+    if (!startNode.isContentEditable() &&
+      this.isStartNodeFullyInTheRange(startNode, endNode, startOffset, endOffset)) {
       // the image block will be deleted when the image is the only item
       if (startNode.parent.children.length === 1) {
         const paragraph = this.createEmptyParagraph();
-        startNode.parent.parent.apply(new InsertBlocksBeforeAction(startNode.parent, paragraph));
-        startNode.parent.apply(new RemoveChildAction(startNode));
+        startNode.parent.parent.apply(new InsertChildrenBeforeAction(startNode.parent, paragraph));
+        startNode.parent.apply(new RemoveChildrenAction(startNode));
         return paragraph.children[0];
       }
       else if (startNode === startNode.parent.children[0]) {
         // the start node should be the next image item if the image is first item
-        startNode.parent.apply(new RemoveChildAction(startNode));
+        startNode.parent.apply(new RemoveChildrenAction(startNode));
         return startNode.parent.children[0];
       }
     }
-    else if (startNode instanceof RTECodeBlockNode) {
-      const paragraph = this.createEmptyParagraph();
-      startNode.parent.parent.apply(new InsertBlocksBeforeAction(startNode.parent, paragraph));
-      startNode.parent.apply(new RemoveChildAction(startNode));
-      return paragraph.children[0];
-    }
     return startNode;
   }
   /**
@@ -4079,10 +3166,11 @@ class DeleteSelectedNodesController extends VegaSlimmer {
   removeRangeStartAndEndSelectedText() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     const currentRange = this.selectionController.getCurrentRange();
-    if (selectedNodes[0] instanceof RTETextNode) {
+    if (selectedNodes[0] instanceof RTETextNode && selectedNodes[0].isContentEditable()) {
       selectedNodes[0].apply(new ReplaceSelectedTextAction('', currentRange));
     }
-    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof RTETextNode) {
+    const endNode = selectedNodes[selectedNodes.length - 1];
+    if (selectedNodes.length > 1 && endNode instanceof RTETextNode && endNode.isContentEditable()) {
       selectedNodes[selectedNodes.length - 1].apply(new ReplaceSelectedTextAction('', currentRange));
     }
   }
@@ -4094,7 +3182,7 @@ class DeleteSelectedNodesController extends VegaSlimmer {
   createEmptyParagraph() {
     const paragraph = new RTETextBlock(generateUUID(), 'paragraph');
     const textNode = new RTETextNode(`${paragraph.id}1`, '', paragraph);
-    paragraph.apply(new AppendChildNodesAction([textNode]));
+    paragraph.apply(new AppendChildrenAction([textNode]));
     return paragraph;
   }
   /**
@@ -4114,20 +3202,20 @@ class DeleteSelectedNodesController extends VegaSlimmer {
           if (this.shouldMergeTextNode(startRTENode, endRTENode)) {
             startRTENode.apply(new UpdateTextAction(startRTENode.text + endRTENode.text));
             if (startRTENode.parent === endRTENode.parent) {
-              startRTENode.parent.apply(new RemoveChildAction(endRTENode));
+              startRTENode.parent.apply(new RemoveChildrenAction(endRTENode));
             }
             else {
-              endRTENode.parent.apply(new RemoveChildAction(endRTENode.parent.children[0]));
+              endRTENode.parent.apply(new RemoveChildrenAction(endRTENode.parent.children[0]));
             }
           }
           if (startRTENode instanceof RTETextNode &&
             endRTENode instanceof RTETextNode &&
             startRTENode.parent !== endRTENode.parent) {
-            startRTENode.parent.apply(new AppendChildNodesAction(endBlock.children));
+            startRTENode.parent.apply(new AppendChildrenAction(endBlock.children));
             endBlock.children = [];
           }
           if (endBlock.children.length < 1) {
-            endBlock.parent.apply(new RemoveChildAction(endBlock));
+            endBlock.parent.apply(new RemoveChildrenAction(endBlock));
           }
         }
       }
@@ -4147,24 +3235,57 @@ class DeleteSelectedNodesController extends VegaSlimmer {
       nodeB instanceof RTETextNode &&
       JSON.stringify(annotationsA) === JSON.stringify(annotationsB));
   }
+  /**
+   * Check the decorator node is fully in the range end.
+   *
+   * @param {RTENode} rangeEndNode - The end node of the range
+   * @param {number} endOffset - The end offset of the range
+   * @param {RTENode<RTEBlock>} checkedNode - The checked decorator node
+   * @returns {boolean} - Whether the end node is fully within the range
+   */
+  isEndNodeFullyInTheRange(rangeEndNode, endOffset, checkedNode) {
+    if (checkedNode instanceof RTECodeBlockNode) {
+      return true;
+    }
+    else {
+      return checkedNode === rangeEndNode && endOffset !== 0;
+    }
+  }
+  /**
+   * Check if the start decorator node is fully in the range.
+   *
+   * @param {RTENode<RTEBlock>} rangeStartNode - The start node of the range
+   * @param {RTENode} rangeEndNode - The end node of the range
+   * @param {number} startOffset - The start offset of the range
+   * @param {number} endOffset - The end offset of the range
+   * @returns {boolean} - Whether the start node is fully within the range
+   */
+  isStartNodeFullyInTheRange(rangeStartNode, rangeEndNode, startOffset, endOffset) {
+    if (rangeStartNode instanceof RTECodeBlockNode) {
+      return true;
+    }
+    else {
+      return startOffset === 0 && (rangeEndNode !== rangeStartNode || endOffset !== 0);
+    }
+  }
 }
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "host", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "selectionController", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "value", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentMethod('connectedCallback')
 ], DeleteSelectedNodesController.prototype, "addDeleteObserver", null);
-__decorate$9([
+__decorate$a([
   MapToComponentMethod('disconnectedCallback')
 ], DeleteSelectedNodesController.prototype, "removeDeleteObserver", null);
 
-var __decorate$8 = (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;
@@ -4240,22 +3361,22 @@ class HistoryController extends ComponentValueHistoryControllerSlimmer {
     await this.valueController.flushChanges(content, false);
   }
 }
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], HistoryController.prototype, "host", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], HistoryController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], HistoryController.prototype, "valueController", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], HistoryController.prototype, "value", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], HistoryController.prototype, "selectionController", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentMethod('componentDidLoad')
 ], HistoryController.prototype, "registerInitState", null);
 
@@ -4276,7 +3397,7 @@ class TransformToCodeBlockAction extends ModifyContentAction {
   }
 }
 
-var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4285,7 +3406,7 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
 /**
  * The code block toolbar button slimmer.
  */
-class CodeBlockToolbarButtonSlimmer extends ToolbarButtonSlimmer {
+class CodeBlockToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'rectangle-code',
@@ -4327,13 +3448,13 @@ class CodeBlockToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ 'rectangle-code': rectangleCode });
 })();
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], CodeBlockToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], CodeBlockToolbarButtonSlimmer.prototype, "valueController", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], CodeBlockToolbarButtonSlimmer.prototype, "value", void 0);
 
@@ -4400,7 +3521,71 @@ class InternalCodeBlockSelectionController extends AutoRunWhenReRenderTaskQueueS
   }
 }
 
-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 displayCode = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M512 48c8.8 0 16 7.2 16 16V352c0 8.8-7.2 16-16 16H336.5c-.3 0-.6 0-.8 0H240.4c-.3 0-.6 0-.8 0H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H512zM64 416H211.7l-8 48H152c-13.3 0-24 10.7-24 24s10.7 24 24 24h72H352h72c13.3 0 24-10.7 24-24s-10.7-24-24-24H372.3l-8-48H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64zm188.3 48l8-48h55.3l8 48H252.3zM249 177c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-48 48c-9.4 9.4-9.4 24.6 0 33.9l48 48c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31 31-31zM361 143c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l48-48c9.4-9.4 9.4-24.6 0-33.9l-48-48z"/></svg>`,
+};
+
+var __decorate$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: 'display-code',
+      tooltip: {
+        text: 'Edit Source',
+      },
+      autoFocusOnClick: false,
+    });
+  }
+  async onClick() {
+    const isSelected = this.sourceView;
+    if (isSelected) {
+      await this.saveSourceCode();
+    }
+    else {
+      this.selectionController.setSelectionRange(new Range());
+    }
+    this.sourceView = !isSelected;
+  }
+  isSelected() {
+    return this.sourceView;
+  }
+  isDisabled() {
+    return super.isDisabled();
+  }
+  async saveSourceCode() {
+    const sourceViewValue = this.vegaRichTextEditorRenderer.getSourceCode();
+    if (typeof sourceViewValue === 'string') {
+      await this.valueController.flushChanges(VegaRTEContent.fromHtml(sourceViewValue, {
+        autoMatchFormat: this.sourceEditConfig.autoMatchFormat,
+      }));
+    }
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'display-code': displayCode });
+})();
+__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);
+__decorate$7([
+  MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "sourceEditConfig", 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;color:rgba(var(--v-text-primary, 32, 54, 69, 1));margin-top:12px;overflow:auto;resize:vertical;padding-top:12px;padding-right:16px;padding-bottom:32px;padding-left:16px}:host .rich-text-editor-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .rich-text-editor-container:focus-within{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .rich-text-editor-container.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));cursor:not-allowed}:host .rich-text-editor-container.disabled:hover,:host .rich-text-editor-container.disabled:focus-within{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host .rich-text-editor-container.disabled:focus-within{outline:none}:host .rich-text-editor-container.disabled vega-rich-text-content{pointer-events:none;opacity:0.35}:host .rich-text-editor-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .rich-text-editor-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .rich-text-editor-container.error:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}:host .rich-text-editor-container .text-editor-counter{position:absolute;bottom:8px;right:8px;display:flex;padding-left:4px;padding-right:4px;padding-top:2px;padding-bottom:2px;border-radius:4px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));background-color:rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container .text-editor-counter.counter-exceed-max-length{background-color:rgba(var(--v-bg-textarea-counter-exceed-max-length, 214, 46, 81))}.toolbar-btn-group{display:flex;justify-content:center;align-items:center}.toolbar-btn-group>*:not(:first-child):not(:last-child) ::part(rich-text-editor-toolbar-button){border-radius:0px}.toolbar-btn-group>*:first-child:not(:last-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:4px;border-bottom-left-radius:4px;border-top-right-radius:0px;border-bottom-right-radius:0px}.toolbar-btn-group>*:last-child:not(:first-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:4px;border-bottom-right-radius:4px}.toolbar-btn-group>*:not(:first-child) ::part(rich-text-editor-toolbar-button){margin-left:-1px}.toolbar-btn-group .toolbar-btn-color-preview-box{display:flex;border:1px solid rgba(var(--v-border-chip, 205, 209, 211, 1));box-sizing:border-box;border-radius:4px;width:16px;height:16px;justify-content:center;align-items:center;margin-left:6px}.toolbar-btn-group .toolbar-btn-color-preview-box.disabled{opacity:0.35}.toolbar-btn-group .toolbar-btn-link-wrapper{position:relative}.toolbar-btn-group .toolbar-btn-link-wrapper vega-rich-text-link-editor{position:absolute;bottom:0;left:0;right:0}.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;margin-top:12px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-hidden{display:none !important}.source-view-container{margin-top:12px}.source-view-container vega-code-block::part(editor-toolbar){display:none}";
 
 var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -4457,6 +3642,7 @@ const VegaRichTextEditor = class {
     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);
@@ -4472,6 +3658,7 @@ const VegaRichTextEditor = class {
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
+    this.sourceView = false;
     /**
      * Specifies the label for the rich text editor.
      *
@@ -4541,6 +3728,19 @@ const VegaRichTextEditor = class {
       ['image'],
       ['clearStyle'],
     ];
+    /**
+     * Determines whether to allow source edit mode in the rich text editor.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.allowSourceEdit = false;
+    /**
+     * Specifies the configuration options for source edit mode.
+     * It includes settings such as autoMatchFormat, which controls whether the editor automatically matches formatting when switching to source edit mode.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.sourceEditConfig = { autoMatchFormat: true };
     /**
      * Specifies the validation status of the rich text editor component.
      *
@@ -4666,6 +3866,9 @@ __decorate$6([
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "sourceEditToolbarButtonSlimmer", void 0);
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "placeholderNotifySlimmer", void 0);
@@ -4726,10 +3929,11 @@ class VegaRichTextEditorToolbarButtonRenderer extends VegaSlimmer {
     return (h("button", { part: "rich-text-editor-toolbar-button", class: {
         'rich-text-editor-toolbar-btn': true,
         'rich-text-editor-toolbar-button-disabled': this.disabled,
+        'rich-text-editor-toolbar-button-hidden': this.hidden,
         'rich-text-editor-toolbar-button-selected': this.selected,
-      }, onClick: this.handleClick, disabled: this.disabled },
+      }, onClick: this.handleClick, disabled: this.disabled, hidden: this.hidden },
       h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
-        h("vega-icon", { size: "size-16", color: this.iconColor, icon: VegaInternalIconManager.getIconKey(this.icon) }),
+        this.icon && (h("vega-icon", { size: "size-16", color: this.iconColor, icon: VegaInternalIconManager.getIconKey(this.icon) })),
         this.showArrowIcon && (h("vega-icon", { size: "size-8", color: "text-secondary", icon: VegaInternalIconManager.getIconKey('chevron-down') }))),
       h("slot", null)));
   }
@@ -4742,6 +3946,9 @@ class VegaRichTextEditorToolbarButtonRenderer extends VegaSlimmer {
 __decorate$5([
   MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "disabled", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "hidden", void 0);
 __decorate$5([
   MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "selected", void 0);
@@ -4758,7 +3965,7 @@ __decorate$5([
   MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "clickEventEmitter", void 0);
 
-const vegaRichTextEditorToolbarButtonCss = ":host{display:inline-block}.rich-text-editor-toolbar-btn{display:flex;justify-content:center;align-items:center;border-radius:4px;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));padding-top:8px;padding-bottom:8px;padding-left:12px;padding-right:12px;cursor:pointer;position:relative;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.rich-text-editor-toolbar-btn:hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));z-index:1}.rich-text-editor-toolbar-btn:active{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));z-index:1}.rich-text-editor-toolbar-btn:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:-1px;z-index:2}.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-selected{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));z-index:1}.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));cursor:not-allowed}.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-disabled vega-icon{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}";
+const vegaRichTextEditorToolbarButtonCss = ":host{display:inline-block}.rich-text-editor-toolbar-btn{display:flex;justify-content:center;align-items:center;border-radius:4px;border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));padding-top:8px;padding-bottom:8px;padding-left:12px;padding-right:12px;cursor:pointer;position:relative;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1))}.rich-text-editor-toolbar-btn:hover{background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1));z-index:1}.rich-text-editor-toolbar-btn:active{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));z-index:1}.rich-text-editor-toolbar-btn:focus-visible{outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:-1px;z-index:2}.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-selected{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));background-color:rgba(var(--v-bg-quaternary, 241, 248, 251, 1));z-index:1}.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));cursor:not-allowed}.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-disabled vega-icon{color:rgba(var(--v-text-disabled, 176, 180, 181, 1))}.rich-text-editor-toolbar-btn.rich-text-editor-toolbar-button-hidden{display:none}";
 
 var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
@@ -4793,6 +4000,12 @@ const VegaRichTextEditorToolbarButton = class {
      * @vegaVersion 2.34.0
      */
     this.disabled = false;
+    /**
+     * Specifies whether the rich text editor toolbar button element is hidden.
+     *
+     * @vegaVersion 2.59.0
+     */
+    this.hidden = false;
     /**
      * Specifies whether the rich text editor toolbar button element is selected.
      *