@globalpayments/vega 2.57.1 → 2.59.0

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

@@ -2,65 +2,183 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-7700600c.js');
+const index = require('./index-00ba6623.js');
 const globalSlimmerRegistry = require('./global-slimmer-registry-b3bce7e0.js');
 const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-d10ace87.js');
 const component = require('./component-1e352960.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const domNodeSubjectFactory = require('./dom-node-subject-factory-769dd00f.js');
-const vegaInternalEventId = require('./vega-internal-event-id-bda08efa.js');
-const imageAnnotationAction = require('./image-annotation-action-6715d6f3.js');
+const domNodeSubjectFactory = require('./dom-node-subject-factory-bad99695.js');
+const vegaInternalEventId = require('./vega-internal-event-id-ae6e2c13.js');
+const imageAnnotationAction = require('./image-annotation-action-117fee1f.js');
 const internalIconManager = require('./internal-icon-manager-f8677abb.js');
-const codeBlock = require('./code-block-7650c868.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-5aa4cc83.js');
+const codeBlock = require('./code-block-4bfae76d.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-df6e6df0.js');
 const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtime-metrics-slimmer-e2e274e1.js');
-const index$1 = require('./index-ee4bc191.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-7bb7df10.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-6154c759.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-409bbd1a.js');
-const contentState = require('./content-state-fd5ad4a8.js');
-const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-a6e4e5bc.js');
-const staticSubjectTitle = require('./static-subject-title-7e7d791a.js');
+const index$1 = require('./index-10199ee8.js');
+const contentState = require('./content-state-0da174e0.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-772d1892.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-efc70b94.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-943eb7cc.js');
+const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-34f4577a.js');
+const staticSubjectTitle = require('./static-subject-title-85732e0f.js');
 const observer = require('./observer-f49483e8.js');
 const timer = require('./timer-5f33058b.js');
-const darkModeStateControllerSlimmer = require('./dark-mode-state-controller-slimmer-add5d8a8.js');
-const typeGuard = require('./type-guard-aa8fdeaf.js');
-const ui = require('./ui-6c069604.js');
-const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-91eb0e22.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-96240a0e.js');
-const translationSlimmer = require('./translation-slimmer-83bdb9fe.js');
-const darkModeStyleController = require('./dark-mode-style-controller-f9a32d68.js');
+const darkModeStateControllerSlimmer = require('./dark-mode-state-controller-slimmer-17022f93.js');
+const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-fbf8cbab.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-5df43771.js');
+const translationSlimmer = require('./translation-slimmer-af399096.js');
+const darkModeStyleController = require('./dark-mode-style-controller-ab0703e1.js');
 const chevronDown = require('./chevron-down-9847bf78.js');
 const trashCan = require('./trash-can-46a5e19a.js');
+const ui = require('./ui-4ce1fa08.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
 require('./icon-manager-9072356d.js');
+require('./string-39438062.js');
+require('./type-guard-aa8fdeaf.js');
+require('./breakpoints-ebde4837.js');
+require('./ui-32e69595.js');
+require('./regex-c1f70fd4.js');
+require('./typography-4560e7f1.js');
+require('./object-e2e28e3d.js');
 require('./dynamic-slimmer-f31fdfd7.js');
 require('./wait-for-vega-handler-5469ff80.js');
-require('./string-21427167.js');
-require('./translation-de7e351e.js');
+require('./translation-cde4dce3.js');
 require('./page-resize-observer-slimmer-11937d6f.js');
-require('./ui-32e69595.js');
-require('./breakpoints-ebde4837.js');
 require('./try-get-document-c0ebd39a.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
 require('./array-249289f2.js');
 require('./number-4816603d.js');
-require('./sub-state-observer-slimmer-93d0a609.js');
-require('./internal-vega-event-manager-e98944ac.js');
+require('./sub-state-observer-slimmer-0788232a.js');
+require('./internal-vega-event-manager-83065493.js');
 require('./synchronize-task-queue-1ee80e94.js');
-require('./keyboard-manager-slimmer-92c7227b.js');
-require('./keyboard-manager-0be55fb9.js');
-require('./regex-c1f70fd4.js');
-require('./typography-4560e7f1.js');
+require('./keyboard-manager-slimmer-faca2038.js');
+require('./keyboard-manager-6858915b.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-ce2162c8.js');
 require('./index-4d7bce1a.js');
 require('./_commonjsHelpers-537d719a.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;
@@ -76,6 +194,7 @@ class VegaRichTextEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
       return (index.h("div", { class: {
           'rich-text-editor-container': true,
           'disabled': this.disabled,
+          'vega-hidden': this.sourceView,
         }, style: { minHeight: `${this.rows * 24}px` }, onClick: this.richTextContentFocus, role: "textbox", tabIndex: !this.disabled ? -1 : 0, onKeyDown: accessibility.createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
         index.h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value }),
         this.renderCharacterCounter()));
@@ -94,6 +213,20 @@ class VegaRichTextEditorRenderer extends globalSlimmerRegistry.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 (index.h("div", { class: {
+          'source-view-container': true,
+          'vega-hidden': !this.sourceView,
+        } },
+        index.h("vega-code-block", { ref: (ref) => (this.sourceCodeBlockRef = ref), disabled: this.disabled, value: { language: 'html', code: sourceViewValue } })));
+    };
   }
   /**
    * Component lifecycle - [componentDidRender]{@link VegaRichTextEditor.componentDidRender}
@@ -112,7 +245,7 @@ class VegaRichTextEditorRenderer extends globalSlimmerRegistry.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;
@@ -135,6 +268,11 @@ class VegaRichTextEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
       return this.richTextContentRef.shadowRoot.querySelector('.rich-text-content');
     }
   }
+  getSourceCode() {
+    if (this.sourceCodeBlockRef) {
+      return this.sourceCodeBlockRef.value.code;
+    }
+  }
   render() {
     return index.h(index.Host, null, this.renderRichTextEditor());
   }
@@ -143,45 +281,62 @@ class VegaRichTextEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
       this.renderLabel(),
       this.hint && this.renderHintMessage(),
       this.toolbarRenderer.render(),
-      this.renderTextContent(),
+      this.renderContent(),
       this.renderErrorMessage()));
   }
   renderLabel() {
     return (this.label && (index.h("vega-field-label", { onClick: this.richTextContentFocus, isFieldRequired: this.required, disabled: this.disabled, label: this.label })));
   }
+  renderContent() {
+    return (index.h(index.Fragment, null,
+      this.renderTextContent(),
+      this.renderSourceViewContent()));
+  }
 }
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "host", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "toolbarRenderer", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "label", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "required", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "hint", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "disabled", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "rows", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "placeholder", void 0);
-__decorate$A([
+__decorate$B([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "value", void 0);
-__decorate$A([
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "sourceView", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "toolbarItems", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "sourceEditConfig", void 0);
+__decorate$B([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "allowSourceEdit", void 0);
+__decorate$B([
   globalSlimmerRegistry.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;
@@ -226,73 +381,108 @@ class ToolbarRenderer extends globalSlimmerRegistry.VegaSlimmer {
     };
   }
   render() {
-    return (index.h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" }, this.toolbarItems.map((group) => {
-      return (index.h("div", { class: "toolbar-btn-group" }, group.map((item) => {
-        return this.getToolbarBtnRenderer(item).render();
+    return (index.h("vega-flex", { gap: "size-8", alignItems: "center", flexWrap: "wrap" },
+      this.allowSourceEdit && (index.h(index.Fragment, null,
+        index.h("div", { class: "toolbar-btn-group" }, this.sourceEditToolbarButtonSlimmer.render()),
+        !this.sourceView && this.toolbarItems.length > 0 && this.renderVegaDivider())),
+      this.toolbarItems.map((group) => {
+        return (index.h("div", { class: "toolbar-btn-group" }, group.map((item) => {
+          const presetRenderer = this.getToolbarBtnRenderer(item);
+          const customRenderer = imageAnnotationAction.RTEDTORendererManager.getRTEToolbarButtonRenderer(item);
+          if (presetRenderer) {
+            return presetRenderer.render();
+          }
+          else if (customRenderer) {
+            return customRenderer.render(index.h, {
+              host: this.host,
+              rteRange: this.selectionController.getCurrentRange(),
+              sourceEditMode: this.sourceView,
+            });
+          }
+          return null;
+        })));
       })));
-    })));
+  }
+  renderVegaDivider() {
+    return (index.h("vega-box", { height: "size-32" },
+      index.h("vega-divider", { direction: "vertical" })));
   }
 }
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "toolbarItems", void 0);
-__decorate$z([
+__decorate$A([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "allowSourceEdit", void 0);
+__decorate$A([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "host", void 0);
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "clearStyleToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "boldToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "textStylesToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "italicToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "underlineToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "textColorToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "bulletsNumbersToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "strikethroughToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "imageToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "moreIndentToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "lessIndentToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "codeToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);
-__decorate$z([
+__decorate$A([
   globalSlimmerRegistry.MapToComponentField()
 ], ToolbarRenderer.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate$A([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "sourceEditToolbarButtonSlimmer", void 0);
+__decorate$A([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "selectionController", void 0);
+__decorate$A([
+  globalSlimmerRegistry.MapToComponentField()
+], ToolbarRenderer.prototype, "sourceView", void 0);
 
 const bold = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>`,
 };
 
-var __decorate$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 imageAnnotationAction.ToolbarButtonSlimmer {
+class BoldToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'bold',
@@ -329,7 +519,7 @@ class BoldToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
 (() => {
   internalIconManager.VegaInternalIconManager.register({ bold });
 })();
-__decorate$y([
+__decorate$z([
   globalSlimmerRegistry.MapToComponentField()
 ], BoldToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -337,32 +527,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 codeBlock.TextSplittableAction {
-  constructor(italic) {
-    super();
-    this.isFlushable = true;
-    this.italic = italic;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {ItalicAnnotation} The annotation
-   */
-  toAnnotation() {
-    return new codeBlock.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 imageAnnotationAction.ToolbarButtonSlimmer {
+class ItalicToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'italic',
@@ -381,7 +552,7 @@ class ItalicToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlim
     this.selectionController
       .getSelectedNodes()
       .filter((node) => node instanceof codeBlock.RTETextNode)
-      .forEach((node) => node.apply(new ItalicAnnotationAction(!italic)));
+      .forEach((node) => node.apply(new codeBlock.ItalicAnnotationAction(!italic)));
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
@@ -397,7 +568,7 @@ class ItalicToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlim
 (() => {
   internalIconManager.VegaInternalIconManager.register({ italic });
 })();
-__decorate$x([
+__decorate$y([
   globalSlimmerRegistry.MapToComponentField()
 ], ItalicToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -405,32 +576,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 codeBlock.TextSplittableAction {
-  constructor(underline) {
-    super();
-    this.isFlushable = true;
-    this.underline = underline;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {Annotation} the annotation
-   */
-  toAnnotation() {
-    return new codeBlock.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 imageAnnotationAction.ToolbarButtonSlimmer {
+class UnderlineToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'underline',
@@ -452,7 +604,7 @@ class UnderlineToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonS
     this.selectionController
       .getSelectedNodes()
       .filter((node) => node instanceof codeBlock.RTETextNode)
-      .forEach((node) => node.apply(new UnderlineAnnotationAction(!selected)));
+      .forEach((node) => node.apply(new codeBlock.UnderlineAnnotationAction(!selected)));
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
@@ -468,7 +620,7 @@ class UnderlineToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonS
 (() => {
   internalIconManager.VegaInternalIconManager.register({ underline });
 })();
-__decorate$w([
+__decorate$x([
   globalSlimmerRegistry.MapToComponentField()
 ], UnderlineToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -476,13 +628,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 imageAnnotationAction.ToolbarButtonSlimmer {
+class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'text-size',
@@ -524,7 +676,7 @@ class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
       const boldAnnotation = new codeBlock.BoldAnnotation(item.bold);
       return (index.h("vega-dropdown-item", { key: item.key, itemKey: item.key },
         index.h("vega-box", { padding: { right: 'size-20' } },
-          index.h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.render()), boldAnnotation.render()) }, this.translationSlimmer.t(item.label)))));
+          index.h("div", { style: Object.assign(Object.assign({}, textStyleAnnotation.renderStyle({ standalone: true })), boldAnnotation.renderStyle({ standalone: true })) }, this.translationSlimmer.t(item.label)))));
     })));
   }
   isSelected() {
@@ -540,6 +692,7 @@ class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, domNodeSubjectFactory.VegaDropdownClick, this.handleDropdownItemClick);
   }
   getSelectedSourceKey() {
+    var _a;
     const currentSelectedBlocks = this.selectionController
       .getSelectedBlocks()
       .filter((block) => block instanceof codeBlock.RTETextBlock);
@@ -547,7 +700,7 @@ class TextStylesToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
       currentSelectedBlocks.every((block) => block.type === currentSelectedBlocks[0].type);
     if (isSameType) {
       const blockAnnotation = currentSelectedBlocks[0].getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.TEXT_STYLE);
-      return blockAnnotation.textStyle;
+      return (_a = blockAnnotation === null || blockAnnotation === void 0 ? void 0 : blockAnnotation.textStyle) !== null && _a !== void 0 ? _a : '';
     }
     return '';
   }
@@ -587,10 +740,10 @@ TextStylesToolbarButtonSlimmer.items = [
     label: 'Paragraph',
   },
 ];
-__decorate$v([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$v([
+__decorate$w([
   globalSlimmerRegistry.MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "focusController", void 0);
 
@@ -598,13 +751,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 imageAnnotationAction.ToolbarButtonSlimmer {
+class ClearStyleToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'text-slash',
@@ -636,7 +789,7 @@ class ClearStyleToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     'text-slash': TextSlash,
   });
 })();
-__decorate$u([
+__decorate$v([
   globalSlimmerRegistry.MapToComponentField()
 ], ClearStyleToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -644,13 +797,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 imageAnnotationAction.ToolbarButtonSlimmer {
+class CodeToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'code-simple',
@@ -683,7 +836,7 @@ class CodeToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
 (() => {
   internalIconManager.VegaInternalIconManager.register({ 'code-simple': codeSimple });
 })();
-__decorate$t([
+__decorate$u([
   globalSlimmerRegistry.MapToComponentField()
 ], CodeToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -691,32 +844,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 codeBlock.TextSplittableAction {
-  constructor(underline) {
-    super();
-    this.isFlushable = true;
-    this.strikethrough = underline;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {Annotation} the annotation
-   */
-  toAnnotation() {
-    return new codeBlock.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 imageAnnotationAction.ToolbarButtonSlimmer {
+class StrikethroughToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'strikethrough',
@@ -738,7 +872,7 @@ class StrikethroughToolbarButtonSlimmer extends imageAnnotationAction.ToolbarBut
     this.selectionController
       .getSelectedNodes()
       .filter((node) => node instanceof codeBlock.RTETextNode)
-      .forEach((node) => node.apply(new StrikethroughAnnotationAction(!selected)));
+      .forEach((node) => node.apply(new codeBlock.StrikethroughAnnotationAction(!selected)));
   }
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
@@ -754,7 +888,7 @@ class StrikethroughToolbarButtonSlimmer extends imageAnnotationAction.ToolbarBut
 (() => {
   internalIconManager.VegaInternalIconManager.register({ strikethrough });
 })();
-__decorate$s([
+__decorate$t([
   globalSlimmerRegistry.MapToComponentField()
 ], StrikethroughToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -762,13 +896,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 imageAnnotationAction.ToolbarButtonSlimmer {
+class LinkToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'link',
@@ -787,6 +921,7 @@ class LinkToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
               link: { href: url, groupKey: groupKey },
               newText: textChanged ? text : undefined,
               needMergeNode: textChanged && this.currentSelectedNodes.length > 1,
+              type: 'link',
             }));
           });
           return;
@@ -844,7 +979,7 @@ class LinkToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimme
 (() => {
   internalIconManager.VegaInternalIconManager.register({ link: link });
 })();
-__decorate$r([
+__decorate$s([
   globalSlimmerRegistry.MapToComponentField()
 ], LinkToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -852,32 +987,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 codeBlock.AnnotationAction {
-  constructor(indent) {
-    super();
-    this.isFlushable = true;
-    this.indent = indent;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {Annotation} The annotation
-   */
-  toAnnotation() {
-    return new codeBlock.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 imageAnnotationAction.ToolbarButtonSlimmer {
+class MoreIndentToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'indent',
@@ -894,20 +1010,20 @@ class MoreIndentToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
       selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
-      selectedNodes.some((node) => node instanceof codeBlock.RTEImageNode));
+      selectedNodes.some((node) => node instanceof contentState.RTEImageNode));
   }
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {
       var _a, _b;
       const indent = (_b = (_a = item.getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
-      item.apply(new IndentAnnotationAction(indent + 1));
+      item.apply(new codeBlock.IndentAnnotationAction(indent + 1));
     });
   }
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({ indent: indent });
 })();
-__decorate$q([
+__decorate$r([
   globalSlimmerRegistry.MapToComponentField()
 ], MoreIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -915,13 +1031,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 imageAnnotationAction.ToolbarButtonSlimmer {
+class LessIndentToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'outdent',
@@ -938,21 +1054,21 @@ class LessIndentToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
       selectedBlocks.some((node) => node.type === 'list-item' || node.type === 'code-block') ||
-      selectedNodes.some((node) => node instanceof codeBlock.RTEImageNode));
+      selectedNodes.some((node) => node instanceof contentState.RTEImageNode));
   }
   onClick() {
     this.selectionController.getSelectedBlocks().forEach((item) => {
       var _a, _b;
       const indent = (_b = (_a = item.getAnnotationByType(codeBlock.BlockAnnotationTypeEnum.INDENT)) === null || _a === void 0 ? void 0 : _a.indent) !== null && _b !== void 0 ? _b : 0;
       const newIndent = indent > 1 ? indent - 1 : 0;
-      item.apply(new IndentAnnotationAction(newIndent));
+      item.apply(new codeBlock.IndentAnnotationAction(newIndent));
     });
   }
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({ outdent: outdent });
 })();
-__decorate$p([
+__decorate$q([
   globalSlimmerRegistry.MapToComponentField()
 ], LessIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -973,13 +1089,13 @@ class ImageUpdateUrlAction extends codeBlock.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 imageAnnotationAction.ToolbarButtonSlimmer {
+class ImageToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'image',
@@ -1031,13 +1147,13 @@ class ImageToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimm
 (() => {
   internalIconManager.VegaInternalIconManager.register({ image: image });
 })();
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "insertImageController", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "imageInsertedEventEmitter", void 0);
-__decorate$o([
+__decorate$p([
   globalSlimmerRegistry.MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -1074,13 +1190,13 @@ class TransformParagraphAction extends codeBlock.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 imageAnnotationAction.ToolbarButtonSlimmer {
+class BulletsToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ul',
@@ -1105,7 +1221,7 @@ class BulletsToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSli
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node instanceof codeBlock.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
+      selectedNodes.some((node) => node instanceof contentState.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'bullet-list') {
     return (selectedBlocks.length > 0 &&
@@ -1133,20 +1249,20 @@ class BulletsToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSli
     }
   }
 }
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.MapToComponentField()
 ], BulletsToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$n([
+__decorate$o([
   globalSlimmerRegistry.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 imageAnnotationAction.ToolbarButtonSlimmer {
+class NumbersToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ol',
@@ -1169,7 +1285,7 @@ class NumbersToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSli
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node instanceof codeBlock.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
+      selectedNodes.some((node) => node instanceof contentState.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
   }
   isListType(selectedBlocks, type = 'number-list') {
     return (selectedBlocks.length > 0 &&
@@ -1197,20 +1313,20 @@ class NumbersToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSli
     }
   }
 }
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.MapToComponentField()
 ], NumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$m([
+__decorate$n([
   globalSlimmerRegistry.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 imageAnnotationAction.ToolbarButtonSlimmer {
+class BulletsNumbersToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'list-ul',
@@ -1245,7 +1361,7 @@ class BulletsNumbersToolbarButtonSlimmer extends imageAnnotationAction.ToolbarBu
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node instanceof codeBlock.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
+      selectedNodes.some((node) => node instanceof contentState.RTEImageNode || node instanceof codeBlock.RTECodeBlockNode));
   }
 }
 (() => {
@@ -1254,49 +1370,30 @@ class BulletsNumbersToolbarButtonSlimmer extends imageAnnotationAction.ToolbarBu
     'list-ol': ListOL,
   });
 })();
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "bulletsToolbarButtonSlimmer", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "numbersToolbarButtonSlimmer", void 0);
-__decorate$l([
+__decorate$m([
   globalSlimmerRegistry.MapToComponentMethod('componentWillRender')
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
-/**
- * Action to toggle block horizontal alignment annotation
- */
-class HorizontalAlignmentAnnotationAction extends codeBlock.AnnotationAction {
-  constructor(textAlign) {
-    super();
-    this.isFlushable = true;
-    this.textAlign = textAlign;
-  }
-  /**
-   * Converts the action to an annotation
-   *
-   * @returns {HorizontalAlignmentAnnotation} The annotation
-   */
-  toAnnotation() {
-    return new codeBlock.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 imageAnnotationAction.ToolbarButtonSlimmer {
+class LeftAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-left',
@@ -1316,7 +1413,7 @@ class LeftAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonS
   onClick() {
     this.selectionController
       .getSelectedBlocks()
-      .forEach((item) => item.apply(new HorizontalAlignmentAnnotationAction('left')));
+      .forEach((item) => item.apply(new codeBlock.HorizontalAlignmentAnnotationAction('left')));
     void this.popoverRef.hide();
   }
 }
@@ -1325,10 +1422,10 @@ class LeftAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonS
     'align-left': AlignLeft,
   });
 })();
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$k([
+__decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1336,13 +1433,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 imageAnnotationAction.ToolbarButtonSlimmer {
+class CenterAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-center',
@@ -1362,7 +1459,7 @@ class CenterAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButto
   onClick() {
     this.selectionController
       .getSelectedBlocks()
-      .forEach((item) => item.apply(new HorizontalAlignmentAnnotationAction('center')));
+      .forEach((item) => item.apply(new codeBlock.HorizontalAlignmentAnnotationAction('center')));
     void this.popoverRef.hide();
   }
 }
@@ -1371,10 +1468,10 @@ class CenterAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButto
     'align-center': AlignCenter,
   });
 })();
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$j([
+__decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1382,13 +1479,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 imageAnnotationAction.ToolbarButtonSlimmer {
+class RightAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-right',
@@ -1408,7 +1505,7 @@ class RightAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
   onClick() {
     this.selectionController
       .getSelectedBlocks()
-      .forEach((item) => item.apply(new HorizontalAlignmentAnnotationAction('right')));
+      .forEach((item) => item.apply(new codeBlock.HorizontalAlignmentAnnotationAction('right')));
     void this.popoverRef.hide();
   }
 }
@@ -1417,10 +1514,10 @@ class RightAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     'align-right': AlignRight,
   });
 })();
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$i([
+__decorate$j([
   globalSlimmerRegistry.MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1428,13 +1525,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 imageAnnotationAction.ToolbarButtonSlimmer {
+class JustifyAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-justify',
@@ -1454,7 +1551,7 @@ class JustifyAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButt
   onClick() {
     this.selectionController
       .getSelectedBlocks()
-      .forEach((item) => item.apply(new HorizontalAlignmentAnnotationAction('justify')));
+      .forEach((item) => item.apply(new codeBlock.HorizontalAlignmentAnnotationAction('justify')));
     void this.popoverRef.hide();
   }
 }
@@ -1463,20 +1560,20 @@ class JustifyAlignToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButt
     'align-justify': AlignJustify,
   });
 })();
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.MapToComponentField()
 ], JustifyAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$h([
+__decorate$i([
   globalSlimmerRegistry.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 imageAnnotationAction.ToolbarButtonSlimmer {
+class HorizontalAlignmentToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'align-left',
@@ -1528,22 +1625,22 @@ class HorizontalAlignmentToolbarButtonSlimmer extends imageAnnotationAction.Tool
         .some((block) => block.type === 'code-block'));
   }
 }
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentField()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "leftAlignToolbarButtonSlimmer", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "centerAlignToolbarButtonSlimmer", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "rightAlignToolbarButtonSlimmer", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "justifiedToolbarButtonSlimmer", void 0);
-__decorate$g([
+__decorate$h([
   globalSlimmerRegistry.MapToComponentMethod('componentWillRender')
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
@@ -1584,7 +1681,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;
@@ -1617,6 +1714,7 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
     if (this.value && !(this.value instanceof contentState.VegaRTEContent)) {
       this.value = contentState.VegaRTEContent.fromJSON(this.value);
     }
+    this.registerEditorRefAndContent();
   }
   /**
    * Watches the value of the editor and updates the internal value.
@@ -1635,6 +1733,7 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
         detail: this.value,
       });
     }
+    this.registerEditorRefAndContent();
   }
   /**
    * Updates the value of the editor and restore the selection.
@@ -1657,36 +1756,44 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
   isAcceptableFlushChange() {
     return true;
   }
+  /**
+   * Register the host element and the current content.
+   */
+  registerEditorRefAndContent() {
+    if (this.host && this.host.value) {
+      codeBlock.stateEntityRenderingRegistry.register(this.host, this.host.value);
+    }
+  }
 }
 ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "host", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], ValueController.prototype, "value", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "changeEventEmitter", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "valueController", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "historyController", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentField()
 ], ValueController.prototype, "selectionController", void 0);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], ValueController.prototype, "connectedCallback", null);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], ValueController.prototype, "disconnectedCallback", null);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentMethod('componentWillLoad')
 ], ValueController.prototype, "componentWillLoad", null);
-__decorate$f([
+__decorate$g([
   globalSlimmerRegistry.MapToComponentMethod('watchValueUpdate')
 ], ValueController.prototype, "watchValueUpdate", null);
 
@@ -1763,7 +1870,7 @@ class BaseHandler {
   createEmptyParagraph() {
     const paragraph = new codeBlock.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
     const textNode = new codeBlock.RTETextNode(`${paragraph.id}1`, '', paragraph);
-    paragraph.apply(new codeBlock.AppendChildNodesAction([textNode]));
+    paragraph.apply(new codeBlock.AppendChildrenAction([textNode]));
     return paragraph;
   }
   /**
@@ -1786,20 +1893,6 @@ class BaseHandler {
   }
 }
 
-/**
- * Insert a new node before a existing node
- *
- * @example currentNode.parentBlock.apply(new InsertNodesBeforeAction(currentNode, newNode, ...))
- */
-class InsertNodesBeforeAction extends codeBlock.ModifyContentAction {
-  constructor(referNode, ...nodesToBeInserted) {
-    super();
-    this.type = codeBlock.ModifyContentActionType.INSERT_NODES_BEFORE;
-    this.referNode = referNode;
-    this.nodesToBeInserted = nodesToBeInserted;
-  }
-}
-
 /**
  * Replace the text node selected content to new text
  *
@@ -1815,6 +1908,23 @@ class ReplaceSelectedTextAction extends codeBlock.ModifyContentAction {
   }
 }
 
+/**
+ * Action to type character into a decorator node
+ *
+ * @example decoratorNode.parent.apply(new InsertTextToDecoratorNodeAction(decoratorNode, '', 0 | 1))
+ */
+class InsertTextToDecoratorNodeAction extends codeBlock.ModifyContentAction {
+  constructor(decoratorNode, text, offset) {
+    super();
+    this.type = codeBlock.ModifyContentActionType.INSERT_TEXT_TO_DECORATOR_NODE;
+    this.text = '';
+    this.offset = 0;
+    this.decoratorNode = decoratorNode;
+    this.text = text;
+    this.offset = offset;
+  }
+}
+
 /** Handles inserting text into a VegaRTEContent based on the current selection and input event. User input character will trigger this callback */
 class InsertTextHandler extends BaseHandler {
   /**
@@ -1833,27 +1943,32 @@ class InsertTextHandler extends BaseHandler {
         this.selectionController.enqueueSelectionRangeFutureState(cursorNode, text.length);
       }
       else if (selectedNodes[0] instanceof codeBlock.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 === codeBlock.ZERO_WIDTH_SPACE &&
-            startOffset === codeBlock.ZERO_WIDTH_SPACE.length &&
-            cursorNode.isEmpty()) {
-            startContainer.nodeValue = '';
-            nextOffset = nextOffset - codeBlock.ZERO_WIDTH_SPACE.length;
-          }
-          if (cursorNode instanceof codeBlock.RTETextNode) {
+        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 === codeBlock.ZERO_WIDTH_SPACE &&
+              startOffset === codeBlock.ZERO_WIDTH_SPACE.length &&
+              cursorNode.isEmpty()) {
+              startContainer.nodeValue = '';
+              nextOffset = nextOffset - codeBlock.ZERO_WIDTH_SPACE.length;
+            }
+            if (cursorNode instanceof codeBlock.RTETextNode) {
+              updateFlag = true;
+              cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
+            }
+          }
+          updateFlag &&
+            this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(nextOffset, cursorNode['text'].length));
+        }
+        else {
+          selectedNodes[0].parent.apply(new InsertTextToDecoratorNodeAction(selectedNodes[0], text, startOffset));
         }
-        updateFlag &&
-          this.selectionController.enqueueSelectionRangeFutureState(cursorNode, Math.min(nextOffset, cursorNode['text'].length));
       }
     }
     else {
@@ -1890,15 +2005,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 codeBlock.UpdateTextAction(text));
-      return lineBreakNode;
+    if (textBlock instanceof codeBlock.RTETextBlock) {
+      const index = textBlock.children.indexOf(lineBreakNode);
+      if (startOffset === 0 && startOffset === endOffset && textBlock.children[index + 1]) {
+        const newTextNode = lineBreakNode.cloneWithText(text);
+        textBlock.apply(new codeBlock.InsertChildrenBeforeAction(lineBreakNode, newTextNode));
+        return newTextNode;
+      }
+      else {
+        lineBreakNode.apply(new codeBlock.UpdateTextAction(text));
+        return lineBreakNode;
+      }
     }
   }
 }
@@ -1958,7 +2075,7 @@ class InsertParagraphHandler extends BaseHandler {
        */
       if (firstBlock.type !== lastBlock.type &&
         range.startContainer.nodeType === range.endContainer.nodeType) {
-        firstBlock.apply(new codeBlock.MergeTwoBlocksNodesAction(lastBlock));
+        firstBlock.apply(new contentState.MergeTwoBlocksNodesAction(lastBlock));
         const splitAction = new codeBlock.SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
         firstBlock.apply(splitAction);
         this.switchCaretPositionToNextElement(splitAction.newBlock);
@@ -1975,7 +2092,7 @@ class InsertParagraphHandler extends BaseHandler {
     const currentBlock = cursorNode.parent;
     const { startOffset } = this.selectionController.getCurrentRange();
     if (currentBlock) {
-      const breakAction = new contentState.BreakSingleBlockAction(cursorNode, startOffset);
+      const breakAction = new contentState.InsertNewParagraphAction(cursorNode, startOffset);
       currentBlock.apply(breakAction);
       this.switchCaretPositionToNextElement(breakAction.newBlock);
     }
@@ -2125,1114 +2242,85 @@ class DeleteBlockContentAction extends codeBlock.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 codeBlock.RTETextNode &&
-      lastSelectedNode.isEmpty()) {
-      lastSelectedNode.parent.apply(new codeBlock.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 codeBlock.RTETextBlock &&
-      block.children.length === 1 &&
-      block.children[0].isEmpty() &&
-      block.type !== 'paragraph') {
-      const paragraph = this.createEmptyParagraph();
-      paragraph.apply(new codeBlock.ReplaceChildNodesAction(block.children));
-      block.parent.apply(new codeBlock.InsertBlocksBeforeAction(block, paragraph));
-      block.parent.apply(new codeBlock.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 codeBlock.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(typeGuard.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: createPublicApiRuntimeMetricsSlimmer.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 = ui.rgbToHex(color)) === null || _a === void 0 ? void 0 : _a.toUpperCase();
-    if (hexColor) {
-      const colorSchema = codeBlock.RTE_TEXT_COLORS.find((schema) => schema.light === hexColor || schema.dark === hexColor);
-      if (colorSchema)
-        return colorSchema.key;
-      return null;
-    }
-    else {
-      for (const color of codeBlock.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: createPublicApiRuntimeMetricsSlimmer.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 codeBlock.RTETextBlock.from({
-      id: createPublicApiRuntimeMetricsSlimmer.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 contentState.RTEListBlock.from({
-      id: createPublicApiRuntimeMetricsSlimmer.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 contentState.RTEListItemBlock.from({
-      id: createPublicApiRuntimeMetricsSlimmer.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 codeBlock.RTETextBlock.from({
-      id: createPublicApiRuntimeMetricsSlimmer.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 contentState.RTEImageBlock.from({
-      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
-      type: 'image',
-      nodes: [
-        {
-          id: createPublicApiRuntimeMetricsSlimmer.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 (typeGuard.isNonNullable(image)) {
-      return contentState.RTEImageBlock.from({
-        id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
-        type: 'image',
-        nodes: [
-          {
-            id: createPublicApiRuntimeMetricsSlimmer.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 contentState.RTEListBlock.from({
-      id: createPublicApiRuntimeMetricsSlimmer.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 contentState.RTEImageBlock.from({
-      id: createPublicApiRuntimeMetricsSlimmer.generateUUID(),
-      type: 'image',
-      nodes: [
-        {
-          id: createPublicApiRuntimeMetricsSlimmer.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 contentState.RTEListItemBlock.from({
-      id: createPublicApiRuntimeMetricsSlimmer.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 codeBlock.RTECodeBlock.from({
-        id: createPublicApiRuntimeMetricsSlimmer.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 codeBlock.RTETextNode &&
+      lastSelectedNode.isEmpty()) {
+      lastSelectedNode.parent.apply(new codeBlock.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 codeBlock.RTETextBlock &&
+      block.children.length === 1 &&
+      block.children[0].isEmpty() &&
+      block.type !== 'paragraph') {
+      const paragraph = this.createEmptyParagraph();
+      paragraph.apply(new codeBlock.ReplaceChildNodesAction(block.children));
+      block.parent.apply(new codeBlock.InsertChildrenBeforeAction(block, paragraph));
+      block.parent.apply(new codeBlock.RemoveChildrenAction(block));
     }
-    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 codeBlock.AppendChildrenAction([paragraph]));
+    this.selectionController.enqueueSelectionRangeFutureState(paragraph.children[0], 1);
   }
 }
 
@@ -3240,10 +2328,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.
    *
@@ -3268,7 +2352,7 @@ class InsertPasteHandler extends BaseHandler {
    * @param { RTEContentBlock[]} blocks - blocks
    */
   insertBlocksToRoot(blocks) {
-    this.currentState.apply(new codeBlock.AppendChildNodesAction(blocks));
+    this.currentState.apply(new codeBlock.AppendChildrenAction(blocks));
   }
   /**
    * Insert the blocks to content
@@ -3282,7 +2366,7 @@ class InsertPasteHandler extends BaseHandler {
       const { startOffset } = this.selectionController.getCurrentRange();
       const breakAction = new codeBlock.SplitBlockWithNodeAction(cursorNode, startOffset);
       currentBlock.apply(breakAction);
-      currentBlock.parent.apply(new codeBlock.InsertBlocksAfterAction(currentBlock, ...blocks));
+      currentBlock.parent.apply(new codeBlock.InsertChildrenAfterAction(currentBlock, ...blocks));
       this.switchCaretPositionToNextElement(breakAction.newBlock);
     }
   }
@@ -3296,7 +2380,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 codeBlock.InsertBlocksBeforeAction(currentBlock, ...blocks));
+      currentBlock.parent.apply(new codeBlock.InsertChildrenBeforeAction(currentBlock, ...blocks));
       this.switchCaretPositionToNextElement(currentBlock);
     }
   }
@@ -3315,8 +2399,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 contentState.ElementToDtoStrategyProcessor.process(Array.from(tempContainer.childNodes))
       .filter(Boolean)
       .map((output) => output.toDto())
       .filter(Boolean);
@@ -3341,13 +2424,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;
@@ -3474,28 +2560,28 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
     return false;
   }
 }
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "host", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "value", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "valueController", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "selectionController", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentField()
 ], UserInputController.prototype, "insertCompositionTextController", void 0);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], UserInputController.prototype, "addActionListener", null);
-__decorate$e([
+__decorate$f([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], UserInputController.prototype, "removeActionListener", null);
 
@@ -3515,7 +2601,7 @@ class InsertImageToBlockAction extends codeBlock.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;
@@ -3532,11 +2618,11 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
   insertImageToCaretPosition(imageUrl) {
     const selectedBlocks = this.selectionController.getSelectedBlocks();
     const imageBlock = new contentState.RTEImageBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID());
-    const newImageNode = new codeBlock.RTEImageNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), imageUrl, imageBlock);
+    const newImageNode = new contentState.RTEImageNode(createPublicApiRuntimeMetricsSlimmer.generateUUID(), imageUrl, imageBlock);
     newImageNode.apply(new imageAnnotationAction.ImageAnnotationAction('md', ''));
-    imageBlock.apply(new codeBlock.AppendChildNodesAction([newImageNode]));
+    imageBlock.apply(new codeBlock.AppendChildrenAction([newImageNode]));
     if (selectedBlocks.length < 1 || this.value.children.length < 1) {
-      this.value.apply(new codeBlock.AppendChildNodesAction([imageBlock]));
+      this.value.apply(new codeBlock.AppendChildrenAction([imageBlock]));
       void this.valueController.flushChanges(this.value);
     }
     else {
@@ -3604,26 +2690,26 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "selectionController", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "value", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "valueController", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertImageController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], InsertImageController.prototype, "registerObserver", null);
-__decorate$d([
+__decorate$e([
   globalSlimmerRegistry.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;
@@ -3641,7 +2727,14 @@ class FocusController extends globalSlimmerRegistry.VegaSlimmer {
      * @param {RTEContentBlock} lastBlock - The last block of the content
      */
     this.doFocusOnLastTextNode = async (lastBlock) => {
-      this.setCaretRangeToNodeEnd(codeBlock.stateEntityRenderingRegistry.getDOMByEntity(lastBlock.getLastNode()).firstChild);
+      const lastNode = lastBlock.getLastNode();
+      const dom = codeBlock.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();
     };
   }
@@ -3660,7 +2753,7 @@ class FocusController extends globalSlimmerRegistry.VegaSlimmer {
         type: 'paragraph',
         nodes: [{ id: createPublicApiRuntimeMetricsSlimmer.generateUUID(), type: 'text', text: '' }],
       });
-      lastBlock.parent.apply(new codeBlock.InsertBlocksAfterAction(lastBlock, newTextBlock));
+      lastBlock.parent.apply(new codeBlock.InsertChildrenAfterAction(lastBlock, newTextBlock));
       await this.valueController.flushChanges(this.value);
       await this.doFocusOnLastTextNode(newTextBlock);
     }
@@ -3672,27 +2765,28 @@ class FocusController extends globalSlimmerRegistry.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([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "selectionController", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], FocusController.prototype, "valueController", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.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;
@@ -3732,14 +2826,14 @@ class TextNodeColorController extends globalSlimmerRegistry.VegaSlimmer {
     return true;
   }
 }
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], TextNodeColorController.prototype, "connectedCallback", null);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.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;
@@ -3769,7 +2863,9 @@ class InsertCompositionTextController extends globalSlimmerRegistry.VegaSlimmer
           if (target.nodeType === Node.TEXT_NODE && target.parentElement) {
             const richTextNode = codeBlock.stateEntityRenderingRegistry.getEntityByDOM(target.parentElement);
             const newValue = target.textContent;
-            if (richTextNode instanceof codeBlock.RTETextNode) {
+            if (richTextNode instanceof codeBlock.RTETextNode &&
+              richTextNode.isContentEditable() &&
+              richTextNode.parent instanceof codeBlock.RTETextBlock) {
               updateFlag = this.updateCurrentNodeText(richTextNode, newValue, oldValue);
             }
             else if (newValue) {
@@ -3883,7 +2979,7 @@ class InsertCompositionTextController extends globalSlimmerRegistry.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 codeBlock.InsertChildrenBeforeAction(textBlock.children[index + 1], newTextNode));
     }
   }
   /**
@@ -3947,35 +3043,35 @@ class InsertCompositionTextController extends globalSlimmerRegistry.VegaSlimmer
     this.editableElementRef.dispatchEvent(inputEvent);
   }
 }
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "selectionController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "host", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "value", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "valueController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "userInputController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], InsertCompositionTextController.prototype, "addCompositionTextEventListener", null);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], InsertCompositionTextController.prototype, "removeCompositionTextEventListener", null);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.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;
@@ -4033,18 +3129,16 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.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 codeBlock.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 codeBlock.RemoveChildAction(item));
+        item.parent.apply(new codeBlock.RemoveChildrenAction(item));
       });
     }
     this.removeRangeStartAndEndSelectedText();
@@ -4053,28 +3147,21 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.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 codeBlock.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 codeBlock.InsertBlocksBeforeAction(startNode.parent, paragraph));
-        startNode.parent.apply(new codeBlock.RemoveChildAction(startNode));
+        startNode.parent.parent.apply(new codeBlock.InsertChildrenBeforeAction(startNode.parent, paragraph));
+        startNode.parent.apply(new codeBlock.RemoveChildrenAction(startNode));
         return paragraph.children[0];
       }
       else if (startNode === startNode.parent.children[0]) {
         // the start node should be the next image item if the image is first item
-        startNode.parent.apply(new codeBlock.RemoveChildAction(startNode));
+        startNode.parent.apply(new codeBlock.RemoveChildrenAction(startNode));
         return startNode.parent.children[0];
       }
     }
-    else if (startNode instanceof codeBlock.RTECodeBlockNode) {
-      const paragraph = this.createEmptyParagraph();
-      startNode.parent.parent.apply(new codeBlock.InsertBlocksBeforeAction(startNode.parent, paragraph));
-      startNode.parent.apply(new codeBlock.RemoveChildAction(startNode));
-      return paragraph.children[0];
-    }
     return startNode;
   }
   /**
@@ -4083,10 +3170,11 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
   removeRangeStartAndEndSelectedText() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     const currentRange = this.selectionController.getCurrentRange();
-    if (selectedNodes[0] instanceof codeBlock.RTETextNode) {
+    if (selectedNodes[0] instanceof codeBlock.RTETextNode && selectedNodes[0].isContentEditable()) {
       selectedNodes[0].apply(new ReplaceSelectedTextAction('', currentRange));
     }
-    if (selectedNodes.length > 1 && selectedNodes[selectedNodes.length - 1] instanceof codeBlock.RTETextNode) {
+    const endNode = selectedNodes[selectedNodes.length - 1];
+    if (selectedNodes.length > 1 && endNode instanceof codeBlock.RTETextNode && endNode.isContentEditable()) {
       selectedNodes[selectedNodes.length - 1].apply(new ReplaceSelectedTextAction('', currentRange));
     }
   }
@@ -4098,7 +3186,7 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
   createEmptyParagraph() {
     const paragraph = new codeBlock.RTETextBlock(createPublicApiRuntimeMetricsSlimmer.generateUUID(), 'paragraph');
     const textNode = new codeBlock.RTETextNode(`${paragraph.id}1`, '', paragraph);
-    paragraph.apply(new codeBlock.AppendChildNodesAction([textNode]));
+    paragraph.apply(new codeBlock.AppendChildrenAction([textNode]));
     return paragraph;
   }
   /**
@@ -4118,20 +3206,20 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
           if (this.shouldMergeTextNode(startRTENode, endRTENode)) {
             startRTENode.apply(new codeBlock.UpdateTextAction(startRTENode.text + endRTENode.text));
             if (startRTENode.parent === endRTENode.parent) {
-              startRTENode.parent.apply(new codeBlock.RemoveChildAction(endRTENode));
+              startRTENode.parent.apply(new codeBlock.RemoveChildrenAction(endRTENode));
             }
             else {
-              endRTENode.parent.apply(new codeBlock.RemoveChildAction(endRTENode.parent.children[0]));
+              endRTENode.parent.apply(new codeBlock.RemoveChildrenAction(endRTENode.parent.children[0]));
             }
           }
           if (startRTENode instanceof codeBlock.RTETextNode &&
             endRTENode instanceof codeBlock.RTETextNode &&
             startRTENode.parent !== endRTENode.parent) {
-            startRTENode.parent.apply(new codeBlock.AppendChildNodesAction(endBlock.children));
+            startRTENode.parent.apply(new codeBlock.AppendChildrenAction(endBlock.children));
             endBlock.children = [];
           }
           if (endBlock.children.length < 1) {
-            endBlock.parent.apply(new codeBlock.RemoveChildAction(endBlock));
+            endBlock.parent.apply(new codeBlock.RemoveChildrenAction(endBlock));
           }
         }
       }
@@ -4151,24 +3239,57 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
       nodeB instanceof codeBlock.RTETextNode &&
       JSON.stringify(annotationsA) === JSON.stringify(annotationsB));
   }
+  /**
+   * Check the decorator node is fully in the range end.
+   *
+   * @param {RTENode} rangeEndNode - The end node of the range
+   * @param {number} endOffset - The end offset of the range
+   * @param {RTENode<RTEBlock>} checkedNode - The checked decorator node
+   * @returns {boolean} - Whether the end node is fully within the range
+   */
+  isEndNodeFullyInTheRange(rangeEndNode, endOffset, checkedNode) {
+    if (checkedNode instanceof codeBlock.RTECodeBlockNode) {
+      return true;
+    }
+    else {
+      return checkedNode === rangeEndNode && endOffset !== 0;
+    }
+  }
+  /**
+   * Check if the start decorator node is fully in the range.
+   *
+   * @param {RTENode<RTEBlock>} rangeStartNode - The start node of the range
+   * @param {RTENode} rangeEndNode - The end node of the range
+   * @param {number} startOffset - The start offset of the range
+   * @param {number} endOffset - The end offset of the range
+   * @returns {boolean} - Whether the start node is fully within the range
+   */
+  isStartNodeFullyInTheRange(rangeStartNode, rangeEndNode, startOffset, endOffset) {
+    if (rangeStartNode instanceof codeBlock.RTECodeBlockNode) {
+      return true;
+    }
+    else {
+      return startOffset === 0 && (rangeEndNode !== rangeStartNode || endOffset !== 0);
+    }
+  }
 }
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "host", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "selectionController", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "value", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], DeleteSelectedNodesController.prototype, "addDeleteObserver", null);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.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;
@@ -4244,22 +3365,22 @@ class HistoryController extends componentValueHistoryControllerSlimmer_abstract.
     await this.valueController.flushChanges(content, false);
   }
 }
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "host", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "valueController", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "value", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "selectionController", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], HistoryController.prototype, "registerInitState", null);
 
@@ -4280,7 +3401,7 @@ class TransformToCodeBlockAction extends codeBlock.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;
@@ -4289,7 +3410,7 @@ var __decorate$7 = (undefined && undefined.__decorate) || function (decorators,
 /**
  * The code block toolbar button slimmer.
  */
-class CodeBlockToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonSlimmer {
+class CodeBlockToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolbarButtonSlimmer {
   constructor() {
     super({
       icon: 'rectangle-code',
@@ -4331,13 +3452,13 @@ class CodeBlockToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButtonS
 (() => {
   internalIconManager.VegaInternalIconManager.register({ 'rectangle-code': rectangleCode });
 })();
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], CodeBlockToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], CodeBlockToolbarButtonSlimmer.prototype, "valueController", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], CodeBlockToolbarButtonSlimmer.prototype, "value", void 0);
 
@@ -4404,7 +3525,71 @@ class InternalCodeBlockSelectionController extends componentValueHistoryControll
   }
 }
 
-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 imageAnnotationAction.ToolbarButtonSlimmer {
+  constructor() {
+    super({
+      icon: 'display-code',
+      tooltip: {
+        text: 'Edit Source',
+      },
+      autoFocusOnClick: false,
+    });
+  }
+  async onClick() {
+    const isSelected = this.sourceView;
+    if (isSelected) {
+      await this.saveSourceCode();
+    }
+    else {
+      this.selectionController.setSelectionRange(new Range());
+    }
+    this.sourceView = !isSelected;
+  }
+  isSelected() {
+    return this.sourceView;
+  }
+  isDisabled() {
+    return super.isDisabled();
+  }
+  async saveSourceCode() {
+    const sourceViewValue = this.vegaRichTextEditorRenderer.getSourceCode();
+    if (typeof sourceViewValue === 'string') {
+      await this.valueController.flushChanges(contentState.VegaRTEContent.fromHtml(sourceViewValue, {
+        autoMatchFormat: this.sourceEditConfig.autoMatchFormat,
+      }));
+    }
+  }
+}
+(() => {
+  internalIconManager.VegaInternalIconManager.register({ 'display-code': displayCode });
+})();
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField({ writable: true })
+], SourceEditToolbarButtonSlimmer.prototype, "sourceView", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "selectionController", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "valueController", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], SourceEditToolbarButtonSlimmer.prototype, "vegaRichTextEditorRenderer", void 0);
+__decorate$7([
+  globalSlimmerRegistry.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;
@@ -4461,6 +3646,7 @@ const VegaRichTextEditor = class {
     this.bulletsNumbersToolbarButtonSlimmer = new BulletsNumbersToolbarButtonSlimmer();
     this.horizontalAlignmentToolbarButtonSlimmer = new HorizontalAlignmentToolbarButtonSlimmer();
     this.codeBlockToolbarButtonSlimmer = new CodeBlockToolbarButtonSlimmer();
+    this.sourceEditToolbarButtonSlimmer = new SourceEditToolbarButtonSlimmer();
     this.placeholderNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaRichTextEditor, 'placeholder', 'watchPlaceholder');
     this.disabledNotifySlimmer = subStateNotifySlimmer.createSubStateNotifySlimmer(VegaRichTextEditor, 'richTextContentEditable', 'watchRichTextContentEditable');
     this.richTextContentController = new RichTextContentController(this);
@@ -4476,6 +3662,7 @@ const VegaRichTextEditor = class {
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = darkModeStyleController.VegaInternalThemeManager.isDarkMode();
+    this.sourceView = false;
     /**
      * Specifies the label for the rich text editor.
      *
@@ -4545,6 +3732,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.
      *
@@ -4670,6 +3870,9 @@ __decorate$6([
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "codeBlockToolbarButtonSlimmer", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "sourceEditToolbarButtonSlimmer", void 0);
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "placeholderNotifySlimmer", void 0);
@@ -4730,10 +3933,11 @@ class VegaRichTextEditorToolbarButtonRenderer extends globalSlimmerRegistry.Vega
     return (index.h("button", { part: "rich-text-editor-toolbar-button", class: {
         'rich-text-editor-toolbar-btn': true,
         'rich-text-editor-toolbar-button-disabled': this.disabled,
+        'rich-text-editor-toolbar-button-hidden': this.hidden,
         'rich-text-editor-toolbar-button-selected': this.selected,
-      }, onClick: this.handleClick, disabled: this.disabled },
+      }, onClick: this.handleClick, disabled: this.disabled, hidden: this.hidden },
       index.h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
-        index.h("vega-icon", { size: "size-16", color: this.iconColor, icon: internalIconManager.VegaInternalIconManager.getIconKey(this.icon) }),
+        this.icon && (index.h("vega-icon", { size: "size-16", color: this.iconColor, icon: internalIconManager.VegaInternalIconManager.getIconKey(this.icon) })),
         this.showArrowIcon && (index.h("vega-icon", { size: "size-8", color: "text-secondary", icon: internalIconManager.VegaInternalIconManager.getIconKey('chevron-down') }))),
       index.h("slot", null)));
   }
@@ -4746,6 +3950,9 @@ class VegaRichTextEditorToolbarButtonRenderer extends globalSlimmerRegistry.Vega
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "disabled", void 0);
+__decorate$5([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "hidden", void 0);
 __decorate$5([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "selected", void 0);
@@ -4762,7 +3969,7 @@ __decorate$5([
   globalSlimmerRegistry.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;
@@ -4797,6 +4004,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.
      *