@globalpayments/vega 2.93.0 → 2.95.0

package/dist/collection/helpers/backdrop/shared-backdrop-manager.js

@@ -0,0 +1,194 @@
+var __decorate = (this && this.__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;
+};
+import { MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
+import { tryGetDocument } from '../../utils/try-get-document';
+/**
+ * Abstract base slimmer with shared backdrop state.
+ */
+export class SharedBackdropManager extends VegaSlimmer {
+  /**
+   * Register this consumer and ensure a shared backdrop exists.
+   */
+  connectedCallback() {
+    const managerClass = this.constructor;
+    this.resetStaleSharedState();
+    if (!managerClass.consumers.has(this)) {
+      managerClass.consumers.add(this);
+      managerClass.visibilityIntents.set(this, false);
+      managerClass.consumerCount++;
+    }
+    if (!this.usesLazyBackdrop()) {
+      this.ensureBackdrop();
+    }
+  }
+  /**
+   * Unregister this consumer and remove shared backdrop when last consumer disconnects.
+   */
+  disconnectedCallback() {
+    var _a;
+    const managerClass = this.constructor;
+    const hasConsumer = managerClass.consumers.has(this);
+    const hadVisibilityIntent = (_a = managerClass.visibilityIntents.get(this)) !== null && _a !== void 0 ? _a : false;
+    managerClass.consumers.delete(this);
+    managerClass.visibilityIntents.delete(this);
+    if (hasConsumer && managerClass.consumerCount > 0) {
+      managerClass.consumerCount--;
+    }
+    if (hadVisibilityIntent && managerClass.visibilityIntentCount > 0) {
+      managerClass.visibilityIntentCount--;
+      this.syncVisibility();
+    }
+    if (managerClass.consumerCount === 0) {
+      this.removeBackdrop();
+    }
+  }
+  /**
+   * Get current backdrop element.
+   *
+   * @returns {Nullable<HTMLVegaBackdropElement>} Backdrop element or null.
+   */
+  getBackdrop() {
+    const managerClass = this.constructor;
+    return managerClass.backdropRef;
+  }
+  /**
+   * Get current connected consumer count.
+   *
+   * @returns {number} Consumer count.
+   */
+  getConsumerCount() {
+    const managerClass = this.constructor;
+    return managerClass.consumerCount;
+  }
+  /**
+   * Clear all shared state and remove backdrop.
+   */
+  clear() {
+    const managerClass = this.constructor;
+    this.removeBackdrop();
+    managerClass.consumerCount = 0;
+    managerClass.visibilityIntentCount = 0;
+  }
+  /**
+   * Set visibility intent for this slimmer consumer.
+   *
+   * @param {boolean} visible - Desired visibility.
+   */
+  setVisibilityIntent(visible) {
+    var _a;
+    const managerClass = this.constructor;
+    const currentIntent = (_a = managerClass.visibilityIntents.get(this)) !== null && _a !== void 0 ? _a : false;
+    if (currentIntent !== visible) {
+      managerClass.visibilityIntents.set(this, visible);
+      if (visible) {
+        managerClass.visibilityIntentCount++;
+      }
+      else {
+        managerClass.visibilityIntentCount--;
+      }
+      this.syncVisibility();
+    }
+  }
+  /**
+   * Whether this manager type handles backdrop existence lazily (on demand).
+   * Override and return `true` in derived classes that create/remove the backdrop
+   * per visibility cycle instead of at connectedCallback.
+   *
+   * @returns {boolean} False by default — backdrop is created eagerly at connect time.
+   */
+  usesLazyBackdrop() {
+    return false;
+  }
+  /**
+   * Ensure a backdrop exists for this subclass and return it.
+   *
+   * @returns {HTMLVegaBackdropElement} Shared backdrop element.
+   */
+  ensureBackdrop() {
+    const managerClass = this.constructor;
+    const doc = tryGetDocument();
+    if (!(doc === null || doc === void 0 ? void 0 : doc.body)) {
+      throw new Error('SharedBackdropManager requires a browser document.');
+    }
+    this.resetStaleSharedState();
+    if (managerClass.backdropRef && doc.body.contains(managerClass.backdropRef)) {
+      return managerClass.backdropRef;
+    }
+    const backdrop = this.createBackdrop(doc);
+    managerClass.backdropRef = backdrop;
+    return backdrop;
+  }
+  /**
+   * Remove the shared backdrop for this subclass from the DOM.
+   */
+  removeBackdrop() {
+    var _a;
+    const managerClass = this.constructor;
+    if ((_a = managerClass.backdropRef) === null || _a === void 0 ? void 0 : _a.isConnected) {
+      managerClass.backdropRef.remove();
+    }
+    managerClass.backdropRef = null;
+  }
+  /**
+   * Sync shared backdrop `visible` based on current visibility intents.
+   */
+  syncVisibility() {
+    const managerClass = this.constructor;
+    const shouldShow = managerClass.visibilityIntentCount > 0;
+    if (this.usesLazyBackdrop()) {
+      this.syncLazyBackdrop(shouldShow);
+      return;
+    }
+    if (managerClass.backdropRef) {
+      managerClass.backdropRef.visible = shouldShow;
+    }
+  }
+  /**
+   * Handles visibility sync for manager types that opt into lazy backdrop lifecycle.
+   * When `shouldShow` is true the backdrop is created (if needed) and made visible.
+   * When `shouldShow` is false the backdrop is removed from the DOM.
+   *
+   * @param {boolean} shouldShow - Whether the backdrop should be visible.
+   */
+  syncLazyBackdrop(shouldShow) {
+    if (!shouldShow) {
+      this.removeBackdrop();
+      return;
+    }
+    const backdrop = this.ensureBackdrop();
+    backdrop.visible = true;
+  }
+  /**
+   * Reset stale static shared state when the tracked backdrop is no longer in the DOM.
+   */
+  resetStaleSharedState() {
+    const managerClass = this.constructor;
+    const doc = tryGetDocument();
+    if (!(doc === null || doc === void 0 ? void 0 : doc.body)) {
+      managerClass.backdropRef = null;
+      managerClass.consumerCount = 0;
+      managerClass.visibilityIntentCount = 0;
+      return;
+    }
+    if (managerClass.backdropRef && !doc.body.contains(managerClass.backdropRef)) {
+      managerClass.backdropRef = null;
+      managerClass.consumerCount = 0;
+      managerClass.visibilityIntentCount = 0;
+    }
+  }
+}
+SharedBackdropManager.backdropRef = null;
+SharedBackdropManager.consumers = new WeakSet();
+SharedBackdropManager.visibilityIntents = new WeakMap();
+SharedBackdropManager.consumerCount = 0;
+SharedBackdropManager.visibilityIntentCount = 0;
+__decorate([
+  MapToComponentMethod('connectedCallback')
+], SharedBackdropManager.prototype, "connectedCallback", null);
+__decorate([
+  MapToComponentMethod('disconnectedCallback')
+], SharedBackdropManager.prototype, "disconnectedCallback", null);

package/dist/collection/helpers/event-manager/event-id/component-event-id-map.js

@@ -1,4 +1,4 @@
-import { VegaExpand, VegaAdditionalLinkClick, VegaClick, VegaDropdownClick, VegaReset, VegaDropdownSearch, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaDateClick, VegaEventEdit, VegaPageUpdate, VegaUserChange, VegaRemove, VegaCreate, VegaSearch, VegaMonthYearChange, VegaClear, VegaSelectionChange, VegaTodayClick, VegaDropdownShow, VegaDropdownHide, VegaDropdownSelectAllClick, VegaSearchTrigger, VegaLabelButtonClick, VegaSelectFileChange, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaNativeInputChange, VegaFocus, VegaBlur, VegaSuggestionItemClick, VegaPaste, VegaComplete, VegaCountryChange, VegaShow, VegaHide, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaImageInserted, VegaSourceCodeChange, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowDragDrop, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
+import { VegaExpand, VegaAdditionalLinkClick, VegaClick, VegaDropdownClick, VegaReset, VegaDropdownSearch, VegaClose, VegaActionButtonClick, VegaChange, VegaEventClick, VegaDateDblClick, VegaMoreActionClick, VegaDateClick, VegaEventEdit, VegaPageUpdate, VegaUserChange, VegaRemove, VegaCreate, VegaSearch, VegaDropdownSelectAllClick, VegaMonthYearChange, VegaClear, VegaSelectionChange, VegaTodayClick, VegaDropdownShow, VegaDropdownHide, VegaSearchTrigger, VegaLabelButtonClick, VegaSelectFileChange, VegaRetry, VegaPreview, VegaFormSubmit, VegaFormReset, VegaValidate, VegaCancel, VegaNativeInputChange, VegaFocus, VegaBlur, VegaSuggestionItemClick, VegaPaste, VegaComplete, VegaCountryChange, VegaShow, VegaHide, VegaToggleStatus, VegaOpen, VegaStateUpdate, VegaGroupClick, VegaMenuClick, VegaActionClick, VegaPageSizeChange, VegaPopoverShow, VegaPopoverHide, VegaCurrentStepUpdate, VegaImageInserted, VegaSourceCodeChange, VegaSelectChange, VegaSelectAllChange, VegaRowClick, VegaRowExpand, VegaRowDragDrop, VegaRowSelect, VegaRowSelectAll, } from './vega-event-id';
 const entries = [
   ['vega-accordion', [VegaExpand]],
   ['vega-app-footer', [VegaAdditionalLinkClick]],
@@ -22,7 +22,7 @@ const entries = [
   ['vega-color-picker', [VegaChange]],
   ['vega-color-swatch', [VegaClick]],
   ['vega-color-swatch-picker', [VegaChange]],
-  ['vega-combo-box', [VegaChange, VegaCreate, VegaSearch]],
+  ['vega-combo-box', [VegaChange, VegaCreate, VegaSearch, VegaDropdownSelectAllClick]],
   ['vega-date-picker', [VegaChange, VegaMonthYearChange]],
   ['vega-date-picker-calendar', [VegaClear, VegaMonthYearChange, VegaSelectionChange, VegaTodayClick]],
   [
@@ -62,7 +62,15 @@ const entries = [
   ['vega-input-range', [VegaChange]],
   [
     'vega-input-select',
-    [VegaChange, VegaSearch, VegaSearchTrigger, VegaShow, VegaHide, VegaLabelButtonClick],
+    [
+      VegaChange,
+      VegaSearch,
+      VegaSearchTrigger,
+      VegaShow,
+      VegaHide,
+      VegaLabelButtonClick,
+      VegaDropdownSelectAllClick,
+    ],
   ],
   ['vega-item-toggle', [VegaToggleStatus]],
   ['vega-modal', [VegaOpen, VegaClose]],

package/dist/collection/helpers/translation/locales/en.js

@@ -195,6 +195,8 @@ export const staticTranslations = {
   'Apply': 'Apply',
   'Enter color': 'Enter color',
   'Horizontal line': 'Horizontal line',
+  'Enter fullscreen mode': 'Enter fullscreen mode',
+  'Exit fullscreen mode': 'Exit fullscreen mode',
   'Block quote': 'Block quote',
   'Special Characters': 'Special Characters',
   'All': 'All',

package/dist/esm/{app-globals-9950d055.js → app-globals-eafcc7a1.js}

@@ -1,23 +1,23 @@
 import { F as FeatureFlag } from './feature-flag-controller-3fd04ea9.js';
-import { V as VegaLoader, a as VegaNotify, b as VegaEventManager, c as VegaZIndexManager, w as waitForVega, d as VegaSkeletonLoader, e as VegaTranslation, f as VegaRTETokenExtension, g as VegaRTELanguageExtension, h as VegaRTEDefaultLineHeightOptions, i as VegaRTEFunctionExtension, j as VegaRTETableExtension, k as VegaRTEHorizontalLineExtension, l as VegaRTEBlockquoteExtension, m as VegaRTESpecialCharactersExtension, n as VegaRTEFindReplaceExtension, o as VegaRTESpecialCharactersEssentials, p as VegaRTESpecialCharactersLatin, q as VegaRTESpecialCharactersMathematical, r as VegaRTESpecialCharactersArrows, s as VegaRTESpecialCharactersCurrency, t as VegaRTESpecialCharactersText, u as VegaRTELineHeightExtension, v as VegaRTEPasteExtension, x as VegaRTECopyExtension, y as VegaRTECutExtension, z as VegaCalendarPeriodFactory } from './token-extension-ecfafe94.js';
-import { V as VegaThemeManager } from './split-cell-operation-98d58410.js';
+import { V as VegaLoader, a as VegaNotify, b as VegaEventManager, c as VegaZIndexManager, w as waitForVega, d as VegaSkeletonLoader, e as VegaTranslation, f as VegaRTETokenExtension, g as VegaRTELanguageExtension, h as VegaRTEDefaultLineHeightOptions, i as VegaRTEFunctionExtension, j as VegaRTETableExtension, k as VegaRTEHorizontalLineExtension, l as VegaRTEBlockquoteExtension, m as VegaRTESpecialCharactersExtension, n as VegaRTEFindReplaceExtension, o as VegaRTESpecialCharactersEssentials, p as VegaRTESpecialCharactersLatin, q as VegaRTESpecialCharactersMathematical, r as VegaRTESpecialCharactersArrows, s as VegaRTESpecialCharactersCurrency, t as VegaRTESpecialCharactersText, u as VegaRTELineHeightExtension, v as VegaRTEPasteExtension, x as VegaRTEFullscreenExtension, y as VegaRTECopyExtension, z as VegaRTECutExtension, A as VegaCalendarPeriodFactory } from './token-extension-f5bf9c21.js';
+import { V as VegaThemeManager } from './split-cell-operation-359f8082.js';
 import { M as MapToComponentMethod, V as VegaSlimmer, s as setVegaLogLevel, G as GlobalSlimmersRegistry } from './global-slimmer-registry-17c4efd4.js';
 import { V as VegaDialog } from './vega-dialog-controller-726b74f9.js';
 import { T as TypographyUrls } from './typography-19c3b9be.js';
 import { V as VegaIconManager } from './icon-manager-4ef3f6dd.js';
-import { V as VegaInternalTranslation, s as staticTranslations } from './internal-translation-controller-09b8bd13.js';
-import { V as ValidCreditCardNumberRule } from './valid-credit-card-number-rule-52c6b029.js';
+import { V as VegaInternalTranslation, s as staticTranslations } from './internal-translation-controller-16709132.js';
+import { V as ValidCreditCardNumberRule } from './valid-credit-card-number-rule-ca5a47d6.js';
 import { v as vegaEnvManager } from './vega-env-manager-8f8dc473.js';
 import { U as UPDATE_TRANSLATION } from './static-subject-title-1c86e974.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { O as Observer } from './observer-3959f9dd.js';
 import { f as forceUpdate } from './index-090d31ca.js';
-import { V as VegaRTEContent } from './content-state-c3b85ae6.js';
+import { V as VegaRTEContent } from './content-state-8032467a.js';
 import { v as vegaNonceManager, s as setVegaNonce } from './vega-nonce-manager-497e5eb5.js';
-import { V as VegaRTEPresetToolbarItems } from './code-block-ae2337c2.js';
-import { V as VegaRTELinkExtension } from './link-extension-74eaa826.js';
-import './type-guard-2bfb2c7b.js';
-import { V as VegaRTEImageExtension } from './image-extension-7108c27d.js';
+import { V as VegaRTEPresetToolbarItems } from './code-block-e12588fe.js';
+import { V as VegaRTELinkExtension } from './link-extension-97fcb8fb.js';
+import './type-guard-ec5e8628.js';
+import { V as VegaRTEImageExtension } from './image-extension-b6c7e4a7.js';
 
 var __decorate$2 = (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;
@@ -409,6 +409,7 @@ function injectVegaRichTextEditorClassIntoGlobal() {
   globalThis.VegaRTELineHeightExtension = VegaRTELineHeightExtension;
   globalThis.VegaRTEPasteExtension = VegaRTEPasteExtension;
   globalThis.VegaRTELinkExtension = VegaRTELinkExtension;
+  globalThis.VegaRTEFullscreenExtension = VegaRTEFullscreenExtension;
   globalThis.VegaRTECopyExtension = VegaRTECopyExtension;
   globalThis.VegaRTECutExtension = VegaRTECutExtension;
   globalThis.VegaRTEImageExtension = VegaRTEImageExtension;
@@ -423,7 +424,7 @@ function injectVegaCalendarPeriodFactoryIntoGlobal() {
  * Inject VegaPublicValidationRules to global as a public api
  */
 function injectVegaPublicValidationRules() {
-  void import('./public-rules-5fce32a5.js').then((module) => {
+  void import('./public-rules-c06f0d2a.js').then((module) => {
     Object.entries(module).forEach(([name, value]) => {
       globalThis[name] = value;
     });

package/dist/esm/{child-nodes-event-prevent-slimmer-96c14f5a.js → child-nodes-event-prevent-slimmer-82626871.js}

@@ -1,5 +1,5 @@
 import { c as MapToComponentField, M as MapToComponentMethod, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { i as internalVegaEventManager, j as jqueryDelegatedStrategyController } from './internal-vega-event-manager-48690e5b.js';
+import { i as internalVegaEventManager, j as jqueryDelegatedStrategyController } from './internal-vega-event-manager-2ecc9186.js';
 import { v as vegaEnvManager } from './vega-env-manager-8f8dc473.js';
 import { F as FeatureFlag } from './feature-flag-controller-3fd04ea9.js';
 

package/dist/esm/{code-block-ae2337c2.js → code-block-e12588fe.js}

@@ -3,7 +3,7 @@ import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-
 import { e as VegaInternalRichTextEditorFlushChanges, f as VegaInternalRichTextEditorSelectionRangeChange } from './vega-internal-event-id-827eb1ce.js';
 import { d as dashCaseToCamel, c as camelToDashCase } from './string-a953eafc.js';
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
-import { i as isNonNullable } from './type-guard-2bfb2c7b.js';
+import { i as isNonNullable } from './type-guard-ec5e8628.js';
 import { T as TypographyUrls } from './typography-19c3b9be.js';
 import { g as generateUUID } from './misc-9fdbcfbb.js';
 import { V as VegaInternalThemeManager } from './dark-mode-style-controller-ca5afd2d.js';
@@ -165,25 +165,67 @@ class ModifyContentAction {
 /**
  * Creates a style map from the inline styles of an HTML element. This function extracts the 'style' attribute from the given element.
  *
+ * Manually parses the style string to handle complex CSS values that contain semicolons (e.g., data URLs),
+ * colons (e.g., https:// URLs), or commas (e.g., rgba, gradients). This approach avoids reliance on
+ * CSSStyleDeclaration's array-like behavior, which is inconsistent in Jest/JSDOM test environments.
+ *
  * @param {HTMLElement} element The HTML element from which to extract inline styles.
  * @returns {AnnotationStyle} An object representing the custom style annotations.
  */
 function createStyleMapFromElement(element) {
-  const customStyle = element.getAttribute('style');
-  if (!customStyle)
-    return {};
-  const styleValue = customStyle.split(';').filter(Boolean);
-  return styleValue
-    .filter((key) => key !== ' ')
-    .map((key) => {
-    // to remove redundant quote pairs if needed, for example: ['fontFamily: "Roboto Mono"'] will be updated to ['fontFamily: Roboto Mono']
-    const styleObject = key.replace(/(['"])(.*?)\1/g, '$2').split(':');
-    const styleKey = dashCaseToCamel(styleObject[0].trim());
-    return {
-      [styleKey]: styleObject[1].trim().replace(';', ''),
-    };
-  })
-    .reduce((current, obj) => (Object.assign(Object.assign({}, current), obj)), {});
+  const styleMap = {};
+  const styleAttr = element.getAttribute('style');
+  if (!styleAttr) {
+    return styleMap;
+  }
+  // Split by semicolons, but only those outside of parentheses (to handle data URLs with semicolons)
+  const properties = splitStyleProperties(styleAttr);
+  for (const property of properties) {
+    const trimmedProperty = property.trim();
+    const colonIndex = trimmedProperty.indexOf(':');
+    const propertyName = trimmedProperty.substring(0, colonIndex).trim();
+    const propertyValue = trimmedProperty.substring(colonIndex + 1).trim();
+    // Convert CSS property name to camelCase (e.g., 'background-color' -> 'backgroundColor')
+    const camelCaseName = dashCaseToCamel(propertyName);
+    styleMap[camelCaseName] = propertyValue;
+  }
+  return styleMap;
+}
+/**
+ * Split a CSS style string by semicolons, but only those outside of parentheses.
+ * This ensures that semicolons inside url() or other functions are not treated as property separators.
+ *
+ * @param {string} styleAttr The style attribute string to split.
+ * @returns {string[]} Array of individual CSS property strings.
+ */
+function splitStyleProperties(styleAttr) {
+  const properties = [];
+  let currentProperty = '';
+  let parenthesesDepth = 0;
+  for (let i = 0; i < styleAttr.length; i++) {
+    const char = styleAttr[i];
+    if (char === '(') {
+      parenthesesDepth++;
+      currentProperty += char;
+    }
+    else if (char === ')') {
+      parenthesesDepth--;
+      currentProperty += char;
+    }
+    else if (char === ';' && parenthesesDepth === 0) {
+      // Semicolon outside parentheses - this is a property separator
+      properties.push(currentProperty);
+      currentProperty = '';
+    }
+    else {
+      currentProperty += char;
+    }
+  }
+  // Add the last property if it doesn't end with a semicolon
+  if (currentProperty) {
+    properties.push(currentProperty);
+  }
+  return properties;
 }
 /**
  * Escape HTML-sensitive characters so text can be rendered literally in HTML.
@@ -199,6 +241,20 @@ function escapeHtml(text) {
     .replace(/"/g, '&quot;')
     .replace(/'/g, '&#39;');
 }
+/**
+ * Escape text for use inside a double-quoted HTML attribute value.
+ *
+ * @param {string} value - Raw attribute value.
+ * @returns {string} Escaped attribute-safe value.
+ */
+function escapeHtmlAttribute(value) {
+  return (value
+    // Keep existing entities (e.g. &quot;, &#39;) intact to avoid double escaping on repeated transforms.
+    .replace(/&(?!(?:[a-zA-Z][a-zA-Z0-9]+|#[0-9]+|#x[a-fA-F0-9]+);)/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;'));
+}
 
 /**
  * Abstract strategy class for filtering default styles in the rich text editor.
@@ -1180,9 +1236,9 @@ class CustomStyleAnnotation extends CommonAnnotation {
    * @returns {string} custom style string
    */
   toString() {
-    return `style="${Object.entries(this.customStyle)
+    return `style="${escapeHtmlAttribute(Object.entries(this.customStyle)
       .map(([key, value]) => `${key}: ${value};`)
-      .join(' ')}"`;
+      .join(' '))}"`;
   }
 }
 
@@ -1563,7 +1619,7 @@ class RTENode {
       ...customAttributeString,
       classNames && classNames.length > 0 ? `class="${classNames.join(' ')}"` : null,
       styles && Object.keys(styles).length > 0
-        ? `style="${nodeAnnotationStyle.toCssText({ standalone: true }, undefined, styles)}"`
+        ? `style="${escapeHtmlAttribute(nodeAnnotationStyle.toCssText({ standalone: true }, undefined, styles))}"`
         : null,
       ...attrs,
     ].filter(isNonNullable);
@@ -1888,7 +1944,7 @@ class RTEBlock {
       ...customAttributeString,
       classNames && classNames.length > 0 ? `class="${classNames.join(' ')}"` : null,
       styles && Object.keys(styles).length > 0
-        ? `style="${blockAnnotationStyle.toCssText({ standalone: true }, undefined, styles)}"`
+        ? `style="${escapeHtmlAttribute(blockAnnotationStyle.toCssText({ standalone: true }, undefined, styles))}"`
         : null,
       ...attrs,
     ].filter(isNonNullable);
@@ -5007,7 +5063,7 @@ CodeBlockNodeFilterStylesStrategy.STYLES = {
   boxSizing: 'border-box',
   color: 'rgba(var(--v-text-primary, 32, 54, 69, 1))',
   textAlign: 'left',
-  fontFamily: '"Roboto Mono"',
+  fontFamily: "'Roboto Mono'",
   fontWeight: '400',
   lineHeight: '22px',
   fontSize: '16px',

package/dist/esm/{component-value-history-controller-slimmer.abstract-b1ee1b8e.js → component-value-history-controller-slimmer.abstract-4e8eb313.js}

@@ -1,15 +1,15 @@
 import { c as MapToComponentField, M as MapToComponentMethod } from './global-slimmer-registry-17c4efd4.js';
-import { q as RTECodeBlockNode, R as RTETextNode, ad as ZERO_WIDTH_SPACE, s as stateEntityRenderingRegistry, o as RTEDecoratorNode, f as RTENode, a as RTEBlock, ag as SelectionChangeAction, h as InternalAnnotationTypeEnum, p as RTECodeBlock } from './code-block-ae2337c2.js';
+import { q as RTECodeBlockNode, R as RTETextNode, ad as ZERO_WIDTH_SPACE, s as stateEntityRenderingRegistry, o as RTEDecoratorNode, f as RTENode, a as RTEBlock, ag as SelectionChangeAction, h as InternalAnnotationTypeEnum, p as RTECodeBlock } from './code-block-e12588fe.js';
 import { d as debounce } from './timer-9321173b.js';
 import { g as getActiveElement } from './component-7d906393.js';
 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 { f as VegaInternalRichTextEditorSelectionRangeChange, c as VegaInternalUpdateRTECursorPosition } from './vega-internal-event-id-827eb1ce.js';
 import { O as Observer } from './observer-3959f9dd.js';
-import { R as RTERange } from './range-8f877dbf.js';
+import { R as RTERange } from './range-e999837f.js';
 import { A as AutoRunWhenReRenderTaskQueueSlimmer } from './auto-run-when-re-render-task-queue-slimmer.abstract-27820d4c.js';
 import { i as isHTMLElement } from './ui-d73f756a.js';
-import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-531ddb0e.js';
+import { K as KeyboardManagerSlimmer } from './keyboard-manager-slimmer-f3f66c15.js';
 
 let processing = false;
 /**

package/dist/esm/{content-state-c3b85ae6.js → content-state-8032467a.js}

@@ -1,6 +1,6 @@
-import { d as ActionHandleStrategy, b as RTETextBlock, R as RTETextNode, e as AppendChildrenAction, A as ActionHandleStrategyRegistry, T as TextStyleAnnotationAction, u as BlockUpdateTextStyleStrategy, H as HorizontalAlignmentAnnotationAction, v as BlockUpdateHorizontalAlignmentStrategy, i as ModifyContentActionType, w as BlockInsertLineBreakStrategy, x as BlockInsertLineBreakWithBlocksStrategy, y as BlockSplitWithTextNodeStrategy, z as BlockReplaceNodesStrategy, D as BlockMergeNodesStrategy, I as InsertChildrenAfterAction, k as RemoveChildrenAction, E as SyncUpSelectionAction, g as InsertChildrenBeforeAction, B as BlockAnnotation, F as BlockAnnotationTypeEnum, a as RTEBlock, r as CustomStyleAnnotation, G as CustomClassAnnotation, l as CustomAttributeAnnotation, p as RTECodeBlock, s as stateEntityRenderingRegistry, J as NodeAnnotation, N as NodeAnnotationTypeEnum, o as RTEDecoratorNode, K as NodeTypeEnum, L as CommonAnnotation, j as AnnotationAction, O as ReplaceChildNodesAction, M as ModifyContentAction, S as SplitBlockWithNodeAction, P as HTML_VOID_TAGS, Q as BlockDeleteNodeContentStrategy, U as UpdateTextAction, W as RemoveChildrenStrategy, X as BOLD_FONT_WEIGHT_KEYWORD, Y as BOLD_FONT_WEIGHT, Z as createStyleMapFromElement, _ as RTE_TEXT_COLORS, $ as RTE_DEFAULT_TEXT_COLOR, a0 as ITALIC_FONT_STYLE, a1 as STRIKETHROUGH_TEXT_DECORATION, a2 as UNDERLINE_TEXT_DECORATION, t as RTEFilterStylesStrategyRegistry, a3 as TextStyleAnnotation, n as RTEFilterStylesStrategy, a4 as Predicate$1, a5 as HorizontalAlignmentAnnotation, a6 as CodeAnnotation, m as RTEDTOClassManager, a7 as LinkFilterStylesStrategy, a8 as CodeBlockFilterStylesStrategy, q as RTECodeBlockNode, a9 as CodeBlockNodeFilterStylesStrategy } from './code-block-ae2337c2.js';
+import { d as ActionHandleStrategy, b as RTETextBlock, R as RTETextNode, e as AppendChildrenAction, A as ActionHandleStrategyRegistry, T as TextStyleAnnotationAction, u as BlockUpdateTextStyleStrategy, H as HorizontalAlignmentAnnotationAction, v as BlockUpdateHorizontalAlignmentStrategy, i as ModifyContentActionType, w as BlockInsertLineBreakStrategy, x as BlockInsertLineBreakWithBlocksStrategy, y as BlockSplitWithTextNodeStrategy, z as BlockReplaceNodesStrategy, D as BlockMergeNodesStrategy, I as InsertChildrenAfterAction, k as RemoveChildrenAction, E as SyncUpSelectionAction, g as InsertChildrenBeforeAction, B as BlockAnnotation, F as BlockAnnotationTypeEnum, a as RTEBlock, r as CustomStyleAnnotation, G as CustomClassAnnotation, l as CustomAttributeAnnotation, p as RTECodeBlock, s as stateEntityRenderingRegistry, J as NodeAnnotation, N as NodeAnnotationTypeEnum, o as RTEDecoratorNode, K as NodeTypeEnum, L as CommonAnnotation, j as AnnotationAction, O as ReplaceChildNodesAction, M as ModifyContentAction, S as SplitBlockWithNodeAction, P as HTML_VOID_TAGS, Q as BlockDeleteNodeContentStrategy, U as UpdateTextAction, W as RemoveChildrenStrategy, X as BOLD_FONT_WEIGHT_KEYWORD, Y as BOLD_FONT_WEIGHT, Z as createStyleMapFromElement, _ as RTE_TEXT_COLORS, $ as RTE_DEFAULT_TEXT_COLOR, a0 as ITALIC_FONT_STYLE, a1 as STRIKETHROUGH_TEXT_DECORATION, a2 as UNDERLINE_TEXT_DECORATION, t as RTEFilterStylesStrategyRegistry, a3 as TextStyleAnnotation, n as RTEFilterStylesStrategy, a4 as Predicate$1, a5 as HorizontalAlignmentAnnotation, a6 as CodeAnnotation, m as RTEDTOClassManager, a7 as LinkFilterStylesStrategy, a8 as CodeBlockFilterStylesStrategy, q as RTECodeBlockNode, a9 as CodeBlockNodeFilterStylesStrategy } from './code-block-e12588fe.js';
 import { g as generateUUID } from './misc-9fdbcfbb.js';
-import { i as isNonNullable } from './type-guard-2bfb2c7b.js';
+import { i as isNonNullable } from './type-guard-ec5e8628.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-ddff8662.js';
 import { c as VegaInternalUpdateRTECursorPosition, d as VegaInternalRichTextEditDeleteSelectedNodes, e as VegaInternalRichTextEditorFlushChanges } from './vega-internal-event-id-827eb1ce.js';

package/dist/esm/{date-required-rule-e06115f8.js → date-required-rule-b88e1650.js}

@@ -1,4 +1,4 @@
-import { U as isDateStr } from './type-guard-2bfb2c7b.js';
+import { U as isDateStr } from './type-guard-ec5e8628.js';
 import { I as InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract-f5b6bdbf.js';
 
 /**

package/dist/esm/{design-token-4e682056.js → design-token-76bd217c.js}

@@ -1,9 +1,9 @@
-import { m as StateBackgroundColorFormatter, n as isSpacingTokenType, o as isBorderRadiusTokenType, p as isBorderColorTokenType, q as isBackgroundColorTokenType, r as isTextColorTokenType, s as isBreakpointsTokenType, t as isShadowsTokenType, l as Spacing, u as isBorderStyleType, B as BorderRadius, c as Colors, j as Shadows, v as isTypographyTokenType } from './type-guard-2bfb2c7b.js';
+import { m as StateBackgroundColorFormatter, n as isSpacingTokenType, o as isBorderRadiusTokenType, p as isBorderColorTokenType, q as isBackgroundColorTokenType, r as isTextColorTokenType, s as isBreakpointsTokenType, t as isShadowsTokenType, l as Spacing, u as isBorderStyleType, B as BorderRadius, c as Colors, j as Shadows, v as isTypographyTokenType } from './type-guard-ec5e8628.js';
 import { B as Breakpoints } from './breakpoints-d9faf11c.js';
 import { L as LogUtility } from './global-slimmer-registry-17c4efd4.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-299e6304.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-ced96b0b.js';
 import { a as TypographyKeys } from './typography-19c3b9be.js';
-import { S as StateBorderFormatter, a as StateShadowFormatter, b as StateBorderColorFormatter } from './state-border-formatter-da52b626.js';
+import { S as StateBorderFormatter, a as StateShadowFormatter, b as StateBorderColorFormatter } from './state-border-formatter-b680e922.js';
 import { B as BorderStyle } from './ui-93922c59.js';
 
 /**

package/dist/esm/{element-appender-slimmer-a4485ef6.js → element-appender-slimmer-7fcb944b.js}

@@ -4,8 +4,8 @@ import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.js';
 import { A as Alignments, P as Placements } from './ui-93922c59.js';
-import { J as isTranslocationType, i as isNonNullable, a9 as isEATriggerStrategy } from './type-guard-2bfb2c7b.js';
-import { R as ResponsiveFormatFacade } from './responsive-format-facade-299e6304.js';
+import { J as isTranslocationType, i as isNonNullable, a9 as isEATriggerStrategy } from './type-guard-ec5e8628.js';
+import { R as ResponsiveFormatFacade } from './responsive-format-facade-ced96b0b.js';
 import { t as tryGetDocument } from './try-get-document-bef0f526.js';
 import { F as FeatureFlag } from './feature-flag-controller-3fd04ea9.js';
 import { C as ChangeManager } from './change-manager-6a7eb88c.js';

package/dist/esm/{event-emit-slimmer-db4a82e0.js → event-emit-slimmer-2452278f.js}

@@ -2,7 +2,7 @@ import { c as MapToComponentField, V as VegaSlimmer, I as InjectVegaSlimmer } fr
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 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 { j as jqueryDelegatedStrategyController, i as internalVegaEventManager } from './internal-vega-event-manager-48690e5b.js';
+import { j as jqueryDelegatedStrategyController, i as internalVegaEventManager } from './internal-vega-event-manager-2ecc9186.js';
 import { t as tryGetDocument } from './try-get-document-bef0f526.js';
 
 var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {

package/dist/esm/{form-field-controller-slimmer-a1c7b28c.js → form-field-controller-slimmer-395c23e3.js}

@@ -8,7 +8,7 @@ import { a as isAsyncFunction, g as generateUUID } from './misc-9fdbcfbb.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { d as domNodeSubjectFactory, D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-ddff8662.js';
 import { i as VegaInternalFieldErrorStateChange, g as VegaInternalFormSubmit, j as VegaInternalValid } from './vega-internal-event-id-827eb1ce.js';
-import { V as VegaInternalTranslation } from './internal-translation-controller-09b8bd13.js';
+import { V as VegaInternalTranslation } from './internal-translation-controller-16709132.js';
 import { h as htmlSanitizer, l as labelSanitizeStrategy } from './index-3b327f29.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.js';
 import { I as InternalFormFieldValidationRule } from './internal-form-field-validation-rule.abstract-f5b6bdbf.js';

package/dist/esm/{image-annotation-action-4c77d314.js → image-annotation-action-08a20d5e.js}

@@ -1,11 +1,11 @@
 import { h } from './index-090d31ca.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-e7c57096.js';
 import { c as MapToComponentField, V as VegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
-import { A as ActionHandleStrategyRegistry, _ as RTE_TEXT_COLORS, R as RTETextNode, ah as TextColorAnnotationAction, N as NodeAnnotationTypeEnum, j as AnnotationAction } from './code-block-ae2337c2.js';
+import { A as ActionHandleStrategyRegistry, _ as RTE_TEXT_COLORS, R as RTETextNode, ah as TextColorAnnotationAction, N as NodeAnnotationTypeEnum, j as AnnotationAction } from './code-block-e12588fe.js';
 import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-ddff8662.js';
-import { a as VegaClick, c as VegaPopoverShow, b as VegaPopoverHide, d as VegaChange } from './vega-event-id-270fe47e.js';
+import { a as VegaClick, c as VegaPopoverShow, b as VegaPopoverHide, d as VegaChange } from './vega-event-id-f55f6977.js';
 import { a as VegaDarkModeStyleController } from './dark-mode-style-controller-ca5afd2d.js';
-import { g as ImageAnnotation } from './content-state-c3b85ae6.js';
+import { g as ImageAnnotation } from './content-state-8032467a.js';
 
 const text = {
   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="M64 96v32c0 17.7-14.3 32-32 32s-32-14.3-32-32V80C0 53.5 21.5 32 48 32H224 400c26.5 0 48 21.5 48 48v48c0 17.7-14.3 32-32 32s-32-14.3-32-32V96H256l0 320h48c17.7 0 32 14.3 32 32s-14.3 32-32 32H144c-17.7 0-32-14.3-32-32s14.3-32 32-32h48l0-320H64z"/></svg>`,
@@ -171,7 +171,7 @@ class TextColorToolbarButtonSlimmer extends VisualModeToolbarButtonSlimmer {
     this.popoverShow = false;
   }
   renderBtnWrapper(renderBtn) {
-    return (h("vega-popover", { placement: "bottom", alignment: "center", ref: (ref) => {
+    return (h("vega-popover", { placement: "bottom", alignment: "center", isScreenPosition: true, ref: (ref) => {
         this.popoverRef = ref;
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, this.handlePopoverShowChange.bind(this));
         DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverHide, this.handlePopoverHideChange.bind(this));

package/dist/esm/{image-extension-7108c27d.js → image-extension-b6c7e4a7.js}

@@ -1,4 +1,20 @@
-import { b as VegaRTEExtension } from './link-extension-74eaa826.js';
+import { M as ModifyContentAction, i as ModifyContentActionType } from './code-block-e12588fe.js';
+import { b as VegaRTEExtension } from './link-extension-97fcb8fb.js';
+
+/**
+ * Replace the text node selected content to new text
+ *
+ * @example selectedNode.apply(new ReplaceSelectedTextAction(insertText))
+ */
+class ReplaceSelectedTextAction extends ModifyContentAction {
+  constructor(text, currentRange) {
+    super();
+    this.type = ModifyContentActionType.REPLACE_SELECTED_TEXT;
+    this.textToBeInsert = '';
+    this.textToBeInsert = text;
+    this.currentRange = currentRange;
+  }
+}
 
 /**
  * Rich Text Editor extension that configures built-in image behavior.
@@ -34,4 +50,4 @@ class VegaRTEImageExtension extends VegaRTEExtension {
  */
 VegaRTEImageExtension.configStore = VegaRTEImageExtension.createStateStore();
 
-export { VegaRTEImageExtension as V };
+export { ReplaceSelectedTextAction as R, VegaRTEImageExtension as V };