@heartlandone/vega 2.77.1 → 2.79.0

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

@@ -8,228 +8,64 @@ const componentUsageRuntimeMetrics = require('./component-usage-runtime-metrics-
 const component = require('./component-1e352960.js');
 const accessibility = require('./accessibility-bfa227f6.js');
 const changeManager = require('./change-manager-a297e4d2.js');
-const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-c62823de.js');
-const vegaInternalEventId = require('./vega-internal-event-id-f2465f1b.js');
-const dtoRendererManager = require('./dto-renderer-manager-e2823eb8.js');
-const typeGuard = require('./type-guard-cd0376d4.js');
+const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-f7ed3bdc.js');
+const vegaInternalEventId = require('./vega-internal-event-id-67bb91c1.js');
+const dtoRendererManager = require('./dto-renderer-manager-ae5fcbba.js');
+const typeGuard = require('./type-guard-2a46bca5.js');
 const internalIconManager = require('./internal-icon-manager-c989189a.js');
-const codeBlock = require('./code-block-f9b86a25.js');
-const imageAnnotationAction = require('./image-annotation-action-b83283d4.js');
-const vegaEventId = require('./vega-event-id-ee01d8dd.js');
+const codeBlock = require('./code-block-847534e3.js');
+const imageAnnotationAction = require('./image-annotation-action-9d6af380.js');
+const vegaEventId = require('./vega-event-id-c08ce3d3.js');
 const misc = require('./misc-3d30df91.js');
-const waitForComponentDidRender = require('./wait-for-component-did-render-70a01bf9.js');
+const waitForComponentDidRender = require('./wait-for-component-did-render-9e41b39e.js');
 const tryGetDocument = require('./try-get-document-c0ebd39a.js');
-const formFieldControllerSlimmer = require('./form-field-controller-slimmer-1b3a1388.js');
-const eventEmitSlimmer = require('./event-emit-slimmer-062cdcb8.js');
-const subStateNotifySlimmer = require('./sub-state-notify-slimmer-58121111.js');
-const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-6bcff70b.js');
+const formFieldControllerSlimmer = require('./form-field-controller-slimmer-93ca7239.js');
+const eventEmitSlimmer = require('./event-emit-slimmer-83f8e2bd.js');
+const subStateNotifySlimmer = require('./sub-state-notify-slimmer-c80b9d21.js');
+const contentState = require('./content-state-99be18a3.js');
+const alignLeft = require('./align-left-4a76df69.js');
+const componentValueHistoryControllerSlimmer_abstract = require('./component-value-history-controller-slimmer.abstract-d7f9812a.js');
 const staticSubjectTitle = require('./static-subject-title-5829a298.js');
 const observer = require('./observer-f49483e8.js');
 const timer = require('./timer-5f33058b.js');
 const darkModeStateControllerSlimmer = require('./dark-mode-state-controller-slimmer-8a87ec08.js');
-const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-d984c0b6.js');
-const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-cc6d2919.js');
-const translationSlimmer = require('./translation-slimmer-2c207e34.js');
+const richTextEditorRequiredRule = require('./rich-text-editor-required-rule-b4aab68d.js');
+const childNodesEventPreventSlimmer = require('./child-nodes-event-prevent-slimmer-dd0bb8b6.js');
+const translationSlimmer = require('./translation-slimmer-c069ca84.js');
 const darkModeStyleController = require('./dark-mode-style-controller-3a04af3d.js');
+const autoRunWhenReRenderTaskQueueSlimmer_abstract = require('./auto-run-when-re-render-task-queue-slimmer.abstract-5734634d.js');
 const array = require('./array-249289f2.js');
 const chevronDown = require('./chevron-down-9847bf78.js');
 const trashCan = require('./trash-can-46a5e19a.js');
-const ui = require('./ui-234ea151.js');
+const ui = require('./ui-b3db0122.js');
 const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
-require('./string-39438062.js');
-require('./object-e2e28e3d.js');
 require('./breakpoints-ebde4837.js');
-require('./ui-32e69595.js');
+require('./ui-32120990.js');
 require('./typography-4560e7f1.js');
-require('./internal-translation-controller-1f84ab0a.js');
+require('./internal-translation-controller-9f58a4e4.js');
 require('./icon-manager-c12c6ea9.js');
 require('./create-public-api-runtime-metrics-slimmer-9cb09fb2.js');
 require('./dynamic-slimmer-f31fdfd7.js');
+require('./string-39438062.js');
+require('./object-b53e9416.js');
 require('./index-592b4052.js');
-require('./page-resize-observer-slimmer-7f065ee1.js');
-require('./breakpoints-751d433a.js');
+require('./page-resize-observer-slimmer-273d62ef.js');
+require('./breakpoints-1cc2c4c6.js');
 require('./internal-form-field-validation-rule.abstract-07cdff46.js');
 require('./mutation-observer-slimmer-749d5020.js');
 require('./mutation-observer-filters-38cebc6d.js');
-require('./sub-state-observer-slimmer-1dfbc4c3.js');
-require('./internal-vega-event-manager-f7ecf3d4.js');
-require('./range-7a038973.js');
-require('./synchronize-task-queue-1ee80e94.js');
-require('./keyboard-manager-slimmer-5b8fa209.js');
-require('./keyboard-manager-16494c34.js');
+require('./sub-state-observer-slimmer-15740c97.js');
+require('./internal-vega-event-manager-cc0f511c.js');
+require('./range-60fb9dd2.js');
+require('./keyboard-manager-slimmer-f602725d.js');
+require('./keyboard-manager-3923e29b.js');
 require('./vega-env-manager-23b8b23c.js');
 require('./feature-flag-controller-9129ef52.js');
 require('./index-f054eb5d.js');
 require('./vega-nonce-manager-df69d3ed.js');
+require('./synchronize-task-queue-1ee80e94.js');
 require('./number-4816603d.js');
 
-/**
- * Class to format HTML code with proper indentation and style cleanup.
- */
-class CodeFormatter {
-  constructor() {
-    /**
-     * Formats a given HTML source string by applying indentation and cleaning up styles.
-     * Content inside preserve tags (pre) is preserved as-is without formatting.
-     *
-     * @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 = '';
-      let preserveDepth = 0;
-      for (let i = 0; i < tokens.length; i++) {
-        let token = tokens[i];
-        const tagName = CodeFormatter.getTagName(token);
-        // Track if we're entering or exiting preserve tags
-        if (CodeFormatter.PRESERVE_CONTENT_TAGS.has(tagName)) {
-          if (token.startsWith('</')) {
-            preserveDepth = Math.max(0, preserveDepth - 1);
-          }
-          else if (token.startsWith('<')) {
-            preserveDepth++;
-          }
-        }
-        // If inside preserve tag, output as-is without formatting
-        if (preserveDepth > 0) {
-          output += token;
-          continue;
-        }
-        // Decrease indentation for closing tags (after exiting preserve 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 isInline = CodeFormatter.INLINE_TAGS.has(tagName);
-          // Inline tag grouping: e.g., <strong>Text</strong> or <span></span> stays on one line
-          // Check for empty tags: <tag></tag> (closing tag immediately follows opening tag)
-          if (isInline && i + 1 < tokens.length && tokens[i + 1] === `</${tagName}>`) {
-            // Empty inline tag: <span></span>
-            output += `${indent}${token}${tokens[i + 1]}\n`;
-            i += 1;
-          }
-          else if (isInline && i + 2 < tokens.length && tokens[i + 2] === `</${tagName}>`) {
-            // Group consecutive inline tags with content
-            let inlineGroup = `${token}${tokens[i + 1]}${tokens[i + 2]}`;
-            i += 2;
-            // Keep merging consecutive inline tag pairs
-            while (i + 3 < 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('/>') &&
-              !CodeFormatter.VOID_TAGS.has(tagName)) {
-              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('; ');
-  }
-}
-/**
- * Inline/phrasing elements that should be kept on a single line with their content.
- * These tags are formatted as: <tag>content</tag> on one line.
- */
-CodeFormatter.INLINE_TAGS = new Set([
-  'span',
-  'strong',
-  'em',
-  'a',
-  'b',
-  'i',
-  'u',
-  'small',
-  'abbr',
-  'code',
-  'b',
-  'u',
-  's',
-  'mark',
-  'time',
-  'del',
-  'ins',
-]);
-/**
- * Void/self-closing elements that don't have closing tags.
- * Used to avoid increasing indentation for these elements.
- */
-CodeFormatter.VOID_TAGS = new Set([
-  'area',
-  'base',
-  'br',
-  'col',
-  'embed',
-  'hr',
-  'img',
-  'input',
-  'link',
-  'meta',
-  'param',
-  'source',
-  'track',
-  'wbr',
-]);
-/**
- * Tags whose content should be preserved as-is without formatting.
- */
-CodeFormatter.PRESERVE_CONTENT_TAGS = new Set(['pre']);
-const CodeFormatter$1 = new CodeFormatter();
-
 var __decorate$C = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -265,16 +101,6 @@ 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()) : '';
-      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}
@@ -316,11 +142,6 @@ 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());
   }
@@ -338,7 +159,7 @@ class VegaRichTextEditorRenderer extends globalSlimmerRegistry.VegaSlimmer {
   renderContent() {
     return (index.h(index.Fragment, null,
       this.renderTextContent(),
-      this.renderSourceViewContent()));
+      this.richTextEditorSourceViewRenderer.render()));
   }
 }
 __decorate$C([
@@ -383,6 +204,9 @@ __decorate$C([
 __decorate$C([
   globalSlimmerRegistry.MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "extensions", void 0);
+__decorate$C([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "richTextEditorSourceViewRenderer", void 0);
 __decorate$C([
   globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
 ], VegaRichTextEditorRenderer.prototype, "componentDidRender", null);
@@ -1382,11 +1206,11 @@ class BulletsToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolba
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node instanceof dtoRendererManager.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 &&
-      selectedBlocks.every((block) => block instanceof dtoRendererManager.RTEListItemBlock && block.parent.type === type));
+      selectedBlocks.every((block) => block instanceof contentState.RTEListItemBlock && block.parent.type === type));
   }
   /**
    * Deselect bullet list item to convert it to default paragraph
@@ -1446,11 +1270,11 @@ class NumbersToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToolba
   isDisabled() {
     const selectedNodes = this.selectionController.getSelectedNodes();
     return (super.isDisabled() ||
-      selectedNodes.some((node) => node instanceof dtoRendererManager.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 &&
-      selectedBlocks.every((block) => block instanceof dtoRendererManager.RTEListItemBlock && block.parent.type === type));
+      selectedBlocks.every((block) => block instanceof contentState.RTEListItemBlock && block.parent.type === type));
   }
   /**
    * Deselect bullet list item to convert it to default paragraph
@@ -1569,10 +1393,6 @@ __decorate$n([
   globalSlimmerRegistry.MapToComponentMethod('componentWillRender')
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
-const AlignLeft = {
-  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M288 64c0 17.7-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32H256c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`,
-};
-
 var __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1605,7 +1425,7 @@ class LeftAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeTool
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({
-    'align-left': AlignLeft,
+    'align-left': alignLeft.AlignLeft,
   });
 })();
 __decorate$m([
@@ -1615,10 +1435,6 @@ __decorate$m([
   globalSlimmerRegistry.MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-const AlignCenter = {
-  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M352 64c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H320c17.7 0 32-14.3 32-32zm96 128c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32zM0 448c0 17.7 14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM352 320c0-17.7-14.3-32-32-32H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H320c17.7 0 32-14.3 32-32z"/></svg>`,
-};
-
 var __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1651,7 +1467,7 @@ class CenterAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeTo
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({
-    'align-center': AlignCenter,
+    'align-center': alignLeft.AlignCenter,
   });
 })();
 __decorate$l([
@@ -1661,10 +1477,6 @@ __decorate$l([
   globalSlimmerRegistry.MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-const AlignRight = {
-  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M448 64c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H192c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`,
-};
-
 var __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1697,7 +1509,7 @@ class RightAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeToo
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({
-    'align-right': AlignRight,
+    'align-right': alignLeft.AlignRight,
   });
 })();
 __decorate$k([
@@ -1707,10 +1519,6 @@ __decorate$k([
   globalSlimmerRegistry.MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-const AlignJustify = {
-  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M448 64c0-17.7-14.3-32-32-32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32zm0 256c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32zM0 192c0 17.7 14.3 32 32 32H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H32c-17.7 0-32 14.3-32 32zM448 448c0-17.7-14.3-32-32-32H32c-17.7 0-32 14.3-32 32s14.3 32 32 32H416c17.7 0 32-14.3 32-32z"/></svg>`,
-};
-
 var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
@@ -1743,7 +1551,7 @@ class JustifyAlignToolbarButtonSlimmer extends imageAnnotationAction.VisualModeT
 }
 (() => {
   internalIconManager.VegaInternalIconManager.register({
-    'align-justify': AlignJustify,
+    'align-justify': alignLeft.AlignJustify,
   });
 })();
 __decorate$j([
@@ -1897,8 +1705,8 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
    * Component lifecycle - [componentWillLoad]{@link VegaRichTextEditor.componentWillLoad}
    */
   componentWillLoad() {
-    if (this.value && !(this.value instanceof dtoRendererManager.VegaRTEContent)) {
-      this.value = dtoRendererManager.VegaRTEContent.fromJSON(this.value);
+    if (this.value && !(this.value instanceof contentState.VegaRTEContent)) {
+      this.value = contentState.VegaRTEContent.fromJSON(this.value);
     }
     this.registerEditorRefAndContent();
   }
@@ -1907,11 +1715,11 @@ class ValueController extends globalSlimmerRegistry.VegaSlimmer {
    */
   watchValueUpdate() {
     const autoMatchFormat = this.sourceEditConfig.autoMatchFormat;
-    if (this.value && !(this.value instanceof dtoRendererManager.VegaRTEContent)) {
-      this.value = dtoRendererManager.VegaRTEContent.fromJSON(this.value, { autoMatchFormat });
+    if (this.value && !(this.value instanceof contentState.VegaRTEContent)) {
+      this.value = contentState.VegaRTEContent.fromJSON(this.value, { autoMatchFormat });
     }
     else if (!this.value || this.value.children.length === 0) {
-      this.value = dtoRendererManager.VegaRTEContent.createEmptyContent({ autoMatchFormat });
+      this.value = contentState.VegaRTEContent.createEmptyContent({ autoMatchFormat });
     }
     else {
       this.changeEventEmitter.emit(this.value);
@@ -2265,7 +2073,7 @@ class InsertParagraphHandler extends BaseHandler {
        */
       if (firstBlock.type !== lastBlock.type &&
         range.startContainer.nodeType === range.endContainer.nodeType) {
-        firstBlock.apply(new dtoRendererManager.MergeTwoBlocksNodesAction(lastBlock));
+        firstBlock.apply(new contentState.MergeTwoBlocksNodesAction(lastBlock));
         const splitAction = new codeBlock.SplitBlockWithNodeAction(cursorNode, cursorNode['text'].length);
         firstBlock.apply(splitAction);
         this.switchCaretPositionToNextElement(splitAction.newBlock);
@@ -2279,10 +2087,10 @@ class InsertParagraphHandler extends BaseHandler {
    */
   breakSingleBlock() {
     const cursorNode = this.removeSelectionRange();
-    const currentBlock = cursorNode.parent;
+    const currentBlock = cursorNode instanceof codeBlock.RTENode ? cursorNode.parent : cursorNode;
     const { startOffset } = this.selectionController.getCurrentRange();
     if (currentBlock) {
-      const breakAction = new dtoRendererManager.InsertNewParagraphAction(cursorNode, startOffset);
+      const breakAction = new contentState.InsertNewParagraphAction(cursorNode, startOffset);
       currentBlock.apply(breakAction);
       this.switchCaretPositionToNextElement(breakAction.newBlock);
     }
@@ -2609,13 +2417,13 @@ class InsertPasteHandler extends BaseHandler {
       const pastedText = event.dataTransfer.getData('text/plain');
       pastedHTML = this.parsePlainText(pastedText);
     }
-    const context = dtoRendererManager.StylePreservator.preserve(pastedHTML);
+    const context = contentState.StylePreservator.preserve(pastedHTML);
     const safeHtml = context.getProcessedHtml();
     const parser = new DOMParser();
     const parsedDoc = parser.parseFromString(safeHtml, 'text/html');
     const htmlElements = Array.from(parsedDoc.body.childNodes);
     context.restore(htmlElements);
-    return dtoRendererManager.ElementToDtoStrategyProcessor.process(htmlElements)
+    return contentState.ElementToDtoStrategyProcessor.process(htmlElements)
       .filter(Boolean)
       .map((output) => output.toDto())
       .filter(Boolean);
@@ -2755,7 +2563,7 @@ class UserInputController extends globalSlimmerRegistry.VegaSlimmer {
       const defaultParagraph = [
         { id, type: 'paragraph', nodes: [{ id: `${id}1`, type: 'text', text: '' }] },
       ];
-      void this.valueController.flushChanges(dtoRendererManager.VegaRTEContent.fromJSON(defaultParagraph));
+      void this.valueController.flushChanges(contentState.VegaRTEContent.fromJSON(defaultParagraph));
     }
   }
   /**
@@ -2836,8 +2644,8 @@ class InsertImageController extends globalSlimmerRegistry.VegaSlimmer {
    */
   insertImageToCaretPosition(imageUrl, selectedBlocks, selectedNodes, currentRange) {
     selectedBlocks || (selectedBlocks = this.selectionController.getSelectedBlocks());
-    const imageBlock = new dtoRendererManager.RTEImageBlock(misc.generateUUID());
-    const newImageNode = new dtoRendererManager.RTEImageNode(misc.generateUUID(), imageUrl, imageBlock);
+    const imageBlock = new contentState.RTEImageBlock(misc.generateUUID());
+    const newImageNode = new contentState.RTEImageNode(misc.generateUUID(), imageUrl, imageBlock);
     newImageNode.apply(new imageAnnotationAction.ImageAnnotationAction('md', ''));
     imageBlock.apply(new codeBlock.AppendChildrenAction([newImageNode]));
     if (selectedBlocks.length < 1 || this.value.children.length < 1) {
@@ -3013,53 +2821,6 @@ var __decorate$d = (undefined && undefined.__decorate) || function (decorators,
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-/**
- * Controller for the text node color
- */
-class TextNodeColorController extends globalSlimmerRegistry.VegaSlimmer {
-  /**
-   * Component lifecycle - [connectedCallback]
-   * Register an observer to watch for dark mode updates, which will update the color of text node .
-   */
-  connectedCallback() {
-    this.observer = new observer.Observer(this.isAcceptObserver.bind(this), (isDark) => {
-      const textNodeElements = imageAnnotationAction.TextNodeRenderingRegistry.getTextNodeElements();
-      textNodeElements.forEach((textColorAnnotation, element) => {
-        element.style.color = isDark
-          ? textColorAnnotation.textColor.dark
-          : textColorAnnotation.textColor.light;
-      });
-    });
-    changeManager.ChangeManager.register(staticSubjectTitle.DARK_MODE_CHANGE, this.observer);
-  }
-  /**
-   * cancel dark mode observer when disconnectedCallback
-   */
-  disconnectResizeObserver() {
-    changeManager.ChangeManager.unregister(staticSubjectTitle.DARK_MODE_CHANGE, this.observer);
-  }
-  /**
-   * Determines whether the observer should accept changes.
-   *
-   * @returns {boolean} Always returns true in the current implementation.
-   */
-  isAcceptObserver() {
-    return true;
-  }
-}
-__decorate$d([
-  globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
-], TextNodeColorController.prototype, "connectedCallback", null);
-__decorate$d([
-  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
-], TextNodeColorController.prototype, "disconnectResizeObserver", null);
-
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
 /** Handles inserting composition text into a VegaRTEContent based on the current selection and input event. User input character will trigger this callback */
 class InsertCompositionTextController extends globalSlimmerRegistry.VegaSlimmer {
   constructor() {
@@ -3264,35 +3025,35 @@ class InsertCompositionTextController extends globalSlimmerRegistry.VegaSlimmer
     this.editableElementRef.dispatchEvent(inputEvent);
   }
 }
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "selectionController", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "host", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "value", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "valueController", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "userInputController", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentField()
 ], InsertCompositionTextController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], InsertCompositionTextController.prototype, "addCompositionTextEventListener", null);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], InsertCompositionTextController.prototype, "removeCompositionTextEventListener", null);
-__decorate$c([
+__decorate$d([
   globalSlimmerRegistry.MapToComponentMethod('componentDidRender')
 ], InsertCompositionTextController.prototype, "reConnectObserver", null);
 
-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;
@@ -3376,7 +3137,7 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
         let shouldDeleteBlock = startNode.parent;
         // if the node grand parent is html block and the html block only has one child, we need insert the paragraph before the html block to jump out the html block
         if (shouldDeleteBlock.parent &&
-          !(shouldDeleteBlock.parent instanceof dtoRendererManager.VegaRTEContent) &&
+          !(shouldDeleteBlock.parent instanceof contentState.VegaRTEContent) &&
           shouldDeleteBlock.parent.children.length === 1) {
           shouldDeleteBlock = shouldDeleteBlock.parent;
         }
@@ -3501,23 +3262,23 @@ class DeleteSelectedNodesController extends globalSlimmerRegistry.VegaSlimmer {
     }
   }
 }
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "host", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "selectionController", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "value", void 0);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('connectedCallback')
 ], DeleteSelectedNodesController.prototype, "addDeleteObserver", null);
-__decorate$b([
+__decorate$c([
   globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
 ], DeleteSelectedNodesController.prototype, "removeDeleteObserver", 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;
@@ -3593,22 +3354,22 @@ class HistoryController extends componentValueHistoryControllerSlimmer_abstract.
     await this.valueController.flushChanges(content, false);
   }
 }
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "host", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "valueController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "value", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentField()
 ], HistoryController.prototype, "selectionController", void 0);
-__decorate$a([
+__decorate$b([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], HistoryController.prototype, "registerInitState", null);
 
@@ -3629,7 +3390,7 @@ class TransformToCodeBlockAction extends codeBlock.ModifyContentAction {
   }
 }
 
-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;
@@ -3685,20 +3446,20 @@ class CodeBlockToolbarButtonSlimmer extends imageAnnotationAction.VisualModeTool
 (() => {
   internalIconManager.VegaInternalIconManager.register({ 'rectangle-code': rectangleCode });
 })();
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], CodeBlockToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], CodeBlockToolbarButtonSlimmer.prototype, "valueController", void 0);
-__decorate$9([
+__decorate$a([
   globalSlimmerRegistry.MapToComponentField()
 ], CodeBlockToolbarButtonSlimmer.prototype, "value", void 0);
 
 /**
  * The rich text internal code block selection controller.
  */
-class InternalCodeBlockSelectionController extends componentValueHistoryControllerSlimmer_abstract.AutoRunWhenReRenderTaskQueueSlimmer {
+class InternalCodeBlockSelectionController extends autoRunWhenReRenderTaskQueueSlimmer_abstract.AutoRunWhenReRenderTaskQueueSlimmer {
   constructor() {
     super(1);
     this.focusNodeOffset = 0;
@@ -3762,7 +3523,7 @@ const displayCode = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M512 48c8.8 0 16 7.2 16 16V352c0 8.8-7.2 16-16 16H336.5c-.3 0-.6 0-.8 0H240.4c-.3 0-.6 0-.8 0H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16H512zM64 416H211.7l-8 48H152c-13.3 0-24 10.7-24 24s10.7 24 24 24h72H352h72c13.3 0 24-10.7 24-24s-10.7-24-24-24H372.3l-8-48H512c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64H64C28.7 0 0 28.7 0 64V352c0 35.3 28.7 64 64 64zm188.3 48l8-48h55.3l8 48H252.3zM249 177c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-48 48c-9.4 9.4-9.4 24.6 0 33.9l48 48c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-31-31 31-31zM361 143c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l31 31-31 31c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l48-48c9.4-9.4 9.4-24.6 0-33.9l-48-48z"/></svg>`,
 };
 
-var __decorate$8 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __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;
@@ -3795,12 +3556,12 @@ class SourceEditToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
     return super.isDisabled();
   }
   async saveSourceCode() {
-    const sourceViewValue = this.vegaRichTextEditorRenderer.getSourceCode();
+    const sourceViewValue = this.richTextEditorSourceViewRenderer.getSourceCode();
     if (!sourceViewValue && this.value.isEmpty()) {
       return;
     }
     if (typeof sourceViewValue === 'string') {
-      await this.valueController.flushChanges(dtoRendererManager.VegaRTEContent.fromHtml(sourceViewValue, {
+      await this.valueController.flushChanges(contentState.VegaRTEContent.fromHtml(sourceViewValue, {
         autoMatchFormat: this.sourceEditConfig.autoMatchFormat,
       }));
     }
@@ -3809,26 +3570,26 @@ class SourceEditToolbarButtonSlimmer extends imageAnnotationAction.ToolbarButton
 (() => {
   internalIconManager.VegaInternalIconManager.register({ 'display-code': displayCode });
 })();
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField({ writable: true })
 ], SourceEditToolbarButtonSlimmer.prototype, "sourceView", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "valueController", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
-], SourceEditToolbarButtonSlimmer.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$8([
+], SourceEditToolbarButtonSlimmer.prototype, "richTextEditorSourceViewRenderer", void 0);
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "sourceEditConfig", void 0);
-__decorate$8([
+__decorate$9([
   globalSlimmerRegistry.MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "value", void 0);
 
-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;
@@ -3880,13 +3641,19 @@ class RTEExtensionController extends globalSlimmerRegistry.VegaSlimmer {
    */
   initialExtensionContext() {
     if (this.extensions && this.host) {
+      const extensionContext = this.generateExtensionContext();
       for (const extension of this.extensions) {
-        extension.initialExtension({
-          host: this.host,
-          flushValue: this.flushValue,
-          isSourceEditMode: this.isSourceEditMode,
-          getSelectedNodes: this.getSelectedNodes,
-        });
+        extension.initialExtension(extensionContext);
+      }
+    }
+  }
+  /**
+   * Destroys all registered extensions.
+   */
+  destroyExtension() {
+    if (this.extensions) {
+      for (const extension of this.extensions) {
+        extension.destroyExtension();
       }
     }
   }
@@ -3897,34 +3664,321 @@ class RTEExtensionController extends globalSlimmerRegistry.VegaSlimmer {
    * @param {VegaRTEExtension[]} oldValue - Old extensions array.
    */
   handleExtensionsChange(newValue, oldValue) {
+    if (oldValue) {
+      for (const extension of oldValue) {
+        extension.destroyExtension();
+      }
+    }
     if (!array.isArrayEqual(newValue, oldValue, false, (a, b) => a === b ? 0 : 1)) {
       this.initialExtensionContext();
     }
   }
+  /**
+   * Generates the extension context for the host component.
+   *
+   * @returns {RTEExtensionContext} - The generated extension context.
+   */
+  generateExtensionContext() {
+    return {
+      host: this.host,
+      flushValue: this.flushValue,
+      isSourceEditMode: this.isSourceEditMode,
+      getSelectedNodes: this.getSelectedNodes,
+      setSelectedNodes: this.selectionController.setSelectedNodes.bind(this.selectionController),
+      getSelection: this.selectionController.getSelection.bind(this.selectionController),
+    };
+  }
 }
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], RTEExtensionController.prototype, "extensions", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], RTEExtensionController.prototype, "host", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], RTEExtensionController.prototype, "sourceView", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], RTEExtensionController.prototype, "valueController", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentField()
 ], RTEExtensionController.prototype, "selectionController", void 0);
-__decorate$7([
+__decorate$8([
   globalSlimmerRegistry.MapToComponentMethod('componentDidLoad')
 ], RTEExtensionController.prototype, "initialExtensionContext", null);
-__decorate$7([
+__decorate$8([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], RTEExtensionController.prototype, "destroyExtension", null);
+__decorate$8([
   globalSlimmerRegistry.MapToComponentMethod('watchExtensions')
 ], RTEExtensionController.prototype, "handleExtensionsChange", null);
 
-const vegaRichTextEditorCss = ":host{display:block}:host vega-field-label{margin-bottom:8px}:host vega-text{margin-bottom:16px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container{display:flex;box-sizing:content-box;position:relative;box-sizing:content-box;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));margin-top:12px;overflow:auto;resize:vertical;padding-top:12px;padding-right:16px;padding-bottom:32px;padding-left:16px}:host .rich-text-editor-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .rich-text-editor-container:focus-within{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .rich-text-editor-container.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));cursor:not-allowed}:host .rich-text-editor-container.disabled:hover,:host .rich-text-editor-container.disabled:focus-within{border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1))}:host .rich-text-editor-container.disabled:focus-within{outline:none}:host .rich-text-editor-container.disabled vega-rich-text-content{pointer-events:none;opacity:0.35}:host .rich-text-editor-container.error{border:1px solid rgba(var(--v-border-input-field-danger, 230, 50, 87, 1))}:host .rich-text-editor-container.error:hover{border:1px solid rgba(var(--v-border-input-field-danger-hover, 255, 87, 114, 1))}:host .rich-text-editor-container.error:focus-within{outline:2px solid rgba(var(--v-border-color-danger, 230, 50, 87, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-danger-focus, 233, 71, 104, 1))}:host .rich-text-editor-container .text-editor-counter{position:absolute;bottom:8px;right:8px;display:flex;padding-left:4px;padding-right:4px;padding-top:2px;padding-bottom:2px;border-radius:4px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));background-color:rgba(var(--v-bg-textarea-count, 4, 4, 28, 0.6))}@media screen and (min-width: 768px) and (max-width: 1023px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host .rich-text-editor-container .text-editor-counter{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container .text-editor-counter.counter-exceed-max-length{background-color:rgba(var(--v-bg-textarea-counter-exceed-max-length, 214, 46, 81))}.toolbar-btn-group{display:flex;justify-content:center;align-items:center}.toolbar-btn-group>*:not(:first-child):not(:last-child) ::part(rich-text-editor-toolbar-button){border-radius:0px}.toolbar-btn-group>*:first-child:not(:last-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:4px;border-bottom-left-radius:4px;border-top-right-radius:0px;border-bottom-right-radius:0px}.toolbar-btn-group>*:last-child:not(:first-child) ::part(rich-text-editor-toolbar-button){border-top-left-radius:0px;border-bottom-left-radius:0px;border-top-right-radius:4px;border-bottom-right-radius:4px}.toolbar-btn-group>*:not(:first-child) ::part(rich-text-editor-toolbar-button){margin-left:-1px}.toolbar-btn-group .toolbar-btn-color-preview-box{display:flex;border:1px solid rgba(var(--v-border-chip, 205, 209, 211, 1));box-sizing:border-box;border-radius:4px;width:16px;height:16px;justify-content:center;align-items:center;margin-left:6px}.toolbar-btn-group .toolbar-btn-color-preview-box.disabled{opacity:0.35}.toolbar-btn-group .toolbar-btn-link-wrapper{position:relative}.toolbar-btn-group .toolbar-btn-link-wrapper vega-rich-text-link-editor{position:absolute;bottom:0;left:0;right:0}.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-error, 189, 41, 71, 1));display:block;margin-top:12px}@media screen and (min-width: 768px) and (max-width: 1023px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){.vega-error{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}.vega-hidden{display:none !important}.source-view-container{margin-top:12px}.source-view-container vega-code-block::part(editor-toolbar){display:none}";
+/**
+ * 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.
+     * Content inside preserve tags (pre) is preserved as-is without formatting.
+     *
+     * @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 = '';
+      let preserveDepth = 0;
+      for (let i = 0; i < tokens.length; i++) {
+        let token = tokens[i];
+        const tagName = CodeFormatter.getTagName(token);
+        // Track if we're entering or exiting preserve tags
+        if (CodeFormatter.PRESERVE_CONTENT_TAGS.has(tagName)) {
+          if (token.startsWith('</')) {
+            preserveDepth = Math.max(0, preserveDepth - 1);
+          }
+          else if (token.startsWith('<')) {
+            preserveDepth++;
+          }
+        }
+        // If inside preserve tag, output as-is without formatting
+        if (preserveDepth > 0) {
+          output += token;
+          continue;
+        }
+        // Decrease indentation for closing tags (after exiting preserve 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 isInline = CodeFormatter.INLINE_TAGS.has(tagName);
+          // Inline tag grouping: e.g., <strong>Text</strong> or <span></span> stays on one line
+          // Check for empty tags: <tag></tag> (closing tag immediately follows opening tag)
+          if (isInline && i + 1 < tokens.length && tokens[i + 1] === `</${tagName}>`) {
+            // Empty inline tag: <span></span>
+            output += `${indent}${token}${tokens[i + 1]}\n`;
+            i += 1;
+          }
+          else if (isInline && i + 2 < tokens.length && tokens[i + 2] === `</${tagName}>`) {
+            // Group consecutive inline tags with content
+            let inlineGroup = `${token}${tokens[i + 1]}${tokens[i + 2]}`;
+            i += 2;
+            // Keep merging consecutive inline tag pairs
+            while (i + 3 < 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('/>') &&
+              !CodeFormatter.VOID_TAGS.has(tagName)) {
+              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('; ');
+  }
+}
+/**
+ * Inline/phrasing elements that should be kept on a single line with their content.
+ * These tags are formatted as: <tag>content</tag> on one line.
+ */
+CodeFormatter.INLINE_TAGS = new Set([
+  'span',
+  'strong',
+  'em',
+  'a',
+  'b',
+  'i',
+  'u',
+  'small',
+  'abbr',
+  'code',
+  'b',
+  'u',
+  's',
+  'mark',
+  'time',
+  'del',
+  'ins',
+]);
+/**
+ * Void/self-closing elements that don't have closing tags.
+ * Used to avoid increasing indentation for these elements.
+ */
+CodeFormatter.VOID_TAGS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+]);
+/**
+ * Tags whose content should be preserved as-is without formatting.
+ */
+CodeFormatter.PRESERVE_CONTENT_TAGS = new Set(['pre']);
+const CodeFormatter$1 = new CodeFormatter();
+
+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;
+};
+/**
+ * The renderer for the source view of the rich text editor. It renders a code block for editing the source code of the rich text editor content.
+ */
+class VegaRichTextEditorSourceViewRenderer extends globalSlimmerRegistry.VegaSlimmer {
+  constructor() {
+    super(...arguments);
+    this.prevRecord = '';
+    /**
+     * Handle the blur event of the code block. When the code block loses focus, emit the source code change event with the current source code.
+     */
+    this.handleCodeBlockBlur = () => {
+      var _a;
+      // If source view is closed while blurring, it means the user switch back to normal mode, so we can skip emitting the change event.
+      if (this.sourceView) {
+        const sourceCode = this.getSourceCode();
+        const newValue = contentState.VegaRTEContent.fromHtml(sourceCode, {
+          autoMatchFormat: (_a = this.sourceEditConfig.autoMatchFormat) !== null && _a !== void 0 ? _a : true,
+        });
+        const newSourceCode = newValue.toHtml();
+        if (newSourceCode !== this.prevRecord) {
+          this.sourceCodeChangeEventEmitter.emit(newSourceCode);
+          this.prevRecord = newSourceCode;
+        }
+      }
+    };
+  }
+  /**
+   * Clean up the code block blur observer when the component is disconnected to prevent memory leaks.
+   */
+  clearCodeBlockBlurObserver() {
+    if (this.sourceCodeBlockRef) {
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.sourceCodeBlockRef, vegaInternalEventId.VegaInternalCodeBlockBlur);
+    }
+  }
+  /**
+   * Get the source code from the source view's code block.
+   *
+   * @returns {Nullable<string>} The source code, or null if the code block reference is not set.
+   */
+  getSourceCode() {
+    if (this.sourceCodeBlockRef) {
+      return this.sourceCodeBlockRef.value.code;
+    }
+  }
+  /**
+   * Render the source view, which is a code block for editing the source code of the rich text editor content.
+   *
+   * @returns {Nullable<HTMLElement>} The rendered source view element, or null if source editing is not allowed.
+   */
+  render() {
+    if (!this.allowSourceEdit)
+      return;
+    const sourceCode = this.value.toHtml();
+    const sourceViewValue = this.sourceView ? CodeFormatter$1.format(sourceCode) : '';
+    // Record the source view value when rendering, which will be used to compare with the current source view value when blurring the code block to determine whether to emit the source code change event.
+    this.prevRecord = sourceCode;
+    return (index.h("div", { class: {
+        'source-view-container': true,
+        'vega-hidden': !this.sourceView,
+      } },
+      index.h("vega-code-block", { ref: (ref) => {
+          this.sourceCodeBlockRef = ref;
+          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, vegaInternalEventId.VegaInternalCodeBlockBlur, this.handleCodeBlockBlur);
+        }, disabled: this.disabled, value: { language: 'html', code: sourceViewValue } })));
+  }
+}
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "host", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "allowSourceEdit", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "sourceView", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "value", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "disabled", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "sourceEditConfig", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "sourceCodeChangeEventEmitter", void 0);
+__decorate$7([
+  globalSlimmerRegistry.MapToComponentMethod('disconnectedCallback')
+], VegaRichTextEditorSourceViewRenderer.prototype, "clearCodeBlockBlurObserver", null);
+
+const vegaRichTextEditorCss = ":host{display:block}:host vega-field-label{margin-bottom:8px}:host vega-text{margin-bottom:16px;font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px;color:rgba(var(--v-text-secondary, 107, 116, 125, 1))}@media screen and (min-width: 768px) and (max-width: 1023px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1024px) and (max-width: 1439px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}@media screen and (min-width: 1440px) and (max-width: 9999px){:host vega-text{font-family:\"Inter\", sans-serif;font-size:14px;font-weight:400;line-height:18px;letter-spacing:0px}}:host .rich-text-editor-container{display:flex;box-sizing:content-box;position:relative;box-sizing:content-box;background-color:rgba(var(--v-bg-primary, 252, 252, 252, 1));border:1px solid rgba(var(--v-border-input-field, 171, 198, 216, 1));border-radius:8px;color:rgba(var(--v-text-primary, 32, 54, 69, 1));margin-top:12px;overflow:auto;resize:vertical;padding-top:12px;padding-right:16px;padding-bottom:32px;padding-left:16px}:host .rich-text-editor-container:hover{border:1px solid rgba(var(--v-border-input-field-hover, 115, 160, 190, 1))}:host .rich-text-editor-container:focus-within{border:1px solid rgba(var(--v-border-input-field-focus, 19, 98, 226, 1));outline:2px solid rgba(var(--v-border-color-action, 19, 98, 226, 1));outline-offset:3px;border:1px solid rgba(var(--v-border-color-input-field-focus, 19, 98, 226, 1))}:host .rich-text-editor-container.disabled{background-color:rgba(var(--v-bg-secondary, 245, 247, 247, 1));border:1px solid rgba(var(--v-border-input-field-disabled, 222, 225, 227, 1));cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}: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;
@@ -3943,6 +3997,8 @@ const VegaRichTextEditor = class {
     this.change = index.createEvent(this, "change", 7);
     this.vegaImageInserted = index.createEvent(this, "vegaImageInserted", 7);
     this.imageInserted = index.createEvent(this, "imageInserted", 7);
+    this.vegaSourceCodeChange = index.createEvent(this, "vegaSourceCodeChange", 7);
+    this.sourceCodeChange = index.createEvent(this, "sourceCodeChange", 7);
     this.globalSlimmers = {};
     this.translationSlimmer = new translationSlimmer.TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new componentUsageRuntimeMetrics.VegaComponentUsageRuntimeMetricsSlimmer();
@@ -3990,11 +4046,12 @@ const VegaRichTextEditor = class {
     this.insertCompositionTextController = new InsertCompositionTextController();
     this.imageInsertedEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditor, vegaEventId.VegaImageInserted);
     this.changeEventPreventSlimmer = new childNodesEventPreventSlimmer.ChildNodesEventPreventSlimmer([vegaEventId.VegaChange], () => this.vegaRichTextEditorRenderer.getRichTextWrapperRef());
-    this.textNodeColorController = new TextNodeColorController();
     this.deleteSelectedNodesController = new DeleteSelectedNodesController();
     this.historyController = new HistoryController();
     this.internalCodeBlockSelectionController = new InternalCodeBlockSelectionController();
     this.rteExtensionController = new RTEExtensionController();
+    this.sourceCodeChangeEventEmitter = eventEmitSlimmer.createEventEmitSlimmer(VegaRichTextEditor, vegaEventId.VegaSourceCodeChange);
+    this.richTextEditorSourceViewRenderer = new VegaRichTextEditorSourceViewRenderer();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = darkModeStyleController.VegaInternalThemeManager.isDarkMode();
@@ -4052,7 +4109,7 @@ const VegaRichTextEditor = class {
      * @defaultValue [{id:'UUID', type:'paragraph', nodes:[{id: 'UUID',type: 'text',text:''}]}]
      */
     // eslint-disable-next-line @stencil/strict-mutable
-    this.value = dtoRendererManager.VegaRTEContent.createEmptyContent();
+    this.value = contentState.VegaRTEContent.createEmptyContent();
     /**
      * Specifies the built-in toolbar items available in the rich-text editor.
      *
@@ -4233,9 +4290,6 @@ __decorate$6([
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "changeEventPreventSlimmer", void 0);
-__decorate$6([
-  globalSlimmerRegistry.InjectVegaSlimmer()
-], VegaRichTextEditor.prototype, "textNodeColorController", void 0);
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "deleteSelectedNodesController", void 0);
@@ -4248,6 +4302,12 @@ __decorate$6([
 __decorate$6([
   globalSlimmerRegistry.InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "rteExtensionController", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "sourceCodeChangeEventEmitter", void 0);
+__decorate$6([
+  globalSlimmerRegistry.InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "richTextEditorSourceViewRenderer", void 0);
 VegaRichTextEditor.style = vegaRichTextEditorCss;
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {