@globalpayments/vega 2.92.0 → 2.94.0

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

@@ -1,4 +1,4 @@
-import { h, H as Host, F as Fragment, r as registerInstance, c as createEvent, g as getElement } from './index-090d31ca.js';
+import { h, H as Host, F as Fragment, f as forceUpdate, r as registerInstance, c as createEvent, g as getElement } from './index-090d31ca.js';
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaComponentUsageRuntimeMetricsSlimmer, I as InjectVegaGlobalSlimmer } from './component-usage-runtime-metrics-4b1afd04.js';
 import { s as sanitizeVegaComponent } from './component-7d906393.js';
@@ -6,32 +6,33 @@ import { c as createEnterKeyHandlerToTriggerClick } from './accessibility-6af5cf
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-ddff8662.js';
 import { t as VegaInternalComponentDidRender, e as VegaInternalRichTextEditorFlushChanges, d as VegaInternalRichTextEditDeleteSelectedNodes, H as VegaInternalRichTextImageClick, I as VegaInternalRichTextImageDeleteButtonClicked, z as VegaInternalCodeBlockBlur, a as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-827eb1ce.js';
-import { ai as VegaRTEOneRowHeightPx, R as RTETextNode, aj as BoldAnnotationAction, N as NodeAnnotationTypeEnum, ak as ItalicAnnotationAction, al as UnderlineAnnotationAction, b as RTETextBlock, T as TextStyleAnnotationAction, a3 as TextStyleAnnotation, am as BoldAnnotation, F as BlockAnnotationTypeEnum, an as ClearFormattingAnnotationAction, ao as CodeAnnotationAction, ap as StrikethroughAnnotationAction, ag as SelectionChangeAction, ae as LinkAnnotationAction, aq as IndentAnnotationAction, M as ModifyContentAction, i as ModifyContentActionType, q as RTECodeBlockNode, A as ActionHandleStrategyRegistry, H as HorizontalAlignmentAnnotationAction, s as stateEntityRenderingRegistry, e as AppendChildrenAction, ad as ZERO_WIDTH_SPACE, U as UpdateTextAction, g as InsertChildrenBeforeAction, S as SplitBlockWithNodeAction, f as RTENode, a as RTEBlock, k as RemoveChildrenAction, O as ReplaceChildNodesAction, p as RTECodeBlock, I as InsertChildrenAfterAction, V as VegaRTEPresetToolbarItems, ac as VegaRTEDefaultTextStyleItems } from './code-block-b71b2aa4.js';
-import { d as RTEDTORendererManager, V as VegaRTELinkExtension } from './link-extension-f1a3bea7.js';
-import { i as isNonNullable } from './type-guard-91087018.js';
+import { S as SHADOW_ROOT_ELEMENT_SCROLLING, F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-1c86e974.js';
+import { ai as VegaRTEOneRowHeightPx, R as RTETextNode, aj as BoldAnnotationAction, N as NodeAnnotationTypeEnum, ak as ItalicAnnotationAction, al as UnderlineAnnotationAction, b as RTETextBlock, T as TextStyleAnnotationAction, a3 as TextStyleAnnotation, am as BoldAnnotation, F as BlockAnnotationTypeEnum, an as ClearFormattingAnnotationAction, ao as CodeAnnotationAction, ap as StrikethroughAnnotationAction, ag as SelectionChangeAction, ae as LinkAnnotationAction, aq as IndentAnnotationAction, M as ModifyContentAction, i as ModifyContentActionType, q as RTECodeBlockNode, A as ActionHandleStrategyRegistry, H as HorizontalAlignmentAnnotationAction, s as stateEntityRenderingRegistry, e as AppendChildrenAction, ad as ZERO_WIDTH_SPACE, U as UpdateTextAction, g as InsertChildrenBeforeAction, S as SplitBlockWithNodeAction, f as RTENode, a as RTEBlock, k as RemoveChildrenAction, O as ReplaceChildNodesAction, ar as escapeHtml, p as RTECodeBlock, I as InsertChildrenAfterAction, V as VegaRTEPresetToolbarItems, ac as VegaRTEDefaultTextStyleItems } from './code-block-e12588fe.js';
+import { d as RTEDTORendererManager, V as VegaRTELinkExtension } from './link-extension-97fcb8fb.js';
+import { i as isNonNullable } from './type-guard-ec5e8628.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-e7c57096.js';
-import { V as VisualModeToolbarButtonSlimmer, I as ImageAnnotationAction, a as ToolbarButtonSlimmer, T as TextColorToolbarButtonSlimmer, n as normalizeUrlByDefaultProtocol } from './image-annotation-action-98232dc4.js';
-import { V as VegaDropdownClick, d as VegaChange, a as VegaClick, $ as VegaImageInserted, a0 as VegaSourceCodeChange, c as VegaPopoverShow, b as VegaPopoverHide } from './vega-event-id-d3017041.js';
+import { V as VisualModeToolbarButtonSlimmer, I as ImageAnnotationAction, a as ToolbarButtonSlimmer, T as TextColorToolbarButtonSlimmer, n as normalizeUrlByDefaultProtocol } from './image-annotation-action-b3b6c308.js';
+import { V as VegaDropdownClick, d as VegaChange, a as VegaClick, a0 as VegaImageInserted, a1 as VegaSourceCodeChange, c as VegaPopoverShow, b as VegaPopoverHide } from './vega-event-id-270fe47e.js';
 import { g as generateUUID } from './misc-9fdbcfbb.js';
 import { w as waitForComponentDidRender } from './wait-for-component-did-render-0c237cb8.js';
-import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-cfe1d8a7.js';
-import { c as createEventEmitSlimmer } from './event-emit-slimmer-03deba18.js';
+import { V as VegaRTEImageExtension, R as ReplaceSelectedTextAction } from './image-extension-b6c7e4a7.js';
+import { F as FormFieldControllerSlimmer } from './form-field-controller-slimmer-395c23e3.js';
+import { c as createEventEmitSlimmer } from './event-emit-slimmer-db4a82e0.js';
 import { c as createSubStateNotifySlimmer } from './sub-state-notify-slimmer-0f72ce74.js';
-import { f as RTEImageNode, b as RTEListItemBlock, V as VegaRTEContent, M as MergeTwoBlocksNodesAction, I as InsertNewParagraphAction, S as StylePreservator, i as ElementToDtoStrategyProcessor, R as RTEImageBlock } from './content-state-909099f8.js';
+import { f as RTEImageNode, b as RTEListItemBlock, V as VegaRTEContent, M as MergeTwoBlocksNodesAction, I as InsertNewParagraphAction, S as StylePreservator, i as ElementToDtoStrategyProcessor, R as RTEImageBlock } from './content-state-8032467a.js';
 import { b as AlignLeft, A as AlignCenter, c as AlignRight, a as AlignJustify } from './align-left-7f959adf.js';
-import { R as RTESelectionState, C as ComponentValueHistoryControllerSlimmer, a as SelectionController } from './component-value-history-controller-slimmer.abstract-282df6e5.js';
-import { F as FORM_ELEMENT_VALUE_CHANGE } from './static-subject-title-1c86e974.js';
+import { R as RTESelectionState, C as ComponentValueHistoryControllerSlimmer, a as SelectionController } from './component-value-history-controller-slimmer.abstract-4e8eb313.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-778dd929.js';
-import { R as ReplaceSelectedTextAction } from './replace-selected-text-action-c0817b2b.js';
-import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-0edb8ba7.js';
-import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-f24618c5.js';
-import { T as TranslationSlimmer } from './translation-slimmer-60408f13.js';
+import { R as RichTextEditorRequiredRule } from './rich-text-editor-required-rule-71f8ee98.js';
+import { C as ChildNodesEventPreventSlimmer } from './child-nodes-event-prevent-slimmer-96c14f5a.js';
+import { T as TranslationSlimmer } from './translation-slimmer-21748a0e.js';
 import { V as VegaInternalThemeManager } from './dark-mode-style-controller-ca5afd2d.js';
 import { A as AutoRunWhenReRenderTaskQueueSlimmer } from './auto-run-when-re-render-task-queue-slimmer.abstract-27820d4c.js';
 import { i as isArrayEqual } from './array-7888f339.js';
 import { c as chevronDown } from './chevron-down-4a75d28e.js';
+import { c as chevronUp } from './chevron-up-b1989751.js';
 import { t as trashCan } from './trash-can-8819a939.js';
 import { f as findParent } from './ui-d73f756a.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
@@ -40,7 +41,7 @@ import './typography-19c3b9be.js';
 import './object-0c277f57.js';
 import './breakpoints-d9faf11c.js';
 import './ui-93922c59.js';
-import './internal-translation-controller-8e8a514a.js';
+import './internal-translation-controller-16709132.js';
 import './icon-manager-4ef3f6dd.js';
 import './create-public-api-runtime-metrics-slimmer-48f85199.js';
 import './dynamic-slimmer-90b8af32.js';
@@ -52,10 +53,10 @@ 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-64532d94.js';
-import './internal-vega-event-manager-75e5e3bb.js';
-import './range-e63068d1.js';
-import './keyboard-manager-slimmer-61d4c79b.js';
-import './keyboard-manager-fe885db1.js';
+import './internal-vega-event-manager-48690e5b.js';
+import './range-e999837f.js';
+import './keyboard-manager-slimmer-f3f66c15.js';
+import './keyboard-manager-a0c3e1cf.js';
 import './vega-env-manager-8f8dc473.js';
 import './feature-flag-controller-3fd04ea9.js';
 import './index-9c9865c0.js';
@@ -90,9 +91,18 @@ class VegaRichTextEditorRenderer extends VegaSlimmer {
           'disabled': this.disabled,
           'vega-hidden': this.sourceView,
         }, style: containerStyle, onClick: this.richTextContentFocus, role: "textbox", tabIndex: !this.disabled ? -1 : 0, onKeyDown: createEnterKeyHandlerToTriggerClick(), ref: (node) => (this.richTextContainerRef = node) },
-        h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value, extensions: this.extensions }),
+        h("vega-rich-text-content", { ref: (ref) => (this.richTextContentRef = ref), content: this.value, extensions: this.extensions, onScroll: this.notifyContentScrolling }),
         this.renderCharacterCounter()));
     };
+    /**
+     * Propagates rich-text content scrolling inside shadow root so open appender
+     * can force position recalculation via ElementAppenderSlimmer.
+     */
+    this.notifyContentScrolling = () => {
+      ChangeManager.notify(SHADOW_ROOT_ELEMENT_SCROLLING, {
+        host: this.host,
+      });
+    };
     this.renderCharacterCounter = () => {
       return (h("div", { class: {
           'text-editor-counter': true,
@@ -586,7 +596,7 @@ class TextStylesToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-dropdown", { selectType: "single", trigger: "click", alignment: "center", selectedSourceKey: this.getSelectedSourceKey(), ref: (ref) => {
+    return (h("vega-dropdown", { selectType: "single", trigger: "click", alignment: "center", isScreenPosition: true, selectedSourceKey: this.getSelectedSourceKey(), ref: (ref) => {
         this.addDropdownObserver(ref);
       } },
       renderBtn({ showArrowIcon: true }),
@@ -1033,6 +1043,7 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     super({
       icon: 'image',
       tooltip: { text: 'Image' },
+      autoFocusOnClick: false,
     });
     this.insertURLImage = async () => {
       const url = this.normalizeSafeImageUrl(this.insertURLInputRef.value);
@@ -1045,18 +1056,21 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
           this.uploadInputRef.click();
           break;
         case 'url':
-          this.currentRange = this.selectionController.getCurrentRange();
-          this.currentSelectedNodes = this.selectionController.getSelectedNodes();
-          this.currentSelectedBlocks = this.selectionController.getSelectedBlocks();
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          this.host.parentElement.append(this.insertURLModalRef);
-          this.insertURLInputRef.value = '';
-          await this.insertURLModalRef.modal('show');
-          await this.insertURLInputRef.doFocus();
+          await this.openInsertURLModal();
           break;
       }
       await this.dropdownRef.hide();
     };
+    this.openInsertURLModal = async () => {
+      this.currentRange = this.selectionController.getCurrentRange();
+      this.currentSelectedNodes = this.selectionController.getSelectedNodes();
+      this.currentSelectedBlocks = this.selectionController.getSelectedBlocks();
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.host.parentElement.append(this.insertURLModalRef);
+      this.insertURLInputRef.value = '';
+      await this.insertURLModalRef.modal('show');
+      await this.insertURLInputRef.doFocus();
+    };
     /**
      * The below method is e2e-test covered in
      * @see{module:should-update-url-properly-when-upload-images}
@@ -1078,15 +1092,33 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     };
   }
   renderBtnWrapper(renderBtn) {
+    const shouldRenderDropdown = this.shouldRenderDropdown();
+    const shouldRenderUpload = this.isImageUploadEnabled();
+    const shouldRenderUrlInsertion = this.isImageURLInsertionEnabled();
+    if (!shouldRenderUpload && !shouldRenderUrlInsertion) {
+      return null;
+    }
     return (h("vega-box", null,
-      h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", ref: (ref) => {
+      shouldRenderDropdown ? (h("vega-dropdown", { selectType: "none", trigger: "click", alignment: "center", isScreenPosition: true, 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()));
+        h("div", Object.assign({ slot: "items" }, super.preventLostFocus()), this.renderDropdownContent()))) : (renderBtn({})),
+      shouldRenderUpload ? this.renderUploadInput() : null,
+      shouldRenderUrlInsertion ? this.renderInsertURLModal() : null));
+  }
+  onClick() {
+    if (this.shouldRenderDropdown()) {
+      return;
+    }
+    if (this.isImageURLInsertionEnabled()) {
+      void this.openInsertURLModal();
+      return;
+    }
+    if (this.isImageUploadEnabled()) {
+      this.uploadInputRef.click();
+    }
   }
   isSelected() {
     return false;
@@ -1099,10 +1131,20 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
       this.shouldDisabledToolbar(selectedBlock, ModifyContentActionType.INSERT_IMAGE_TO_BLOCK));
   }
   renderDropdownContent() {
-    return (h(Fragment, null, ImageToolbarButtonSlimmer.items.map((item) => {
+    return (h(Fragment, null, this.getItems().map((item) => {
       return (h("vega-dropdown-item", { key: item.key, itemKey: item.key }, this.translationSlimmer.t(item.label)));
     })));
   }
+  getItems() {
+    return ImageToolbarButtonSlimmer.allItems.filter((item) => {
+      if (item.key === 'upload') {
+        return this.isImageUploadEnabled();
+      }
+      else {
+        return this.isImageURLInsertionEnabled();
+      }
+    });
+  }
   renderUploadInput() {
     return (h("input", { type: "file", style: { display: 'none' }, ref: (node) => (this.uploadInputRef = node), accept: "image/*", onChange: this.fileInputChange }));
   }
@@ -1135,6 +1177,18 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
   addModalInsertObserver(buttonRef) {
     DomNodeSubjectObserverFactory.addUniqueObserverToNode(buttonRef, VegaClick, this.insertURLImage);
   }
+  getImageExtensionConfig() {
+    return VegaRTEImageExtension.configStore.get(this.host) || {};
+  }
+  isImageUploadEnabled() {
+    return this.getImageExtensionConfig().enableImageUpload !== false;
+  }
+  isImageURLInsertionEnabled() {
+    return this.getImageExtensionConfig().enableImageURLInsertion !== false;
+  }
+  shouldRenderDropdown() {
+    return this.getItems().length > 1;
+  }
   /**
    * The below method is e2e-test covered in
    * @see{module:should-update-url-properly-when-upload-images}
@@ -1167,7 +1221,7 @@ class ImageToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
 (() => {
   VegaInternalIconManager.register({ image: image });
 })();
-ImageToolbarButtonSlimmer.items = [
+ImageToolbarButtonSlimmer.allItems = [
   {
     key: 'upload',
     label: 'Upload from computer',
@@ -1379,7 +1433,7 @@ class BulletsNumbersToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer
     }
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", ref: (ref) => (this.popoverRef = ref) },
+    return (h("vega-popover", { showArrow: false, trigger: "click", placement: "bottom", alignment: "center", isScreenPosition: true, ref: (ref) => (this.popoverRef = ref) },
       h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
       h("div", { slot: "popover" }, this.renderContent())));
   }
@@ -1646,7 +1700,7 @@ class HorizontalAlignmentToolbarButtonSlimmer extends VisualModeToolbarButtonSli
     }
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-popover", { trigger: "click", showArrow: false, alignment: "center", placement: "bottom", ref: (ref) => (this.popoverRef = ref) },
+    return (h("vega-popover", { trigger: "click", showArrow: false, alignment: "center", placement: "bottom", isScreenPosition: true, ref: (ref) => (this.popoverRef = ref) },
       h("div", { slot: "popover-content" }, renderBtn({ showArrowIcon: true })),
       h("div", { slot: "popover" }, this.renderContent())));
   }
@@ -1893,7 +1947,7 @@ class BaseHandler {
    * @returns {boolean} boolean result
    */
   isEmptyParagraph(node) {
-    return node && node.childNodes && node.childNodes.length === 0;
+    return node && node.nodeType === Node.ELEMENT_NODE && node.childNodes && node.childNodes.length === 0;
   }
   /**
    * Removes selected nodes within a range in a rich text editor content.
@@ -2254,7 +2308,7 @@ class InsertLineBreakHandler extends BaseHandler {
   getNextRTENode(lineBreakNode) {
     const index = lineBreakNode.parent.children.indexOf(lineBreakNode);
     const nextNode = lineBreakNode.parent.children[index + 1];
-    return nextNode || lineBreakNode;
+    return nextNode && nextNode.isContentEditable() ? nextNode : lineBreakNode;
   }
 }
 
@@ -2534,6 +2588,7 @@ class PasteContentAction extends ModifyContentAction {
   constructor(blocksToBeInserted, startNode, startOffset, rteRange) {
     super();
     this.type = ModifyContentActionType.PASTE_CONTENT;
+    this.futureFocusAtEnd = false;
     this.blocksToBeInserted = blocksToBeInserted;
     this.startNode = startNode;
     this.startOffset = startOffset;
@@ -2551,18 +2606,107 @@ class InsertPasteHandler extends BaseHandler {
    * @param {InputEvent} event - Paste event.
    */
   handleEvent(event) {
+    const currentRange = this.selectionController.getCurrentRange();
+    const payload = this.getPastePayload(event);
+    if (this.insertPlainTextInline(payload, currentRange)) {
+      return;
+    }
     const blocks = this.parsePastedElements(event);
-    const { startContainer } = this.selectionController.getCurrentRange();
-    if (this.isRootContainer(startContainer)) {
+    const startContainer = (currentRange === null || currentRange === void 0 ? void 0 : currentRange.startContainer) || undefined;
+    if (!startContainer) {
+      // When the selection/range is unavailable (e.g. the caret was lost while
+      // the paste-mode chooser had focus), still append the pasted content to
+      // the root so the paste is never silently dropped.
+      this.insertBlocksToRoot(blocks);
+    }
+    else if (this.isRootContainer(startContainer)) {
       this.insertBlocksToRoot(blocks);
       // TODO: Need to check below logic, it seems not correct https://gethired.atlassian.net/browse/VD-7779
     }
     else if (this.isEmptyParagraph(startContainer)) {
-      this.insertBlocksBeforeEmptyBlock(blocks);
+      this.insertBlocksBeforeEmptyBlock(blocks, currentRange);
     }
     else {
-      this.insertBlocksToContent(blocks);
+      this.insertBlocksToContent(blocks, currentRange);
+    }
+  }
+  /**
+   * Inserts plain-text paste content into the current text node at caret position.
+   *
+   * @param {RTEPastePayload} payload - Clipboard payload.
+   * @param {RTERange} currentRange - Current selection range.
+   * @returns {boolean} True when inline insertion is handled.
+   */
+  insertPlainTextInline(payload, currentRange) {
+    var _a, _b;
+    const selectedNodes = ((_b = (_a = this.selectionController).getSelectedNodes) === null || _b === void 0 ? void 0 : _b.call(_a)) || [];
+    if (!this.shouldPasteAsInlinePlainText(payload, currentRange, selectedNodes)) {
+      return false;
+    }
+    const text = payload.text.replace(/\r\n?/g, '\n');
+    const cursorNode = selectedNodes.find((node) => node instanceof RTETextNode) || currentRange.startNode;
+    if (!(cursorNode instanceof RTETextNode)) {
+      return false;
+    }
+    cursorNode.apply(new ReplaceSelectedTextAction(text, currentRange));
+    this.selectionController.enqueueSelectionRangeFutureState(cursorNode, currentRange.startOffset + text.length);
+    return true;
+  }
+  /**
+   * Determines whether the payload should be inserted as inline plain text.
+   *
+   * @param {RTEPastePayload} payload - Clipboard payload.
+   * @param {RTERange} currentRange - Current selection range.
+   * @param {RTENode[]} selectedNodes - Currently selected nodes.
+   * @returns {boolean} True when inline plain-text insertion should be used.
+   */
+  shouldPasteAsInlinePlainText(payload, currentRange, selectedNodes = []) {
+    if (!currentRange || !currentRange.startContainer) {
+      return false;
+    }
+    if (this.isRootContainer(currentRange.startContainer)) {
+      return false;
+    }
+    const text = (payload.text || '').replace(/\r\n?/g, '\n');
+    if (!text) {
+      return false;
+    }
+    const html = payload.html || '';
+    if (!html) {
+      return true;
+    }
+    const hasTextNodeSelection = selectedNodes.some((node) => node instanceof RTETextNode) ||
+      currentRange.startNode instanceof RTETextNode;
+    if (!hasTextNodeSelection) {
+      return false;
     }
+    // Use the inline plain‑text path only when HTML and plain text match exactly and no formatting exists;
+    // otherwise route through the block path to preserve styles.
+    const analysis = this.analyzeHtmlContent(html);
+    return analysis.plainText === text && !analysis.hasFormatting;
+  }
+  /**
+   * Analyzes HTML content to extract plain text and detect inline formatting,
+   * parsing the HTML once to avoid redundant StylePreservation and DOMParser calls.
+   *
+   * @param {string} html - Clipboard text/html payload.
+   * @returns {HtmlAnalysisResult} Analysis result with plainText and hasFormatting properties.
+   */
+  analyzeHtmlContent(html) {
+    const safeHtml = StylePreservator.preserve(html).getProcessedHtml();
+    const parsedDoc = new DOMParser().parseFromString(safeHtml, 'text/html');
+    const body = parsedDoc.body;
+    // Extract plain text from the parsed document
+    const plainText = (body.textContent || '').replace(/\r\n?/g, '\n');
+    // Check for rich inline formatting
+    let hasFormatting = Boolean(body.querySelector('b,strong,i,em,s,del,strike,u,mark'));
+    if (!hasFormatting) {
+      hasFormatting = Array.from(body.querySelectorAll('span')).some((span) => {
+        const style = span.getAttribute('style') || span.getAttribute('data-style') || '';
+        return this.styleContainsRichFormatting(style);
+      });
+    }
+    return { plainText, hasFormatting };
   }
   /**
    * Insert the blocks to root
@@ -2573,37 +2717,54 @@ class InsertPasteHandler extends BaseHandler {
     this.currentState.apply(new AppendChildrenAction(blocks));
   }
   /**
-   * Insert the blocks to content
+   * Insert the blocks into the current content block at the specified range.
    *
    * @param { RTEContentBlock[]} blocks - blocks
+   * @param { RTERange } rteRange - rteRange
    */
-  insertBlocksToContent(blocks) {
-    const cursorNode = this.removeSelectionRange();
+  insertBlocksToContent(blocks, rteRange) {
+    var _a;
+    const isCollapsedRange = rteRange.startNode === rteRange.endNode && rteRange.startOffset === rteRange.endOffset;
+    const cursorNode = isCollapsedRange
+      ? rteRange.startNode
+      : this.removeSelectionRange();
     if (cursorNode && cursorNode.parent) {
-      const { startOffset } = this.selectionController.getCurrentRange();
-      const pasteAction = new PasteContentAction(blocks, cursorNode, startOffset);
+      const pasteAction = new PasteContentAction(blocks, cursorNode, rteRange.startOffset, rteRange);
       cursorNode.parent.apply(pasteAction);
-      if (pasteAction.futureFocusBlock) {
-        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock);
+      if (pasteAction.futureFocusNode) {
+        this.selectionController.enqueueSelectionRangeFutureState(pasteAction.futureFocusNode, (_a = pasteAction.futureFocusNodeOffset) !== null && _a !== void 0 ? _a : 0);
+      }
+      else if (pasteAction.futureFocusBlock) {
+        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock, pasteAction.futureFocusAtEnd);
       }
     }
+    else {
+      // No resolvable cursor position: fall back to appending at the root so
+      // the pasted content is preserved instead of being discarded.
+      this.insertBlocksToRoot(blocks);
+    }
   }
   /**
    * Insert the blocks before to current block
    *
    * @param { RTEContentBlock[]} blocks - blocks
+   * @param { RTERange } rteRange - rteRange
    */
-  insertBlocksBeforeEmptyBlock(blocks) {
+  insertBlocksBeforeEmptyBlock(blocks, rteRange) {
     const cursorNode = this.removeSelectionRange();
-    /* istanbul ignore next */
     const currentBlock = cursorNode === null || cursorNode === void 0 ? void 0 : cursorNode.parent;
     if (currentBlock) {
-      const pasteAction = new PasteContentAction(blocks, currentBlock.children[0], 0, this.selectionController.getCurrentRange());
+      const pasteAction = new PasteContentAction(blocks, cursorNode, 0, rteRange);
       currentBlock.apply(pasteAction);
       if (pasteAction.futureFocusBlock) {
-        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock);
+        this.switchCaretPositionToNextElement(pasteAction.futureFocusBlock, pasteAction.futureFocusAtEnd);
       }
     }
+    else {
+      // No resolvable empty block: fall back to appending at the root so the
+      // pasted content is preserved instead of being discarded.
+      this.insertBlocksToRoot(blocks);
+    }
   }
   /**
    * Format and parse elements from user paste with simple style preservation.
@@ -2612,30 +2773,76 @@ class InsertPasteHandler extends BaseHandler {
    * @returns {RTEContentBlock[]} - RTEContentBlock.
    */
   parsePastedElements(event) {
-    let pastedHTML = event.dataTransfer.getData('text/html');
+    const payload = this.getPastePayload(event);
+    let pastedHTML = payload.html || '';
     if (!pastedHTML) {
-      const pastedText = event.dataTransfer.getData('text/plain');
-      pastedHTML = this.parsePlainText(pastedText);
+      pastedHTML = this.parsePlainText(payload.text || '');
+    }
+    else if (this.shouldTreatAsPlainTextPayload(pastedHTML)) {
+      const plainSource = payload.text || this.extractPlainTextFromHtml(pastedHTML);
+      pastedHTML = this.parsePlainText(plainSource);
     }
     const context = StylePreservator.preserve(pastedHTML);
     const safeHtml = context.getProcessedHtml();
     const parser = new DOMParser();
     const parsedDoc = parser.parseFromString(safeHtml, 'text/html');
+    const rootElements = Array.from(parsedDoc.body.childNodes);
+    context.restore(rootElements);
+    this.normalizeImportedHtmlArtifacts(parsedDoc.body);
     const htmlElements = Array.from(parsedDoc.body.childNodes);
-    context.restore(htmlElements);
-    return ElementToDtoStrategyProcessor.process(htmlElements)
+    const resultBlocks = ElementToDtoStrategyProcessor.process(htmlElements)
       .filter(Boolean)
       .map((output) => output.toDto())
       .filter(Boolean);
+    // Fallback for synthetic payloads: if strategy conversion yields no blocks
+    // but we still have plain text, create paragraph/text blocks directly.
+    if (resultBlocks.length === 0 && (payload.text || '').trim() !== '') {
+      return this.buildPlainTextFallbackBlocks(payload.text);
+    }
+    return resultBlocks;
   }
   /**
-   * Moves the caret to the next block element in a rich text editor.
+   * Extracts readable plain text from clipboard HTML.
    *
-   * @param {RTEBlock} newBlock - Represents a new create block element in a rich text editor.
+   * @param {string} html - Clipboard text/html payload.
+   * @returns {string} - Plain text extracted from HTML.
    */
-  switchCaretPositionToNextElement(newBlock) {
+  extractPlainTextFromHtml(html) {
+    // Preserve inline styles before parsing to avoid style-src-attr CSP violations.
+    const safeHtml = StylePreservator.preserve(html).getProcessedHtml();
+    const parsedDoc = new DOMParser().parseFromString(safeHtml, 'text/html');
+    return (parsedDoc.body.textContent || '').replace(/\r\n?/g, '\n');
+  }
+  /**
+   * Builds plain-text paragraph blocks when element strategy parsing returns no output.
+   *
+   * @param {string} text - Plain text clipboard content.
+   * @returns {RTEContentBlock[]} Fallback text blocks.
+   */
+  buildPlainTextFallbackBlocks(text) {
+    return text.split('\n').map((line) => {
+      const paragraph = new RTETextBlock(generateUUID(), 'paragraph');
+      const textNode = new RTETextNode(`${paragraph.id}1`, line, paragraph);
+      paragraph.apply(new AppendChildrenAction([textNode]));
+      return paragraph;
+    });
+  }
+  /**
+   * Moves the caret to a block element in a rich text editor after paste.
+   *
+   * @param {RTEBlock} newBlock - Block element to move the caret to.
+   * @param {boolean} atEnd - When true, places the caret after the last character of the block's last node; otherwise at offset 0 of the first node.
+   */
+  switchCaretPositionToNextElement(newBlock, atEnd = false) {
+    var _a, _b;
     if (newBlock && newBlock.children) {
-      this.selectionController.enqueueSelectionRangeFutureState(newBlock.children[0], 0);
+      if (atEnd) {
+        const lastNode = newBlock.children[newBlock.children.length - 1];
+        this.selectionController.enqueueSelectionRangeFutureState(lastNode, (_b = (_a = lastNode.text) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
+      }
+      else {
+        this.selectionController.enqueueSelectionRangeFutureState(newBlock.children[0], 0);
+      }
     }
   }
   /**
@@ -2645,16 +2852,217 @@ class InsertPasteHandler extends BaseHandler {
    * @returns {string} - The formatted HTML string.
    */
   parsePlainText(content) {
+    if (this.shouldRenderAsCodeBlock(content)) {
+      return `<pre><code>${escapeHtml(content)}</code></pre>`;
+    }
     const lines = content.split('\n');
     return lines
       .map((line) => {
       if (line === '') {
         return '<p>\n</p>';
       }
-      return `<p>${line}</p>`;
+      return `<p>${escapeHtml(line)}</p>`;
     })
       .join('');
   }
+  /**
+   * Detects whether plain text likely represents source code.
+   *
+   * @param {string} content - Clipboard plain text content.
+   * @returns {boolean} True when the content should render as a code block.
+   */
+  shouldRenderAsCodeBlock(content) {
+    const normalized = content.replace(/\r\n?/g, '\n').trim();
+    if (!normalized) {
+      return false;
+    }
+    const hasMultipleLines = normalized.includes('\n');
+    const hasHtmlLikeTag = /<\/?[a-z][\w:-]*[^>]*>/i.test(normalized);
+    const hasCodeFence = normalized.startsWith('```') && normalized.endsWith('```');
+    const hasProgrammingTokens = /[{};]|=>|\b(function|const|let|var|class|import|export|return)\b/.test(normalized);
+    if (hasCodeFence) {
+      return true;
+    }
+    return hasHtmlLikeTag || (hasMultipleLines && hasProgrammingTokens);
+  }
+  /**
+   * Removes pasted website artifacts that can cause visual regressions in the editor,
+   * such as heading anchor tooltips and empty wrappers.
+   *
+   * @param {HTMLElement} body - Parsed clipboard html body.
+   */
+  normalizeImportedHtmlArtifacts(body) {
+    this.removeHeadingArtifacts(body);
+    this.removeEmptyBlocks(body);
+  }
+  /**
+   * Removes heading copy-link/tooltip artifacts copied from documentation pages.
+   *
+   * @param {HTMLElement} body - Parsed clipboard html body.
+   */
+  removeHeadingArtifacts(body) {
+    const selectors = [
+      'a.js-heading-link',
+      'a.c-heading-link',
+      '.js-tooltip-popover',
+      '.c-tooltip-popover',
+      '[role="tooltip"]',
+    ];
+    body.querySelectorAll(selectors.join(',')).forEach((element) => element.remove());
+  }
+  /**
+   * Removes empty block wrappers introduced by web copy/paste.
+   *
+   * @param {HTMLElement} body - Parsed clipboard html body.
+   */
+  removeEmptyBlocks(body) {
+    const blockSelectors = ['p', 'div', 'section', 'article'];
+    body.querySelectorAll(blockSelectors.join(',')).forEach((element) => {
+      if (this.isEmptyVisualBlock(element)) {
+        element.remove();
+      }
+    });
+  }
+  /**
+   * Checks whether a block is visually empty and safe to remove.
+   *
+   * @param {HTMLElement} element - Block element to inspect.
+   * @returns {boolean} True when the block has no visible content.
+   */
+  isEmptyVisualBlock(element) {
+    if (element.tagName === 'DIV' && element.classList.contains('doc')) {
+      return false;
+    }
+    const hasVisualChild = Boolean(element.querySelector('img,video,audio,iframe,canvas,svg,table,hr,pre,code,blockquote'));
+    if (hasVisualChild) {
+      return false;
+    }
+    return (element.textContent || '').trim() === '';
+  }
+  /**
+   * Checks whether a text/html payload is effectively plain text.
+   *
+   * Some sources (e.g. terminals, code editors) place the copied text inside an
+   * off-screen / visually hidden wrapper such as
+   * `<pre><div style="position: absolute; left: -9999px;">text</div></pre>`.
+   * Preserving that markup as rich content would render the pasted text
+   * off-screen (appearing empty), so such payloads are treated as plain text.
+   *
+   * @param {string} html - Clipboard text/html payload.
+   * @returns {boolean} True when the payload has no visible rich content.
+   */
+  shouldTreatAsPlainTextPayload(html) {
+    // Preserve inline styles before parsing to avoid style-src-attr CSP violations
+    // triggered by DOMParser processing HTML with style= attributes.
+    const safeHtml = StylePreservator.preserve(html).getProcessedHtml();
+    const parsedDoc = new DOMParser().parseFromString(safeHtml, 'text/html');
+    const body = parsedDoc.body;
+    if (body.children.length === 0) {
+      return true;
+    }
+    const visibleClone = body.cloneNode(true);
+    visibleClone.querySelectorAll('[style],[data-style]').forEach((element) => {
+      if (this.isVisuallyHiddenElement(element)) {
+        element.remove();
+      }
+    });
+    if ((visibleClone.textContent || '').trim() !== '') {
+      return false;
+    }
+    const hasVisibleMedia = Boolean(visibleClone.querySelector('img,video,audio,iframe,table,svg,canvas,math,object,embed'));
+    if (hasVisibleMedia) {
+      return false;
+    }
+    // If no visible text/media remains but original HTML contained text, it was
+    // likely wrapped in hidden/off-screen containers and should be treated as plain text.
+    return (body.textContent || '').trim() !== '';
+  }
+  /**
+   * Returns true when a CSS style string contains bold, italic, underline,
+   * strikethrough, or color declarations.
+   *
+   * @param {string} style - Inline CSS style string.
+   * @returns {boolean} True when the style contains rich formatting.
+   */
+  styleContainsRichFormatting(style) {
+    if (!style.trim()) {
+      return false;
+    }
+    for (const declaration of style.split(';')) {
+      const colonIndex = declaration.indexOf(':');
+      if (colonIndex === -1) {
+        continue;
+      }
+      const prop = declaration.slice(0, colonIndex).trim().toLowerCase();
+      const value = declaration
+        .slice(colonIndex + 1)
+        .trim()
+        .toLowerCase();
+      switch (prop) {
+        case 'font-weight':
+          if (/bold|[5-9]\d{2}|1000/.test(value)) {
+            return true;
+          }
+          break;
+        case 'font-style':
+          if (/italic|oblique/.test(value)) {
+            return true;
+          }
+          break;
+        case 'text-decoration':
+        case 'text-decoration-line':
+          if (/underline|line-through/.test(value)) {
+            return true;
+          }
+          break;
+        case 'color':
+        case 'background-color':
+          return true;
+      }
+    }
+    return false;
+  }
+  /**
+   * Determines whether an element is visually hidden or rendered off-screen
+   * via its inline style, indicating a clipboard plain-text wrapper.
+   *
+   * @param {HTMLElement} element - Element to inspect.
+   * @returns {boolean} True when the element is hidden or off-screen.
+   */
+  isVisuallyHiddenElement(element) {
+    const style = (element.getAttribute('style') ||
+      element.getAttribute('data-style') ||
+      '').toLowerCase();
+    if (!style) {
+      return false;
+    }
+    if (/display\s*:\s*none/.test(style) || /visibility\s*:\s*hidden/.test(style)) {
+      return true;
+    }
+    if (/clip\s*:\s*rect\(\s*0/.test(style) || style.includes('clip-path')) {
+      return true;
+    }
+    const isPositioned = /position\s*:\s*(absolute|fixed)/.test(style);
+    const isOffScreen = /(left|top|right|bottom)\s*:\s*-\d{3,}px/.test(style);
+    return isPositioned && isOffScreen;
+  }
+  /**
+   * Resolves paste payload from DataTransfer and synthetic-event fallback payload.
+   *
+   * @param {InputEvent} event - Paste event.
+   * @returns {RTEPastePayload} - Paste payload.
+   */
+  getPastePayload(event) {
+    const eventPayload = event
+      .rtePastePayload || { html: '', text: '' };
+    if (!event.dataTransfer) {
+      return eventPayload;
+    }
+    return {
+      html: event.dataTransfer.getData('text/html') || eventPayload.html || '',
+      text: event.dataTransfer.getData('text/plain') || eventPayload.text || '',
+    };
+  }
 }
 
 var __decorate$i = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -3663,7 +4071,7 @@ __decorate$c([
 ], CodeBlockToolbarButtonSlimmer.prototype, "value", void 0);
 
 const undoIcon = {
-  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M464 424c0 13.3 10.7 24 24 24s24-10.7 24-24l0-96c0-53-43-96-96-96l-334.1 0 95-95c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239c-4.5 4.5-7 10.6-7 17s2.5 12.5 7 17L143 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-95-95 334.1 0c26.5 0 48 21.5 48 48l0 96z"/></svg>`,
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M464 424c0 13.3 10.7 24 24 24s24-10.7 24-24l0-96c0-53-43-96-96-96l-334.1 0 95-95c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0L7 239c-4.5 4.5-7 10.6-7 17s2.5 12.5 7 17L143 409c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-95-95 334.1 0c26.5 0 48 21.5 48 48l0 96z"/></svg>`,
 };
 
 var __decorate$b = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -3700,7 +4108,7 @@ __decorate$b([
 ], UndoToolbarButtonSlimmer.prototype, "historyController", void 0);
 
 const redoIcon = {
-  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M48 424c0 13.3-10.7 24-24 24S0 437.3 0 424l0-96c0-53 43-96 96-96l334.1 0-95-95c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L505 239c4.5 4.5 7 10.6 7 17s-2.5 12.5-7 17L369 409c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l95-95-334.1 0c-26.5 0-48 21.5-48 48l0 96z"/></svg>`,
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 7.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2026 Fonticons, Inc. --><path fill="currentColor" d="M48 424c0 13.3-10.7 24-24 24S0 437.3 0 424l0-96c0-53 43-96 96-96l334.1 0-95-95c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0L505 239c4.5 4.5 7 10.6 7 17s-2.5 12.5-7 17L369 409c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l95-95-334.1 0c-26.5 0-48 21.5-48 48l0 96z"/></svg>`,
 };
 
 var __decorate$a = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
@@ -3977,6 +4385,7 @@ class RTEExtensionController extends VegaSlimmer {
     return {
       host: this.host,
       flushValue: this.flushValue,
+      forceUpdate: forceUpdate,
       isSourceEditMode: this.isSourceEditMode,
       getSelectedNodes: this.getSelectedNodes,
       setSelectedNodes: this.selectionController.setSelectedNodes.bind(this.selectionController),
@@ -4239,7 +4648,7 @@ class VegaRichTextEditorSourceViewRenderer extends VegaSlimmer {
   render() {
     if (!this.allowSourceEdit)
       return;
-    const sourceCode = this.getSourceTemplate();
+    const sourceCode = this.normalizeSourceCodeForEditing(this.getSourceTemplate());
     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;
@@ -4260,6 +4669,24 @@ class VegaRichTextEditorSourceViewRenderer extends VegaSlimmer {
   getSourceTemplate() {
     return this.value.toHtml({ filterInlineStyles: this.sourceEditConfig.filterInlineStyles });
   }
+  /**
+   * Normalize source HTML for source-mode editing.
+   *
+   * `vega-code-block` renders code as HTML and will decode quote entities, so
+   * convert quote entities inside style attributes to single quotes before entering
+   * source mode. This preserves valid HTML when switching back to normal mode.
+   */
+  normalizeSourceCodeForEditing(html) {
+    return html.replace(/style="([\s\S]*?)"/gi, (_match, styleValue) => {
+      const normalizedStyleValue = styleValue
+        .replace(/&amp;|&#38;|&#x26;/gi, '&')
+        .replace(/&lt;|&#60;|&#x3c;/gi, '<')
+        .replace(/&gt;|&#62;|&#x3e;/gi, '>')
+        .replace(/&quot;|&#34;|&#x22;/gi, "'")
+        .replace(/&apos;|&#39;|&#x27;/gi, "'");
+      return `style="${normalizedStyleValue}"`;
+    });
+  }
 }
 __decorate$7([
   MapToComponentField()
@@ -4705,13 +5132,14 @@ class VegaRichTextEditorToolbarButtonRenderer extends VegaSlimmer {
       }, onClick: this.handleClick, disabled: this.disabled, hidden: this.hidden },
       h("vega-flex", { gap: "size-8", justifyContent: "center", alignItems: "center" },
         this.icon && (h("vega-icon", { size: "size-16", color: this.iconColor, icon: VegaInternalIconManager.getIconKey(this.icon) })),
-        this.showArrowIcon && (h("vega-icon", { size: "size-8", color: "text-secondary", icon: VegaInternalIconManager.getIconKey('chevron-down') }))),
+        this.showArrowIcon && (h("vega-icon", { size: "size-8", color: "text-secondary", icon: VegaInternalIconManager.getIconKey(this.arrowIcon || 'chevron-down') }))),
       h("slot", null)));
   }
 }
 (() => {
   VegaInternalIconManager.register({
     'chevron-down': chevronDown,
+    'chevron-up': chevronUp,
   });
 })();
 __decorate$5([
@@ -4726,6 +5154,9 @@ __decorate$5([
 __decorate$5([
   MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "showArrowIcon", void 0);
+__decorate$5([
+  MapToComponentField()
+], VegaRichTextEditorToolbarButtonRenderer.prototype, "arrowIcon", void 0);
 __decorate$5([
   MapToComponentField()
 ], VegaRichTextEditorToolbarButtonRenderer.prototype, "icon", void 0);
@@ -4789,6 +5220,12 @@ const VegaRichTextEditorToolbarButton = class {
      * @vegaVersion 2.34.0
      */
     this.showArrowIcon = false;
+    /**
+     * Specifies the arrow icon name when `showArrowIcon` is enabled.
+     *
+     * @vegaVersion 2.93.0
+     */
+    this.arrowIcon = 'chevron-down';
     /**
      * Specifies whether the toolbar button in the rich text editor is represented by an icon.
      *
@@ -5067,7 +5504,7 @@ class VegaRichTextLinkEditorRenderer extends VegaSlimmer {
     return this.popoverRef;
   }
   render() {
-    return (h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, ref: (ref) => {
+    return (h("vega-popover", { trigger: "click", alignment: "start", placement: "bottom", showArrow: false, isScreenPosition: true, ref: (ref) => {
         this.popoverRef = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
           var _a, _b, _c;