@heartlandone/vega 2.77.1 → 2.79.0

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

@@ -4,228 +4,64 @@ import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlim
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
 import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-e5fd0fab.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
-import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-82f346e3.js';
-import { p as VegaInternalComponentDidRender, a as VegaInternalRichTextEditorFlushChanges, G as VegaInternalRichTextEditDeleteSelectedNodes, H as VegaInternalRichTextImageClick, I as VegaInternalRichTextImageDeleteButtonClicked, y as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-799d012e.js';
-import { R as RTEDTORendererManager, f as RTEImageNode, d as RTEListItemBlock, V as VegaRTEContent, M as MergeTwoBlocksNodesAction, I as InsertNewParagraphAction, S as StylePreservator, i as ElementToDtoStrategyProcessor, c as RTEImageBlock } from './dto-renderer-manager-d413de1e.js';
-import { i as isNonNullable } from './type-guard-af324dcd.js';
+import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-94b2e2c3.js';
+import { s as VegaInternalComponentDidRender, d as VegaInternalRichTextEditorFlushChanges, J as VegaInternalRichTextEditDeleteSelectedNodes, K as VegaInternalRichTextImageClick, L as VegaInternalRichTextImageDeleteButtonClicked, y as VegaInternalCodeBlockBlur, V as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-8002b179.js';
+import { R as RTEDTORendererManager } from './dto-renderer-manager-12bc9121.js';
+import { i as isNonNullable } from './type-guard-c20cbbff.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-bd80b3bb.js';
-import { b as RTETextNode, a1 as BoldAnnotationAction, y as NodeAnnotationTypeEnum, a2 as ItalicAnnotationAction, a3 as UnderlineAnnotationAction, d as RTETextBlock, T as TextStyleAnnotationAction, a4 as TextStyleAnnotation, a5 as BoldAnnotation, u as BlockAnnotationTypeEnum, a6 as ClearFormattingAnnotationAction, a7 as CodeAnnotationAction, a8 as StrikethroughAnnotationAction, _ as SelectionChangeAction, W as LinkAnnotationAction, a9 as IndentAnnotationAction, M as ModifyContentAction, k as ModifyContentActionType, a0 as RTECodeBlockNode, A as ActionHandleStrategyRegistry, H as HorizontalAlignmentAnnotationAction, s as stateEntityRenderingRegistry, g as AppendChildrenAction, Z as ZERO_WIDTH_SPACE, U as UpdateTextAction, i as InsertChildrenBeforeAction, J as SplitBlockWithNodeAction, r as RemoveChildrenAction, G as ReplaceChildNodesAction, x as RTECodeBlock, I as InsertChildrenAfterAction, V as VegaRTEPresetToolbarItems } from './code-block-2408a812.js';
-import { V as VisualModeToolbarButtonSlimmer, I as ImageAnnotationAction, T as TextNodeRenderingRegistry, b as ToolbarButtonSlimmer, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-54936eaa.js';
-import { V as VegaDropdownClick, f as VegaChange, a as VegaClick, X as VegaImageInserted, T as VegaPopoverShow, U as VegaPopoverHide } from './vega-event-id-38aa77a0.js';
+import { b as RTETextNode, a1 as BoldAnnotationAction, D as NodeAnnotationTypeEnum, a2 as ItalicAnnotationAction, a3 as UnderlineAnnotationAction, d as RTETextBlock, T as TextStyleAnnotationAction, a4 as TextStyleAnnotation, a5 as BoldAnnotation, w as BlockAnnotationTypeEnum, a6 as ClearFormattingAnnotationAction, a7 as CodeAnnotationAction, a8 as StrikethroughAnnotationAction, _ as SelectionChangeAction, X as LinkAnnotationAction, a9 as IndentAnnotationAction, M as ModifyContentAction, k as ModifyContentActionType, a0 as RTECodeBlockNode, A as ActionHandleStrategyRegistry, H as HorizontalAlignmentAnnotationAction, s as stateEntityRenderingRegistry, g as AppendChildrenAction, Z as ZERO_WIDTH_SPACE, U as UpdateTextAction, i as InsertChildrenBeforeAction, K as SplitBlockWithNodeAction, h as RTENode, m as RemoveChildrenAction, J as ReplaceChildNodesAction, z as RTECodeBlock, I as InsertChildrenAfterAction, V as VegaRTEPresetToolbarItems } from './code-block-58d1dbe5.js';
+import { V as VisualModeToolbarButtonSlimmer, I as ImageAnnotationAction, a as ToolbarButtonSlimmer, T as TextColorToolbarButtonSlimmer } from './image-annotation-action-1ec7b461.js';
+import { V as VegaDropdownClick, h as VegaChange, a as VegaClick, X as VegaImageInserted, Y as VegaSourceCodeChange, b as VegaPopoverShow, c as VegaPopoverHide } from './vega-event-id-4ede557a.js';
 import { g as generateUUID } from './misc-9fdbcfbb.js';
-import { w as waitForComponentDidRender } from './wait-for-component-did-render-b08ef07b.js';
+import { w as waitForComponentDidRender } from './wait-for-component-did-render-1e62d6f7.js';
 import { t as tryGetDocument } from './try-get-document-bef0f526.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-e1a5a884.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-ffaecb9a.js';
-import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-5133f1a8.js';
-import { R as RTESelectionState, C as ComponentValueHistoryControllerSlimmer, A as AutoRunWhenReRenderTaskQueueSlimmer, a as SelectionController } from './component-value-history-controller-slimmer.abstract-ac40820f.js';
-import { F as FORM_ELEMENT_VALUE_CHANGE, D as DARK_MODE_CHANGE } from './static-subject-title-52f93124.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-00fa3678.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-b236945b.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-54531808.js';
+import { f as RTEImageNode, d as RTEListItemBlock, V as VegaRTEContent, M as MergeTwoBlocksNodesAction, I as InsertNewParagraphAction, S as StylePreservator, i as ElementToDtoStrategyProcessor, b as RTEImageBlock } from './content-state-dad1fd71.js';
+import { b as AlignLeft, A as AlignCenter, c as AlignRight, a as AlignJustify } from './align-left-7f959adf.js';
+import { R as RTESelectionState, C as ComponentValueHistoryControllerSlimmer, a as SelectionController } from './component-value-history-controller-slimmer.abstract-5beb8acb.js';
+import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-52f93124.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { d as debounce } from './timer-9321173b.js';
 import { D as DarkModeStateControllerSlimmer } from './dark-mode-state-controller-slimmer-f2b4f8ed.js';
-import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-b09039da.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-331312b8.js';
-import { T as TranslationSlimmer } from './translation-slimmer-9f0339aa.js';
+import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-c391aeb6.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-2ecc3e1f.js';
+import { T as TranslationSlimmer } from './translation-slimmer-35b1d0fa.js';
 import { V as VegaInternalThemeManager } from './dark-mode-style-controller-82e5c1c6.js';
+import { A as AutoRunWhenReRenderTaskQueueSlimmer } from './auto-run-when-re-render-task-queue-slimmer.abstract-27820d4c.js';
 import { i as isArrayEqual } from './array-7888f339.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
 import { t as trashCan } from './trash-can-8819a939.js';
-import { f as findParent } from './ui-ee31416b.js';
+import { f as findParent } from './ui-ac244bf0.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
-import './string-a953eafc.js';
-import './object-66c37948.js';
 import './breakpoints-d9faf11c.js';
-import './ui-28fd4193.js';
+import './ui-93922c59.js';
 import './typography-396de03f.js';
-import './internal-translation-controller-113a6288.js';
+import './internal-translation-controller-b08aa9ab.js';
 import './icon-manager-539d7cf7.js';
 import './create-public-api-runtime-metrics-slimmer-aaadaa08.js';
 import './dynamic-slimmer-90b8af32.js';
+import './string-a953eafc.js';
+import './object-0c277f57.js';
 import './index-3b327f29.js';
-import './page-resize-observer-slimmer-d6af0d86.js';
-import './breakpoints-56e5407b.js';
+import './page-resize-observer-slimmer-e24d36c5.js';
+import './breakpoints-332702ed.js';
 import './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 import './mutation-observer-slimmer-58ebc13c.js';
 import './mutation-observer-filters-1a054fb0.js';
-import './sub-state-observer-slimmer-478c9f41.js';
-import './internal-vega-event-manager-32a3d848.js';
-import './range-a5d78e69.js';
-import './synchronize-task-queue-ac8acc3b.js';
-import './keyboard-manager-slimmer-c8898843.js';
-import './keyboard-manager-f9bfa678.js';
+import './sub-state-observer-slimmer-b3a773c5.js';
+import './internal-vega-event-manager-59f5bd47.js';
+import './range-4f9bf69d.js';
+import './keyboard-manager-slimmer-4722d20c.js';
+import './keyboard-manager-e020039f.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-30f7b625.js';
 import './index-bfc6dfa2.js';
 import './vega-nonce-manager-497e5eb5.js';
+import './synchronize-task-queue-ac8acc3b.js';
 import './number-4398f2e1.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);
@@ -261,16 +97,6 @@ class VegaRichTextEditorRenderer extends VegaSlimmer {
     this.richTextContentFocus = () => {
       void this.richTextContentRef.vegaFocus();
     };
-    this.renderSourceViewContent = () => {
-      if (!this.allowSourceEdit)
-        return;
-      const sourceViewValue = this.sourceView ? CodeFormatter$1.format(this.value.toHtml()) : '';
-      return (h("div", { class: {
-          'source-view-container': true,
-          'vega-hidden': !this.sourceView,
-        } },
-        h("vega-code-block", { ref: (ref) => (this.sourceCodeBlockRef = ref), disabled: this.disabled, value: { language: 'html', code: sourceViewValue } })));
-    };
   }
   /**
    * Component lifecycle - [componentDidRender]{@link VegaRichTextEditor.componentDidRender}
@@ -312,11 +138,6 @@ class VegaRichTextEditorRenderer extends VegaSlimmer {
       return this.richTextContentRef.shadowRoot.querySelector('.rich-text-content');
     }
   }
-  getSourceCode() {
-    if (this.sourceCodeBlockRef) {
-      return this.sourceCodeBlockRef.value.code;
-    }
-  }
   render() {
     return h(Host, null, this.renderRichTextEditor());
   }
@@ -334,7 +155,7 @@ class VegaRichTextEditorRenderer extends VegaSlimmer {
   renderContent() {
     return (h(Fragment, null,
       this.renderTextContent(),
-      this.renderSourceViewContent()));
+      this.richTextEditorSourceViewRenderer.render()));
   }
 }
 __decorate$C([
@@ -379,6 +200,9 @@ __decorate$C([
 __decorate$C([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "extensions", void 0);
+__decorate$C([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "richTextEditorSourceViewRenderer", void 0);
 __decorate$C([
   MapToComponentMethod('componentDidRender')
 ], VegaRichTextEditorRenderer.prototype, "componentDidRender", null);
@@ -1565,10 +1389,6 @@ __decorate$n([
   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);
@@ -1611,10 +1431,6 @@ __decorate$m([
   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);
@@ -1657,10 +1473,6 @@ __decorate$l([
   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);
@@ -1703,10 +1515,6 @@ __decorate$k([
   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);
@@ -2275,7 +2083,7 @@ class InsertParagraphHandler extends BaseHandler {
    */
   breakSingleBlock() {
     const cursorNode = this.removeSelectionRange();
-    const currentBlock = cursorNode.parent;
+    const currentBlock = cursorNode instanceof RTENode ? cursorNode.parent : cursorNode;
     const { startOffset } = this.selectionController.getCurrentRange();
     if (currentBlock) {
       const breakAction = new InsertNewParagraphAction(cursorNode, startOffset);
@@ -3009,53 +2817,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 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(this.isAcceptObserver.bind(this), (isDark) => {
-      const textNodeElements = TextNodeRenderingRegistry.getTextNodeElements();
-      textNodeElements.forEach((textColorAnnotation, element) => {
-        element.style.color = isDark
-          ? textColorAnnotation.textColor.dark
-          : textColorAnnotation.textColor.light;
-      });
-    });
-    ChangeManager.register(DARK_MODE_CHANGE, this.observer);
-  }
-  /**
-   * cancel dark mode observer when disconnectedCallback
-   */
-  disconnectResizeObserver() {
-    ChangeManager.unregister(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([
-  MapToComponentMethod('connectedCallback')
-], TextNodeColorController.prototype, "connectedCallback", null);
-__decorate$d([
-  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 VegaSlimmer {
   constructor() {
@@ -3260,35 +3021,35 @@ class InsertCompositionTextController extends VegaSlimmer {
     this.editableElementRef.dispatchEvent(inputEvent);
   }
 }
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "selectionController", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "host", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "value", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "valueController", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "userInputController", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentField()
 ], InsertCompositionTextController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$c([
+__decorate$d([
   MapToComponentMethod('componentDidLoad')
 ], InsertCompositionTextController.prototype, "addCompositionTextEventListener", null);
-__decorate$c([
+__decorate$d([
   MapToComponentMethod('disconnectedCallback')
 ], InsertCompositionTextController.prototype, "removeCompositionTextEventListener", null);
-__decorate$c([
+__decorate$d([
   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;
@@ -3497,23 +3258,23 @@ class DeleteSelectedNodesController extends VegaSlimmer {
     }
   }
 }
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "host", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "selectionController", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentField()
 ], DeleteSelectedNodesController.prototype, "value", void 0);
-__decorate$b([
+__decorate$c([
   MapToComponentMethod('connectedCallback')
 ], DeleteSelectedNodesController.prototype, "addDeleteObserver", null);
-__decorate$b([
+__decorate$c([
   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;
@@ -3589,22 +3350,22 @@ class HistoryController extends ComponentValueHistoryControllerSlimmer {
     await this.valueController.flushChanges(content, false);
   }
 }
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], HistoryController.prototype, "host", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], HistoryController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], HistoryController.prototype, "valueController", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], HistoryController.prototype, "value", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentField()
 ], HistoryController.prototype, "selectionController", void 0);
-__decorate$a([
+__decorate$b([
   MapToComponentMethod('componentDidLoad')
 ], HistoryController.prototype, "registerInitState", null);
 
@@ -3625,7 +3386,7 @@ class TransformToCodeBlockAction extends 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;
@@ -3681,13 +3442,13 @@ class CodeBlockToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ 'rectangle-code': rectangleCode });
 })();
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], CodeBlockToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], CodeBlockToolbarButtonSlimmer.prototype, "valueController", void 0);
-__decorate$9([
+__decorate$a([
   MapToComponentField()
 ], CodeBlockToolbarButtonSlimmer.prototype, "value", void 0);
 
@@ -3758,7 +3519,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;
@@ -3791,7 +3552,7 @@ class SourceEditToolbarButtonSlimmer extends ToolbarButtonSlimmer {
     return super.isDisabled();
   }
   async saveSourceCode() {
-    const sourceViewValue = this.vegaRichTextEditorRenderer.getSourceCode();
+    const sourceViewValue = this.richTextEditorSourceViewRenderer.getSourceCode();
     if (!sourceViewValue && this.value.isEmpty()) {
       return;
     }
@@ -3805,26 +3566,26 @@ class SourceEditToolbarButtonSlimmer extends ToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ 'display-code': displayCode });
 })();
-__decorate$8([
+__decorate$9([
   MapToComponentField({ writable: true })
 ], SourceEditToolbarButtonSlimmer.prototype, "sourceView", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "valueController", void 0);
-__decorate$8([
+__decorate$9([
   MapToComponentField()
-], SourceEditToolbarButtonSlimmer.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$8([
+], SourceEditToolbarButtonSlimmer.prototype, "richTextEditorSourceViewRenderer", void 0);
+__decorate$9([
   MapToComponentField()
 ], SourceEditToolbarButtonSlimmer.prototype, "sourceEditConfig", void 0);
-__decorate$8([
+__decorate$9([
   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;
@@ -3876,13 +3637,19 @@ class RTEExtensionController extends 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();
       }
     }
   }
@@ -3893,34 +3660,321 @@ class RTEExtensionController extends VegaSlimmer {
    * @param {VegaRTEExtension[]} oldValue - Old extensions array.
    */
   handleExtensionsChange(newValue, oldValue) {
+    if (oldValue) {
+      for (const extension of oldValue) {
+        extension.destroyExtension();
+      }
+    }
     if (!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([
   MapToComponentField()
 ], RTEExtensionController.prototype, "extensions", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], RTEExtensionController.prototype, "host", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], RTEExtensionController.prototype, "sourceView", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], RTEExtensionController.prototype, "valueController", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentField()
 ], RTEExtensionController.prototype, "selectionController", void 0);
-__decorate$7([
+__decorate$8([
   MapToComponentMethod('componentDidLoad')
 ], RTEExtensionController.prototype, "initialExtensionContext", null);
-__decorate$7([
+__decorate$8([
+  MapToComponentMethod('disconnectedCallback')
+], RTEExtensionController.prototype, "destroyExtension", null);
+__decorate$8([
   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 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 = 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.removeUniqueObserverFromNode(this.sourceCodeBlockRef, 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 (h("div", { class: {
+        'source-view-container': true,
+        'vega-hidden': !this.sourceView,
+      } },
+      h("vega-code-block", { ref: (ref) => {
+          this.sourceCodeBlockRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaInternalCodeBlockBlur, this.handleCodeBlockBlur);
+        }, disabled: this.disabled, value: { language: 'html', code: sourceViewValue } })));
+  }
+}
+__decorate$7([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "host", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "allowSourceEdit", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "sourceView", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "value", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "disabled", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "sourceEditConfig", void 0);
+__decorate$7([
+  MapToComponentField()
+], VegaRichTextEditorSourceViewRenderer.prototype, "sourceCodeChangeEventEmitter", void 0);
+__decorate$7([
+  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;
@@ -3939,6 +3993,8 @@ const VegaRichTextEditor = class {
     this.change = createEvent(this, "change", 7);
     this.vegaImageInserted = createEvent(this, "vegaImageInserted", 7);
     this.imageInserted = createEvent(this, "imageInserted", 7);
+    this.vegaSourceCodeChange = createEvent(this, "vegaSourceCodeChange", 7);
+    this.sourceCodeChange = createEvent(this, "sourceCodeChange", 7);
     this.globalSlimmers = {};
     this.translationSlimmer = new TranslationSlimmer();
     this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
@@ -3986,11 +4042,12 @@ const VegaRichTextEditor = class {
     this.insertCompositionTextController = new InsertCompositionTextController();
     this.imageInsertedEventEmitter = createEventEmitSlimmer(VegaRichTextEditor, VegaImageInserted);
     this.changeEventPreventSlimmer = new ChildNodesEventPreventSlimmer([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 = createEventEmitSlimmer(VegaRichTextEditor, VegaSourceCodeChange);
+    this.richTextEditorSourceViewRenderer = new VegaRichTextEditorSourceViewRenderer();
     this.richTextContentEditable = true;
     this.selectionMap = new Map();
     this.isInDarkMode = VegaInternalThemeManager.isDarkMode();
@@ -4229,9 +4286,6 @@ __decorate$6([
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "changeEventPreventSlimmer", void 0);
-__decorate$6([
-  InjectVegaSlimmer()
-], VegaRichTextEditor.prototype, "textNodeColorController", void 0);
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "deleteSelectedNodesController", void 0);
@@ -4244,6 +4298,12 @@ __decorate$6([
 __decorate$6([
   InjectVegaSlimmer()
 ], VegaRichTextEditor.prototype, "rteExtensionController", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "sourceCodeChangeEventEmitter", void 0);
+__decorate$6([
+  InjectVegaSlimmer()
+], VegaRichTextEditor.prototype, "richTextEditorSourceViewRenderer", void 0);
 VegaRichTextEditor.style = vegaRichTextEditorCss;
 
 var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {