@globalpayments/vega 2.77.0 → 2.78.0

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

@@ -5,26 +5,27 @@ 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-6fd22ab7.js';
-import { i as isNonNullable } from './type-guard-f50e34d6.js';
+import { p as VegaInternalComponentDidRender, a as VegaInternalRichTextEditorFlushChanges, H as VegaInternalRichTextEditDeleteSelectedNodes, I as VegaInternalRichTextImageClick, J as VegaInternalRichTextImageDeleteButtonClicked, v as VegaInternalCodeBlockBlur, z as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-12783594.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-73df5cbe.js';
+import { i as isNonNullable } from './type-guard-f69d2935.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-b6247a45.js';
-import { V as VisualModeToolbarButtonSlimmer, I as ImageAnnotationAction, T as TextNodeRenderingRegistry, b as ToolbarButtonSlimmer, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-6701b4c9.js';
-import { V as VegaDropdownClick, f as VegaChange, X as VegaImageInserted, a as VegaClick, T as VegaPopoverShow, U as VegaPopoverHide } from './vega-event-id-38aa77a0.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-d65bab61.js';
+import { V as VisualModeToolbarButtonSlimmer, I as ImageAnnotationAction, T as TextNodeRenderingRegistry, b as ToolbarButtonSlimmer, a as TextColorToolbarButtonSlimmer } from './image-annotation-action-eb3dcad5.js';
+import { V as VegaDropdownClick, f as VegaChange, a as VegaClick, X as VegaImageInserted, Y as VegaSourceCodeChange, T as VegaPopoverShow, U as VegaPopoverHide } from './vega-event-id-fdc58a67.js';
 import { g as generateUUID } from './misc-9fdbcfbb.js';
-import { w as waitForComponentDidRender } from './wait-for-component-did-render-b08ef07b.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-5817d14d.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-2bb8533d.js';
+import { w as waitForComponentDidRender } from './wait-for-component-did-render-4d0a3428.js';
+import { t as tryGetDocument } from './try-get-document-bef0f526.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-9a880420.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-f879fd58.js';
+import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-f4b3b0b9.js';
+import { R as RTESelectionState, C as ComponentValueHistoryControllerSlimmer, A as AutoRunWhenReRenderTaskQueueSlimmer, a as SelectionController } from './component-value-history-controller-slimmer.abstract-556fcf2a.js';
 import { F as FORM_ELEMENT_VALUE_CHANGE, D as DARK_MODE_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-a238b862.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-331312b8.js';
-import { T as TranslationSlimmer } from './translation-slimmer-2394b173.js';
+import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-d86e3a51.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-4feabae0.js';
+import { T as TranslationSlimmer } from './translation-slimmer-e788cae4.js';
 import { V as VegaInternalThemeManager } from './dark-mode-style-controller-82e5c1c6.js';
 import { i as isArrayEqual } from './array-7888f339.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
@@ -34,199 +35,31 @@ import { r as remoteInvocationRegistry } from './remote-invocation-registry-d692
 import './string-a953eafc.js';
 import './object-66c37948.js';
 import './breakpoints-d9faf11c.js';
-import './ui-28fd4193.js';
+import './ui-41f725b7.js';
 import './typography-396de03f.js';
-import './internal-translation-controller-911515f9.js';
+import './internal-translation-controller-0787a7a7.js';
 import './icon-manager-539d7cf7.js';
 import './create-public-api-runtime-metrics-slimmer-aaadaa08.js';
 import './dynamic-slimmer-90b8af32.js';
 import './index-3b327f29.js';
-import './try-get-document-bef0f526.js';
-import './page-resize-observer-slimmer-d6af0d86.js';
-import './breakpoints-56e5407b.js';
+import './page-resize-observer-slimmer-e0505250.js';
+import './breakpoints-13353e09.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-663f44dc.js';
+import './sub-state-observer-slimmer-058feaf0.js';
+import './internal-vega-event-manager-3aebbe55.js';
+import './range-0a22b512.js';
 import './synchronize-task-queue-ac8acc3b.js';
-import './keyboard-manager-slimmer-9984d922.js';
-import './keyboard-manager-38934f94.js';
+import './keyboard-manager-slimmer-87bf68f1.js';
+import './keyboard-manager-4dfc625f.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-30f7b625.js';
 import './index-bfc6dfa2.js';
 import './vega-nonce-manager-497e5eb5.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 __decorate$D = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -261,16 +94,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 +135,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,56 +152,59 @@ class VegaRichTextEditorRenderer extends VegaSlimmer {
   renderContent() {
     return (h(Fragment, null,
       this.renderTextContent(),
-      this.renderSourceViewContent()));
+      this.richTextEditorSourceViewRenderer.render()));
   }
 }
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "host", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "toolbarRenderer", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "label", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "required", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "hint", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "disabled", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "rows", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "placeholder", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "value", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "sourceView", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "toolbarItems", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "sourceEditConfig", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "allowSourceEdit", void 0);
-__decorate$C([
+__decorate$D([
   MapToComponentField()
 ], VegaRichTextEditorRenderer.prototype, "extensions", void 0);
-__decorate$C([
+__decorate$D([
+  MapToComponentField()
+], VegaRichTextEditorRenderer.prototype, "richTextEditorSourceViewRenderer", void 0);
+__decorate$D([
   MapToComponentMethod('componentDidRender')
 ], VegaRichTextEditorRenderer.prototype, "componentDidRender", 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;
@@ -479,67 +300,67 @@ class ToolbarRenderer extends VegaSlimmer {
     return [renderedItems, totalVisibleCount];
   }
 }
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "toolbarItems", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "allowSourceEdit", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "host", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "clearStyleToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "boldToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "textStylesToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "italicToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "underlineToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "textColorToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "bulletsNumbersToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "horizontalAlignmentToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "strikethroughToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "imageToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "moreIndentToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "lessIndentToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "codeToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "linkToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "codeBlockToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "sourceEditToolbarButtonSlimmer", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "selectionController", void 0);
-__decorate$B([
+__decorate$C([
   MapToComponentField()
 ], ToolbarRenderer.prototype, "sourceView", void 0);
 
@@ -547,7 +368,7 @@ const bold = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>`,
 };
 
-var __decorate$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;
@@ -589,7 +410,7 @@ class BoldToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ bold });
 })();
-__decorate$A([
+__decorate$B([
   MapToComponentField()
 ], BoldToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -597,7 +418,7 @@ const italic = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M128 64c0-17.7 14.3-32 32-32H352c17.7 0 32 14.3 32 32s-14.3 32-32 32H293.3L160 416h64c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H90.7L224 96H160c-17.7 0-32-14.3-32-32z"/></svg>`,
 };
 
-var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$A = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -637,7 +458,7 @@ class ItalicToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ italic });
 })();
-__decorate$z([
+__decorate$A([
   MapToComponentField()
 ], ItalicToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -645,7 +466,7 @@ const underline = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M16 64c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H128V224c0 53 43 96 96 96s96-43 96-96V96H304c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H384V224c0 88.4-71.6 160-160 160s-160-71.6-160-160V96H48C30.3 96 16 81.7 16 64zM0 448c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32z"/></svg>`,
 };
 
-var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$z = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -688,7 +509,7 @@ class UnderlineToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ underline });
 })();
-__decorate$y([
+__decorate$z([
   MapToComponentField()
 ], UnderlineToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -696,7 +517,7 @@ const textSize = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M64 128V96h96l0 320H128c-17.7 0-32 14.3-32 32s14.3 32 32 32H256c17.7 0 32-14.3 32-32s-14.3-32-32-32H224l0-320h96v32c0 17.7 14.3 32 32 32s32-14.3 32-32V80c0-26.5-21.5-48-48-48H192 48C21.5 32 0 53.5 0 80v48c0 17.7 14.3 32 32 32s32-14.3 32-32zM384 304V288h64l0 128H432c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H512l0-128h64v16c0 17.7 14.3 32 32 32s32-14.3 32-32V272c0-26.5-21.5-48-48-48H368c-26.5 0-48 21.5-48 48v32c0 17.7 14.3 32 32 32s32-14.3 32-32z"/></svg>`,
 };
 
-var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$y = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -807,10 +628,10 @@ TextStylesToolbarButtonSlimmer.items = [
     label: 'Paragraph',
   },
 ];
-__decorate$x([
+__decorate$y([
   MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$x([
+__decorate$y([
   MapToComponentField()
 ], TextStylesToolbarButtonSlimmer.prototype, "focusController", void 0);
 
@@ -818,7 +639,7 @@ const TextSlash = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M38.8 5.1C28.4-3.1 13.3-1.2 5.1 9.2S-1.2 34.7 9.2 42.9l592 464c10.4 8.2 25.5 6.3 33.7-4.1s6.3-25.5-4.1-33.7L355.7 253.5 400.2 96H503L497 120.2c-4.3 17.1 6.1 34.5 23.3 38.8s34.5-6.1 38.8-23.3l11-44.1C577.6 61.3 554.7 32 523.5 32H376.1h-.3H204.5c-22 0-41.2 15-46.6 36.4l-6.3 25.2L38.8 5.1zm168 131.7c.1-.3 .2-.7 .3-1L217 96H333.7L301.3 210.8l-94.5-74.1zM243.3 416H192c-17.7 0-32 14.3-32 32s14.3 32 32 32H352c17.7 0 32-14.3 32-32s-14.3-32-32-32H309.8l17.6-62.1L272.9 311 243.3 416z"/></svg>`,
 };
 
-var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$x = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -855,7 +676,7 @@ class ClearStyleToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     'text-slash': TextSlash,
   });
 })();
-__decorate$w([
+__decorate$x([
   MapToComponentField()
 ], ClearStyleToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -863,7 +684,7 @@ const codeSimple = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M214.6 118.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3l160 160c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 214.6 118.6zm146.7 0L498.7 256 361.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3z"/></svg>`,
 };
 
-var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$w = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -901,7 +722,7 @@ class CodeToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ 'code-simple': codeSimple });
 })();
-__decorate$v([
+__decorate$w([
   MapToComponentField()
 ], CodeToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -909,7 +730,7 @@ const strikethrough = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License) Copyright 2022 Fonticons, Inc. --><path fill="currentColor" d="M332.2 319.9c17.22 12.17 22.33 26.51 18.61 48.21c-3.031 17.59-10.88 29.34-24.72 36.99c-35.44 19.75-108.5 11.96-186-19.68c-16.34-6.686-35.03 1.156-41.72 17.53s1.188 35.05 17.53 41.71c31.75 12.93 95.69 35.37 157.6 35.37c29.62 0 58.81-5.156 83.72-18.96c30.81-17.09 50.44-45.46 56.72-82.11c3.998-23.27 2.168-42.58-3.488-59.05H332.2zM488 239.9l-176.5-.0309c-15.85-5.613-31.83-10.34-46.7-14.62c-85.47-24.62-110.9-39.05-103.7-81.33c2.5-14.53 10.16-25.96 22.72-34.03c20.47-13.15 64.06-23.84 155.4 .3438c17.09 4.531 34.59-5.654 39.13-22.74c4.531-17.09-5.656-34.59-22.75-39.12c-91.31-24.18-160.7-21.62-206.3 7.654C121.8 73.72 103.6 101.1 98.09 133.1C89.26 184.5 107.9 217.3 137.2 239.9L24 239.9c-13.25 0-24 10.75-24 23.1c0 13.25 10.75 23.1 24 23.1h464c13.25 0 24-10.75 24-23.1C512 250.7 501.3 239.9 488 239.9z"/></svg>`,
 };
 
-var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$v = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -952,7 +773,7 @@ class StrikethroughToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ strikethrough });
 })();
-__decorate$u([
+__decorate$v([
   MapToComponentField()
 ], StrikethroughToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -960,7 +781,7 @@ const link = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M562.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L405.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C189.5 251.2 196 330 246 380c56.5 56.5 148 56.5 204.5 0L562.8 267.7zM43.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C57 372 57 321 88.5 289.5L200.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C416.5 260.8 410 182 360 132c-56.5-56.5-148-56.5-204.5 0L43.2 244.3z"/></svg>`,
 };
 
-var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$u = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1043,7 +864,7 @@ class LinkToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ link: link });
 })();
-__decorate$t([
+__decorate$u([
   MapToComponentField()
 ], LinkToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -1051,7 +872,7 @@ const indent = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M0 64C0 46.3 14.3 32 32 32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 96 0 81.7 0 64zM192 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32zm32 96H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zM0 448c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM127.8 268.6L25.8 347.9C15.3 356.1 0 348.6 0 335.3V176.7c0-13.3 15.3-20.8 25.8-12.6l101.9 79.3c8.2 6.4 8.2 18.9 0 25.3z"/></svg>`,
 };
 
-var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$t = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1085,7 +906,7 @@ class MoreIndentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ indent: indent });
 })();
-__decorate$s([
+__decorate$t([
   MapToComponentField()
 ], MoreIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -1093,7 +914,7 @@ const outdent = {
   icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M6 64C6 46.3 20.3 32 38 32H422c17.7 0 32 14.3 32 32s-14.3 32-32 32H38C20.3 96 6 81.7 6 64zM198 192c0-17.7 14.3-32 32-32H422c17.7 0 32 14.3 32 32s-14.3 32-32 32H230c-17.7 0-32-14.3-32-32zm32 96H422c17.7 0 32 14.3 32 32s-14.3 32-32 32H230c-17.7 0-32-14.3-32-32s14.3-32 32-32zM6 448c0-17.7 14.3-32 32-32H422c17.7 0 32 14.3 32 32s-14.3 32-32 32H38c-17.7 0-32-14.3-32-32zm.2-179.4c-8.2-6.4-8.2-18.9 0-25.3l101.9-79.3c10.5-8.2 25.8-.7 25.8 12.6V335.3c0 13.3-15.3 20.8-25.8 12.6L6.2 268.6z"/></svg>`,
 };
 
-var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$s = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1128,7 +949,7 @@ class LessIndentToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ outdent: outdent });
 })();
-__decorate$r([
+__decorate$s([
   MapToComponentField()
 ], LessIndentToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -1149,7 +970,7 @@ class ImageUpdateUrlAction extends ModifyContentAction {
   }
 }
 
-var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$r = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1161,8 +982,28 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       icon: 'image',
       tooltip: { text: 'Image' },
     });
-    this.onClick = () => {
-      this.inputElementRef.click();
+    this.insertURLImage = async () => {
+      const url = this.normalizeSafeImageUrl(this.insertURLInputRef.value);
+      this.applyImageNode(url, 'url');
+      await this.insertURLModalRef.modal('hide');
+    };
+    this.handleDropdownItemClick = async (payload) => {
+      const safeDocument = tryGetDocument();
+      switch (payload.detail) {
+        case 'upload':
+          this.uploadInputRef.click();
+          break;
+        case 'url':
+          this.currentRange = this.selectionController.getCurrentRange();
+          this.currentSelectedNodes = this.selectionController.getSelectedNodes();
+          this.currentSelectedBlocks = this.selectionController.getSelectedBlocks();
+          safeDocument && safeDocument.body.append(this.insertURLModalRef);
+          this.insertURLInputRef.value = '';
+          await this.insertURLModalRef.modal('show');
+          await this.insertURLInputRef.doFocus();
+          break;
+      }
+      await this.dropdownRef.hide();
     };
     /**
      * The below method is e2e-test covered in
@@ -1175,13 +1016,7 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       if (!input.files.length) {
         return;
       }
-      const node = this.insertImageController.insertImageToCaretPosition(URL.createObjectURL(input.files[0]));
-      if (!this.updateNodeURLMap) {
-        this.updateNodeURLMap = new Map();
-      }
-      this.updateNodeURLMap.set(node, (url) => {
-        node.apply(new ImageUpdateUrlAction(url));
-      });
+      const node = this.applyImageNode(URL.createObjectURL(input.files[0]), 'upload');
       const payload = {
         file: input.files[0],
         sendBackUploadedURLCallback: this.updateNodeURLMap.get(node),
@@ -1192,8 +1027,14 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   }
   renderBtnWrapper(renderBtn) {
     return (h("vega-box", null,
-      renderBtn({ showArrowIcon: false }),
-      h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.inputElementRef = node), accept: "image/*", onChange: this.fileInputChange })));
+      h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", ref: (ref) => {
+          this.dropdownRef = ref;
+          this.addDropdownObserver(ref);
+        } },
+        renderBtn({ showArrowIcon: true }),
+        h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent())),
+      this.renderUploadInput(),
+      this.renderInsertURLModal()));
   }
   isSelected() {
     return false;
@@ -1205,17 +1046,92 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       selectedNodes.some((node) => node.getAnnotationByType(NodeAnnotationTypeEnum.LINK)) ||
       this.shouldDisabledToolbar(selectedBlock, ModifyContentActionType.INSERT_IMAGE_TO_BLOCK));
   }
+  renderDropdownContent() {
+    return (h(Fragment, null, ImageToolbarButtonSlimmer.items.map((item) => {
+      return (h("vega-dropdown-item", { key: item.key, itemKey: item.key }, this.translationSlimmer.t(item.label)));
+    })));
+  }
+  renderUploadInput() {
+    return (h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.uploadInputRef = node), accept: "image/*", onChange: this.fileInputChange }));
+  }
+  renderInsertURLModal() {
+    return (h("vega-modal", { size: 500, backdropColor: "semi", ref: (node) => (this.insertURLModalRef = node) },
+      h("div", { slot: "modal-title" }, this.translationSlimmer.t('Image via URL')),
+      h("div", { slot: "modal-content" },
+        h("vega-input", { placeholder: this.translationSlimmer.t('URL'), ref: (ref) => (this.insertURLInputRef = ref), 
+          /* istanbul ignore next */
+          // eslint-disable-next-line react/jsx-no-bind
+          onKeyDown: async (event) => {
+            event.key === 'Enter' && (await this.insertURLImage());
+          } })),
+      h("vega-flex", { slot: "modal-footer", gap: "size-8", alignItems: "center", justifyContent: "end" },
+        h("vega-button", { label: this.translationSlimmer.t('Cancel'), variant: "secondary", ref: (ref) => {
+            this.addModalCancelObserver(ref);
+          } }),
+        h("vega-button", { label: this.translationSlimmer.t('Insert'), ref: (ref) => {
+            this.addModalInsertObserver(ref);
+          } }))));
+  }
+  addDropdownObserver(dropdownRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(dropdownRef, VegaDropdownClick, this.handleDropdownItemClick);
+  }
+  addModalCancelObserver(buttonRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(buttonRef, VegaClick, async () => {
+      await this.insertURLModalRef.modal('hide');
+    });
+  }
+  addModalInsertObserver(buttonRef) {
+    DomNodeSubjectObserverFactory.addUniqueObserverToNode(buttonRef, VegaClick, this.insertURLImage);
+  }
+  /**
+   * The below method is e2e-test covered in
+   * @see{module:should-update-url-properly-when-upload-images}
+   */
+  /* istanbul ignore next */
+  applyImageNode(url, type) {
+    const node = type === 'url'
+      ? this.insertImageController.insertImageToCaretPosition(url, this.currentSelectedBlocks, this.currentSelectedNodes, this.currentRange)
+      : this.insertImageController.insertImageToCaretPosition(url);
+    if (!this.updateNodeURLMap) {
+      this.updateNodeURLMap = new Map();
+    }
+    this.updateNodeURLMap.set(node, (url) => {
+      node.apply(new ImageUpdateUrlAction(url));
+    });
+    return node;
+  }
+  normalizeSafeImageUrl(url) {
+    try {
+      const parsedUrl = new URL(url);
+      if (parsedUrl.protocol === 'javascript:') {
+        return '';
+      }
+      // eslint-disable-next-line no-empty
+    }
+    catch (_error) { }
+    return url;
+  }
 }
 (() => {
   VegaInternalIconManager.register({ image: image });
 })();
-__decorate$q([
+ImageToolbarButtonSlimmer.items = [
+  {
+    key: 'upload',
+    label: 'Upload from computer',
+  },
+  {
+    key: 'url',
+    label: 'Insert via URL',
+  },
+];
+__decorate$r([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "insertImageController", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "imageInsertedEventEmitter", void 0);
-__decorate$q([
+__decorate$r([
   MapToComponentField()
 ], ImageToolbarButtonSlimmer.prototype, "selectionController", void 0);
 
@@ -1252,7 +1168,7 @@ class TransformParagraphAction extends ModifyContentAction {
   }
 }
 
-var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$q = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1311,14 +1227,14 @@ class BulletsToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     }
   }
 }
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], BulletsToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$p([
+__decorate$q([
   MapToComponentField()
 ], BulletsToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$p = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1375,14 +1291,14 @@ class NumbersToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     }
   }
 }
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], NumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$o([
+__decorate$p([
   MapToComponentField()
 ], NumbersToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$o = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1457,16 +1373,16 @@ class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer
     'list-ol': ListOL,
   });
 })();
-__decorate$n([
+__decorate$o([
   MapToComponentField()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$n([
+__decorate$o([
   InjectVegaSlimmer()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "bulletsToolbarButtonSlimmer", void 0);
-__decorate$n([
+__decorate$o([
   InjectVegaSlimmer()
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "numbersToolbarButtonSlimmer", void 0);
-__decorate$n([
+__decorate$o([
   MapToComponentMethod('componentWillRender')
 ], BulletsNumbersToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
@@ -1474,7 +1390,7 @@ 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 __decorate$n = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1509,10 +1425,10 @@ class LeftAlignToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     'align-left': AlignLeft,
   });
 })();
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$m([
+__decorate$n([
   MapToComponentField()
 ], LeftAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1520,7 +1436,7 @@ 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 __decorate$m = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1555,10 +1471,10 @@ class CenterAlignToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     'align-center': AlignCenter,
   });
 })();
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$l([
+__decorate$m([
   MapToComponentField()
 ], CenterAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1566,7 +1482,7 @@ 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 __decorate$l = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1601,10 +1517,10 @@ class RightAlignToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     'align-right': AlignRight,
   });
 })();
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$k([
+__decorate$l([
   MapToComponentField()
 ], RightAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
@@ -1612,7 +1528,7 @@ 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 __decorate$k = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1647,14 +1563,14 @@ class JustifyAlignToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     'align-justify': AlignJustify,
   });
 })();
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], JustifyAlignToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$j([
+__decorate$k([
   MapToComponentField()
 ], JustifyAlignToolbarButtonSlimmer.prototype, "popoverRef", void 0);
 
-var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$j = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1712,22 +1628,22 @@ class HorizontalAlignmentToolbarButtonSlimmer extends VisualModeToolbarButtonSli
         .some((block) => this.shouldDisabledToolbar(block, HorizontalAlignmentAnnotationAction.name)));
   }
 }
-__decorate$i([
+__decorate$j([
   MapToComponentField()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "selectionController", void 0);
-__decorate$i([
+__decorate$j([
   InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "leftAlignToolbarButtonSlimmer", void 0);
-__decorate$i([
+__decorate$j([
   InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "centerAlignToolbarButtonSlimmer", void 0);
-__decorate$i([
+__decorate$j([
   InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "rightAlignToolbarButtonSlimmer", void 0);
-__decorate$i([
+__decorate$j([
   InjectVegaSlimmer()
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "justifiedToolbarButtonSlimmer", void 0);
-__decorate$i([
+__decorate$j([
   MapToComponentMethod('componentWillRender')
 ], HorizontalAlignmentToolbarButtonSlimmer.prototype, "componentWillRender", null);
 
@@ -1768,7 +1684,7 @@ class RTEEditorState {
   }
 }
 
-var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1854,37 +1770,37 @@ class ValueController extends VegaSlimmer {
   }
 }
 ValueController.VALUE_CHANGE_DEBOUNCE_TIME = 50;
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], ValueController.prototype, "host", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField({ writable: true })
 ], ValueController.prototype, "value", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], ValueController.prototype, "changeEventEmitter", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], ValueController.prototype, "valueController", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], ValueController.prototype, "historyController", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], ValueController.prototype, "selectionController", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentField()
 ], ValueController.prototype, "sourceEditConfig", void 0);
-__decorate$h([
+__decorate$i([
   MapToComponentMethod('connectedCallback')
 ], ValueController.prototype, "connectedCallback", null);
-__decorate$h([
+__decorate$i([
   MapToComponentMethod('disconnectedCallback')
 ], ValueController.prototype, "disconnectedCallback", null);
-__decorate$h([
+__decorate$i([
   MapToComponentMethod('componentWillLoad')
 ], ValueController.prototype, "componentWillLoad", null);
-__decorate$h([
+__decorate$i([
   MapToComponentMethod('watchValueUpdate')
 ], ValueController.prototype, "watchValueUpdate", null);
 
@@ -2550,7 +2466,7 @@ class InsertPasteHandler extends BaseHandler {
   }
 }
 
-var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$h = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2677,28 +2593,28 @@ class UserInputController extends VegaSlimmer {
     return false;
   }
 }
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], UserInputController.prototype, "host", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], UserInputController.prototype, "value", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], UserInputController.prototype, "valueController", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], UserInputController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], UserInputController.prototype, "selectionController", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentField()
 ], UserInputController.prototype, "insertCompositionTextController", void 0);
-__decorate$g([
+__decorate$h([
   MapToComponentMethod('componentDidLoad')
 ], UserInputController.prototype, "addActionListener", null);
-__decorate$g([
+__decorate$h([
   MapToComponentMethod('disconnectedCallback')
 ], UserInputController.prototype, "removeActionListener", null);
 
@@ -2718,7 +2634,7 @@ class InsertImageToBlockAction extends ModifyContentAction {
   }
 }
 
-var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$g = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2730,10 +2646,13 @@ class InsertImageController extends VegaSlimmer {
    * Insert a image to current state
    *
    * @param {string} imageUrl The image url
+   * @param {RTEBlock[]} selectedBlocks The current selected blocks, if not provided, will get from selectionController
+   * @param {RTENode[]} selectedNodes The current selected nodes, if not provided, will get from selectionController
+   * @param {RTERange} currentRange The current selected range, if not provided, will get from selectionController
    * @returns {RTEImageNode} RTEImageNode
    */
-  insertImageToCaretPosition(imageUrl) {
-    const selectedBlocks = this.selectionController.getSelectedBlocks();
+  insertImageToCaretPosition(imageUrl, selectedBlocks, selectedNodes, currentRange) {
+    selectedBlocks || (selectedBlocks = this.selectionController.getSelectedBlocks());
     const imageBlock = new RTEImageBlock(generateUUID());
     const newImageNode = new RTEImageNode(generateUUID(), imageUrl, imageBlock);
     newImageNode.apply(new ImageAnnotationAction('md', ''));
@@ -2743,8 +2662,8 @@ class InsertImageController extends VegaSlimmer {
       void this.valueController.flushChanges(this.value);
     }
     else {
-      const { startOffset } = this.selectionController.getCurrentRange();
-      const selectedNodes = this.selectionController.getSelectedNodes();
+      const { startOffset } = currentRange || this.selectionController.getCurrentRange();
+      selectedNodes || (selectedNodes = this.selectionController.getSelectedNodes());
       selectedBlocks[0].apply(new InsertImageToBlockAction(selectedNodes[0], startOffset, imageBlock));
     }
     this.updateCaretPosition(newImageNode);
@@ -2807,26 +2726,26 @@ class InsertImageController extends VegaSlimmer {
     }
   }
 }
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], InsertImageController.prototype, "selectionController", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], InsertImageController.prototype, "value", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], InsertImageController.prototype, "valueController", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentField()
 ], InsertImageController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$f([
+__decorate$g([
   MapToComponentMethod('componentDidLoad')
 ], InsertImageController.prototype, "registerObserver", null);
-__decorate$f([
+__decorate$g([
   MapToComponentMethod('disconnectedCallback')
 ], InsertImageController.prototype, "unRegisterObserver", null);
 
-var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$f = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2892,20 +2811,20 @@ class FocusController extends VegaSlimmer {
     this.selectionController.setSelectionRange(range);
   }
 }
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], FocusController.prototype, "vegaRichTextEditorRenderer", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], FocusController.prototype, "selectionController", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], FocusController.prototype, "valueController", void 0);
-__decorate$e([
+__decorate$f([
   MapToComponentField()
 ], FocusController.prototype, "value", void 0);
 
-var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$e = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -2945,14 +2864,14 @@ class TextNodeColorController extends VegaSlimmer {
     return true;
   }
 }
-__decorate$d([
+__decorate$e([
   MapToComponentMethod('connectedCallback')
 ], TextNodeColorController.prototype, "connectedCallback", null);
-__decorate$d([
+__decorate$e([
   MapToComponentMethod('disconnectedCallback')
 ], TextNodeColorController.prototype, "disconnectResizeObserver", null);
 
-var __decorate$c = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$d = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3162,35 +3081,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;
@@ -3399,23 +3318,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;
@@ -3491,22 +3410,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);
 
@@ -3527,7 +3446,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;
@@ -3583,13 +3502,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);
 
@@ -3660,7 +3579,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;
@@ -3693,7 +3612,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;
     }
@@ -3707,26 +3626,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;
@@ -3800,28 +3719,292 @@ class RTEExtensionController extends VegaSlimmer {
     }
   }
 }
-__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('watchExtensions')
 ], RTEExtensionController.prototype, "handleExtensionsChange", null);
 
+/**
+ * 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}: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) {
@@ -3841,6 +4024,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();
@@ -3893,6 +4078,8 @@ const VegaRichTextEditor = class {
     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();
@@ -4146,6 +4333,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) {
@@ -4313,7 +4506,7 @@ class VegaRichTextImageEditorRenderer extends VegaSlimmer {
     };
   }
   render() {
-    return (h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+    return (h("vega-popover", { style: { width: '100%' }, trigger: "click", alignment: "start", placement: "bottom", showArrow: false, isScreenPosition: true, ref: (ref) => {
         this.popoverRef = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
           this.selected = true;