@heartlandone/vega 2.75.1 → 2.77.0

package/dist/collection/components/vega-input/slimmers/renderers/vega-input-input-container-renderer.js

@@ -39,13 +39,21 @@ export class VegaInputInputContainerRenderer extends VegaSlimmer {
     return this.inputContainerRef;
   }
   render() {
-    return (h("div", { ref: (e) => (this.inputContainerRef = e), part: "input-container", class: {
+    return (
+    // This container uses onClick to delegate focus to the inner <input> when clicking anywhere in the input area.
+    // It is a layout wrapper, not an interactive widget, so adding a role would be semantically incorrect.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    h("div", { ref: (e) => (this.inputContainerRef = e), part: "input-container", class: {
         'vega-input-container': true,
         'with-value': !!this.value,
         [`vega-input-size-${this.size}`]: true,
         'vega-input-disabled': this.disabled,
         'compact-input-width': this.isCompactInputWidth,
-      }, onClick: this.onContainerClick, "aria-label": "input container", "aria-disabled": `${this.disabled}`, role: "textbox", tabIndex: !this.disabled ? -1 : null, onKeyDown: createEnterKeyHandlerToTriggerClick() },
+      }, onClick: this.onContainerClick, "aria-disabled": `${this.disabled}`, 
+      // tabIndex={-1} allows programmatic focus (e.g. after clearing input) without adding the container to the tab order.
+      // The linter flags this because it's a non-interactive element, but programmatic focus is intentional here.
+      /* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */
+      tabIndex: !this.disabled ? -1 : null, onKeyDown: createEnterKeyHandlerToTriggerClick() },
       this.prefixSlotRenderer.render(),
       this.renderPrefixText(),
       this.inputRenderer.render(),

package/dist/collection/components/vega-input-phone-number/slimmers/controllers/country-select-controller.js

@@ -5,7 +5,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
-import { getCountries } from 'libphonenumber-js';
+import { getCountries } from '../../../../polyfill/libphonenumber';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import { COUNTRIES } from '../../assets/countries';
 import { VegaDropdownSearchInternalOverridden } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';

package/dist/collection/components/vega-input-phone-number/slimmers/controllers/vega-input-phone-number-value-controller.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-slimmer/core';
 import { FORM_ELEMENT_VALUE_CHANGE } from '../../../../helpers/change-manager/subject/static-subject/static-subject-title';
 import ChangeManager from '../../../../helpers/change-manager/change-manager';
-import { AsYouType, formatIncompletePhoneNumber, getCountryCallingCode, parseIncompletePhoneNumber, } from 'libphonenumber-js';
+import { AsYouType, formatIncompletePhoneNumber, getCountryCallingCode, parseIncompletePhoneNumber, } from '../../../../polyfill/libphonenumber';
 import { CountrySelectController } from './country-select-controller';
 /**
  * The `VegaInputPhoneNumberValueController` class in TypeScript manages input phone number values and

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/country-select-renderer.js

@@ -9,12 +9,12 @@ import { MapToComponentField, MapToComponentMethod, VegaSlimmer } from 'vega-sli
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
-import { getCountryCallingCode } from 'libphonenumber-js';
+import { getCountryCallingCode } from '../../../../polyfill/libphonenumber';
 import { COUNTRIES } from '../../assets/countries';
 import remoteInvocationRegistry from '../../../../helpers/remote-invocation/remote-invocation-registry';
 import { VegaDropdownRenderItemInternalOverridden, VegaInputSelectRenderPrefixIconInternalOverridden, } from '../../../../helpers/event-manager/event-id/vega-internal-event-id';
 import domNodeSubjectFactory from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { FeatureFlag } from '../../../../helpers/public-api';
+import { FeatureFlag } from '../../../../helpers/feature-control/feature-flag-controller';
 export class CountrySelectRenderer extends VegaSlimmer {
   constructor() {
     super(...arguments);

package/dist/collection/components/vega-input-phone-number/slimmers/renderers/phone-number-input-renderer.js

@@ -8,7 +8,7 @@ import { h } from '@stencil/core';
 import { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
 import { DomNodeSubjectObserverFactory } from '../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaChange } from '../../../../helpers/event-manager/event-id/vega-event-id';
-import { parseIncompletePhoneNumber } from 'libphonenumber-js';
+import { parseIncompletePhoneNumber } from '../../../../polyfill/libphonenumber';
 import { VegaPhoneNumberInputStrategy } from '../../../../helpers/formatter/string-formatter/vega-phone-number-input-strategy';
 export class PhoneNumberInputRenderer extends VegaSlimmer {
   constructor() {

package/dist/collection/components/vega-input-phone-number/vega-input-phone-number.js

@@ -10,7 +10,7 @@ import { InjectVegaGlobalSlimmer, InjectVegaSlimmer, methodPlaceholder, } from '
 import { VegaInputPhoneNumberRenderer } from './slimmers/renderers/vega-input-phone-number-renderer';
 import { CountrySelectRenderer } from './slimmers/renderers/country-select-renderer';
 import { PhoneNumberInputRenderer } from './slimmers/renderers/phone-number-input-renderer';
-import { getCountryCallingCode } from 'libphonenumber-js';
+import { getCountryCallingCode } from '../../polyfill/libphonenumber';
 import { VegaInputPhoneNumberValueController } from './slimmers/controllers/vega-input-phone-number-value-controller';
 import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
 import { FormFieldControllerSlimmer } from '../../helpers/slimmers/form-field-controller-slimmer';
@@ -298,7 +298,7 @@ export class VegaInputPhoneNumber {
       "mutable": false,
       "complexType": {
         "original": "VegaCountryCode[]",
-        "resolved": "CountryCode[]",
+        "resolved": "VegaCountryCode[]",
         "references": {
           "VegaCountryCode": {
             "location": "import",
@@ -533,7 +533,7 @@ export class VegaInputPhoneNumber {
       },
       "complexType": {
         "original": "VegaCountryType",
-        "resolved": "{ callingCode: string; countryCode: CountryCode; name: string; }",
+        "resolved": "{ callingCode: string; countryCode: VegaCountryCode; name: string; }",
         "references": {
           "VegaCountryType": {
             "location": "import",
@@ -559,7 +559,7 @@ export class VegaInputPhoneNumber {
       },
       "complexType": {
         "original": "VegaCountryType",
-        "resolved": "{ callingCode: string; countryCode: CountryCode; name: string; }",
+        "resolved": "{ callingCode: string; countryCode: VegaCountryCode; name: string; }",
         "references": {
           "VegaCountryType": {
             "location": "import",

package/dist/collection/components/vega-input-select/slimmers/renderers/vega-input-select-dropdown-renderer.js

@@ -10,7 +10,7 @@ import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibi
 import chevronUp from '../../../../global/icons/chevron-up';
 import chevronDown from '../../../../global/icons/chevron-down';
 import { VegaInternalIconManager } from '../../../../helpers/icon/internal-icon-manager';
-import { sanitizeHtmlLabel } from '../../../../utils/sanitize';
+import { htmlSanitizer, labelSanitizeStrategy } from '../../../../utils/sanitize';
 /** The `VegaInputSelectDropdownRenderer` class is a TypeScript React component that renders a dropdown select input with various customization options. */
 export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
   constructor() {
@@ -61,7 +61,7 @@ export class VegaInputSelectDropdownRenderer extends VegaSlimmer {
       var _a, _b;
       const selectedSourceItemItem = this.selectedItem;
       if (selectedSourceItemItem === null || selectedSourceItemItem === void 0 ? void 0 : selectedSourceItemItem.displayName) {
-        selectedSourceItemItem.displayName = sanitizeHtmlLabel(selectedSourceItemItem.displayName);
+        selectedSourceItemItem.displayName = htmlSanitizer.sanitize(selectedSourceItemItem.displayName, labelSanitizeStrategy);
       }
       const selectedLabelStr = (_b = (_a = this.selectedLabel).single) === null || _b === void 0 ? void 0 : _b.call(_a, this.value, selectedSourceItemItem);
       if ((typeof this.selectedLabel == 'function' && this.selectedItem) ||

package/dist/collection/components/vega-pagination/vega-pagination.js

@@ -21,7 +21,7 @@ import { getCurrentBreakpoint } from '../../utils/breakpoints';
 import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
 import { VegaPaginationPageSizeObserverController } from './slimmers/controllers/vega-pagination-page-size-observer-controller';
 import { VegaPaginationCurrentPageObserverController } from './slimmers/controllers/vega-pagination-current-page-observer-controller';
-import { FeatureFlag } from '../../helpers/public-api';
+import { FeatureFlag } from '../../helpers/feature-control/feature-flag-controller';
 import { VegaPaginationLayoutController } from './slimmers/controllers/vega-pagination-layout-controller';
 /**
  * @vegaVersion 1.3.0

package/dist/collection/components/vega-progress-tracker/slimmers/controllers/dto/internal-progress-tracker-step.js

@@ -13,23 +13,29 @@ export class InternalProgressTrackerStep {
    * @param {string} title - The title of the step.
    * @param {ProgressStepStatus} progressStatus - The progress status of the step.
    * @param {boolean} isCurrent - Indicates if this step is the current step.
+   * @param {boolean} clickable - Indicates if this step is clickable.
    */
-  constructor(stepKey, title, progressStatus, isCurrent) {
+  constructor(stepKey, title, progressStatus, isCurrent, clickable) {
     this.stepKey = stepKey;
     this.title = title;
     this.progressStatus = progressStatus;
     this.isCurrent = isCurrent;
+    this.clickable = clickable;
   }
   /**
    * Create InternalProgressTrackerStep array from steps property
    *
-   * @param {string[]} steps - An array of step keys.
+   * @param {HTMLElement} host - The host element.
+   * @param {string[] | VegaProgressTrackerStepItem[]} steps - An array of step keys.
    * @param {number} current - The current step index.
    * @param {string[]} completedSteps - An array of completed step keys.
    * @returns {InternalProgressTrackerStep[]} An array of InternalProgressTrackerStep instances.
    */
-  static fromSteps(steps, current, completedSteps) {
-    return steps.map((step, index) => new InternalProgressTrackerStep(step, step, this.getStepStatus(step, index, current, completedSteps), index === current));
+  static fromSteps(host, steps, current, completedSteps) {
+    return steps.map((step, index) => {
+      const stepKey = typeof step === 'string' ? step : step.title;
+      return new InternalProgressTrackerStep(stepKey, stepKey, this.getStepStatus(stepKey, index, current, completedSteps), index === current, this.getIsStepClickable(host, step));
+    });
   }
   /**
    * Create InternalProgressTrackerStep array from host slot elements
@@ -41,9 +47,27 @@ export class InternalProgressTrackerStep {
    */
   static fromHostSlot(host, current, completedSteps) {
     return Array.from(host.querySelectorAll('vega-progress-tracker-step')).map((step, index) => {
-      return new InternalProgressTrackerStep(step.stepKey, '', this.getStepStatus(step.stepKey, index, current, completedSteps), index === current);
+      const stepKey = step.stepKey;
+      return new InternalProgressTrackerStep(stepKey, '', this.getStepStatus(stepKey, index, current, completedSteps), index === current, this.getIsStepClickable(host, step));
     });
   }
+  /**
+   * Gets the clickable mode of the step.
+   *
+   * @param {HTMLElement} host - The host element.
+   * @param {string | VegaProgressTrackerStepItem} step - The step element.
+   * @returns { boolean } The clickable mode of the step.
+   */
+  static getIsStepClickable(host, step) {
+    //For the legacy string type steps, the clickable mode is determined by the canClickStep property on the host
+    if (typeof step === 'string')
+      return host.canClickStep;
+    //If host has disabled click step, return false regardless of individual step setting
+    if (!host.canClickStep)
+      return false;
+    //Return default VegaProgressTrackerStepItem clickable value
+    return typeof step.clickable === 'boolean' ? step.clickable : host.canClickStep;
+  }
   /**
    * Checks if the step is completed.
    *
@@ -59,7 +83,7 @@ export class InternalProgressTrackerStep {
  * @param {string} stepKey - The unique key for the step.
  * @param {number} stepIndex - The index of the step.
  * @param {number} current - The current step index.
- * @param {string[]} completedSteps - An array of completed step keys.
+ * @param {string[]} completedSteps - An array of completed step keys. TODO: In the future, this will be derived from the step's own status rather than relying on an external array.
  * @returns {ProgressStepStatus} The progress status of the step.
  */
 InternalProgressTrackerStep.getStepStatus = (stepKey, stepIndex, current, completedSteps) => {

package/dist/collection/components/vega-progress-tracker/slimmers/controllers/vega-progress-tracker-current-steps-controller.js

@@ -64,7 +64,7 @@ export class VegaProgressTrackerCurrentStepsController extends VegaSlimmer {
    */
   syncUpCurrentSteps() {
     this.currentSteps = this.renderModeController.isSourceRenderMode()
-      ? InternalProgressTrackerStep.fromSteps(this.steps, this.current, this.deprecatedPropertySlimmer.getValue())
+      ? InternalProgressTrackerStep.fromSteps(this.host, this.steps, this.current, this.deprecatedPropertySlimmer.getValue())
       : InternalProgressTrackerStep.fromHostSlot(this.host, this.current, this.deprecatedPropertySlimmer.getValue());
   }
   /**

package/dist/collection/components/vega-progress-tracker/slimmers/renderers/vega-progress-tracker-renderer.js

@@ -22,7 +22,14 @@ export class VegaProgressTrackerRenderer extends VegaSlimmer {
     };
     this.renderStep = (step, stepIndex) => {
       var _a;
-      return (h("div", { role: !this.canClickStep ? null : 'button', class: `vega-progress-step ${step.progressStatus} ${step.isCurrent ? 'current' : ''}`, "data-index": stepIndex, tabIndex: !this.canClickStep ? null : 0, onClick: !this.canClickStep ? null : this.onStepIconClick, onKeyDown: !this.canClickStep ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": step.title },
+      return (h("div", { role: !step.clickable ? null : 'button', class: [
+          'vega-progress-step',
+          step.progressStatus,
+          step.isCurrent ? 'current' : '',
+          !step.clickable ? 'disabled' : '',
+        ]
+          .filter(Boolean)
+          .join(' '), "data-index": stepIndex, tabIndex: !step.clickable ? null : 0, onClick: !step.clickable ? null : this.onStepIconClick, onKeyDown: !step.clickable ? null : createEnterKeyHandlerToTriggerClick(), "aria-label": step.title },
         h("div", { class: "vega-progress-step-icon-divider" },
           h("div", { class: `vega-progress-step__divider left ${((_a = this.currentSteps[stepIndex - 1]) === null || _a === void 0 ? void 0 : _a.isCompleted()) ? 'background' : ''}` }),
           this.renderStepIcon(step, stepIndex),

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker-step/vega-progress-tracker-step.js

@@ -26,6 +26,12 @@ export class VegaProgressTrackerStep {
      * @vegaVersion 2.73.0
      */
     this.stepKey = '';
+    /**
+     * If step is clickable.
+     *
+     * @vegaVersion 2.76.0
+     */
+    this.clickable = true;
   }
   render() {
     return sanitizeVegaComponent(h(Host, null,
@@ -65,6 +71,27 @@ export class VegaProgressTrackerStep {
       "attribute": "step-key",
       "reflect": true,
       "defaultValue": "''"
+    },
+    "clickable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "vegaVersion",
+            "text": "2.76.0"
+          }],
+        "text": "If step is clickable."
+      },
+      "attribute": "clickable",
+      "reflect": true,
+      "defaultValue": "true"
     }
   }; }
   static get states() { return {

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.css

@@ -61,6 +61,18 @@
 :host(:not(.click-step-disabled)) .vega-progress-step.complete.current:hover .vega-progress-step__icon vega-icon {
   color: rgba(var(--v-text-inverted-primary, 252, 252, 252, 1));
 }
+:host(:not(.click-step-disabled)) .vega-progress-step.disabled {
+  cursor: initial;
+}
+:host(:not(.click-step-disabled)) .vega-progress-step.disabled.default:hover .vega-progress-step__icon {
+  background-color: rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));
+}
+:host(:not(.click-step-disabled)) .vega-progress-step.disabled.default:active .vega-progress-step__icon {
+  background-color: rgba(var(--v-bg-action-quaternary, 222, 225, 227, 1));
+}
+:host(:not(.click-step-disabled)) .vega-progress-step.disabled.inProgress:hover .vega-progress-step__icon, :host(:not(.click-step-disabled)) .vega-progress-step.disabled.current:hover .vega-progress-step__icon {
+  background-color: rgba(var(--v-bg-action, 19, 98, 226, 1));
+}
 
 :host .vega-progress-step:focus-visible {
   outline-width: 0px;

package/dist/collection/components/vega-progress-tracker/vega-progress-tracker.js

@@ -220,9 +220,14 @@ export class VegaProgressTracker {
       "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "string[]",
-        "resolved": "string[]",
-        "references": {}
+        "original": "string[] | VegaProgressTrackerStepItem[]",
+        "resolved": "VegaProgressTrackerStepItem[] | string[]",
+        "references": {
+          "VegaProgressTrackerStepItem": {
+            "location": "import",
+            "path": "./type"
+          }
+        }
       },
       "required": false,
       "optional": false,

package/dist/collection/components/vega-rich-text-content/slimmers/renderers/vega-rich-text-content-renderer.js

@@ -11,6 +11,7 @@ import { TextColorToolbarButtonSlimmer } from '../../../vega-rich-text-editor/sl
 import { VegaRTEContent } from '../../../vega-rich-text-editor/dto/content-state';
 import RTEBlockRendererFactory from '../../../vega-rich-text-editor/dto/renderers/renderer-factory';
 import { vegaNonceManager } from '../../../../helpers/csp/vega-nonce-manager';
+import stateEntityRenderingRegistry from '../../../vega-rich-text-editor/slimmers/controllers/state-entity-rendering-registry';
 export class VegaRichTextContentRenderer extends VegaSlimmer {
   constructor() {
     super();
@@ -47,6 +48,7 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
   renderContent() {
     var _a;
     const renderContext = { editable: this.contentEditable };
+    this.injectRTERefIntoContext(renderContext);
     return (_a = this.content) === null || _a === void 0 ? void 0 : _a.children.map((block) => {
       const blockRenderer = RTEBlockRendererFactory.getBlockRenderer(block.type);
       if (blockRenderer) {
@@ -69,6 +71,19 @@ export class VegaRichTextContentRenderer extends VegaSlimmer {
     }
     return true;
   }
+  /**
+   * Inject the reference of rich text editor into render context for the usage of extensions.
+   *
+   * @param {RTERenderContext} renderContext - The render context which may contain the host reference.
+   */
+  injectRTERefIntoContext(renderContext) {
+    const content = this.content;
+    if (content) {
+      const ref = stateEntityRenderingRegistry.getDOMByEntity(content);
+      // The ref will be null if the content is not rendered by VegaRichTextEditor, in that case we will not inject the ref into context to avoid potential error on extensions which use the ref.
+      ref && (renderContext.host = ref);
+    }
+  }
 }
 __decorate([
   MapToComponentField()

package/dist/collection/components/vega-rich-text-content/vega-rich-text-content.js

@@ -11,7 +11,7 @@ import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/
 import { VegaRichTextContentRenderer } from './slimmers/renderers/vega-rich-text-content-renderer';
 import { VegaRichTextContentStateController } from './slimmers/controllers/vega-rich-text-content-state-controller';
 import { findParent } from '../../utils/ui';
-import { waitForComponentDidRender } from '../../helpers/common';
+import { waitForComponentDidRender } from '../../helpers/common/wait-for-component-did-render';
 import { RTEExtensionStylesController } from './slimmers/controllers/vega-rich-text-content-extensions-styles-controller';
 /**
  * @vegaVersion 2.34.0

package/dist/collection/components/vega-rich-text-editor/extensions/base-extension-renderer.js

@@ -1,4 +1,5 @@
 import RTEDTORendererManager from '../../../helpers/rte-manager/dto-renderer-manager';
+import rteExtensionContextManager from '../helpers/extension-context-manager';
 import { isNonNullable } from '../../../types/type-guard';
 import { VegaRTEBaseRenderer } from '../dto/renderers/base-renderer';
 import stateEntityRenderingRegistry from '../slimmers/controllers/state-entity-rendering-registry';
@@ -52,6 +53,16 @@ export class VegaRTEExtensionRenderer extends VegaRTEBaseRenderer {
   getDTORenderer(key) {
     return RTEDTORendererManager.getRTERenderer(key);
   }
+  /**
+   * Get the extension context for the given rich text editor host element.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type definition for the rich text editor host element.
+   * @param {HTMLVegaRichTextEditorElement} el - The host rich text editor element.
+   * @returns {Nullable<RTEExtensionContext>} - The extension context associated with the host.
+   */
+  getExtensionContext(el) {
+    return rteExtensionContextManager.getExtensionContext(el);
+  }
   /**
    * Auto render the block children if the block element is not exist
    *

package/dist/collection/components/vega-rich-text-editor/extensions/base-toolbar-button-renderer.js

@@ -1,6 +1,7 @@
 import { DomNodeSubjectObserverFactory } from '../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
 import { VegaClick, VegaDropdownClick } from '../../../helpers/event-manager/event-id/vega-event-id';
 import { VegaInternalIconManager } from '../../../helpers/icon/internal-icon-manager';
+import rteExtensionContextManager from '../helpers/extension-context-manager';
 import { isNonNullable } from '../../../types/type-guard';
 /**
  * Base class for rendering extension toolbar button in the rich text editor.
@@ -23,6 +24,16 @@ export class VegaRTEToolbarButtonRenderer {
   isHidden(editorContext) {
     return editorContext.sourceEditMode;
   }
+  /**
+   * Get the extension context for the given rich text editor host element.
+   *
+   * @typedef HTMLVegaRichTextEditorElement - The type definition for the rich text editor host element.
+   * @param {HTMLVegaRichTextEditorElement} el - The host rich text editor element.
+   * @returns {Nullable<RTEExtensionContext>} - The extension context associated with the host.
+   */
+  getExtensionContext(el) {
+    return rteExtensionContextManager.getExtensionContext(el);
+  }
   /**
    * Renders a dropdown component with the specified properties and children.
    *
@@ -36,7 +47,10 @@ export class VegaRTEToolbarButtonRenderer {
     return h('vega-dropdown', Object.assign({ trigger: 'click', searchable: false, maxWidth: '200', itemDisplayRule: 'ellipsis', 
       // eslint-disable-next-line jsdoc/require-jsdoc
       ref: (el) => {
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, (input) => this.handleDropdownClick(input.detail, editorContext));
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaDropdownClick, (input) => {
+          const payload = input;
+          this.handleDropdownClick(payload.detail, editorContext);
+        });
       } }, dropdownProps), children);
   }
   /**

package/dist/collection/components/vega-rich-text-editor/extensions/extension.abstract.js

@@ -2,6 +2,7 @@ import RTEDTOClassManager from '../../../helpers/rte-manager/dto-class-manager';
 import RTEDTORendererManager from '../../../helpers/rte-manager/dto-renderer-manager';
 import RTEDTOActionStrategyManager from '../../../helpers/rte-manager/dto-action-strategy-manager';
 import ElementToDTOClassStrategyManager from '../../../helpers/rte-manager/element-dto-class-strategy-manager';
+import rteExtensionContextManager from '../helpers/extension-context-manager';
 import { ActionHandleStrategyRegistry } from '../dto/action-handle-strategies/action-handle-strategy-registry';
 import { VegaRTEExtensionRenderer } from './base-extension-renderer';
 import { ActionHandlerInterceptorRegistry } from '../dto/action-handle-strategies/action-handle-interceptor-registry';
@@ -43,6 +44,7 @@ export class VegaRTEExtension {
    */
   initialExtension(context) {
     this.extensionContext = context;
+    rteExtensionContextManager.setExtensionContext(context);
   }
   /**
    * Collect custom styles for the extension renderers.

package/dist/collection/components/vega-rich-text-editor/extensions/functions/function-extension.js

@@ -40,17 +40,6 @@ export class VegaRTEFunctionExtension extends VegaRTEExtension {
     this.registerElementToBlockDTOClassStrategy(convertFunctionContentStrategy);
     this.registerElementToBlockDTOClassStrategy(convertFunctionBlockStrategy);
   }
-  /**
-   * Initializes the extension with the given context
-   *
-   * @param {RTEExtensionContext} context - extension context
-   */
-  initialExtension(context) {
-    super.initialExtension(context);
-    if (this.toolbarButtonRenderer) {
-      this.toolbarButtonRenderer.injectExtensionContext(context);
-    }
-  }
   /**
    * Remove the appen children strategies to prevent default insert new paragraph logic in function block
    */

package/dist/collection/components/vega-rich-text-editor/extensions/functions/renderers/function-toolbar-button-renderer.js

@@ -6,14 +6,6 @@ import { INSERT_FUNCTION_BLOCK, InsertFunctionBlockAction, } from '../actions/in
  * Function toolbar button renderer class.
  */
 export class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
-  /**
-   * Injects the extension context
-   *
-   * @param {RTEExtensionContext} context - extension context
-   */
-  injectExtensionContext(context) {
-    this.extensionContext = context;
-  }
   /**
    * @inheritDoc
    */
@@ -29,11 +21,13 @@ export class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
   /**
    * Overrides the isDisabled method to determine if the button should be disabled.
    *
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context for the editor.
    * @returns {boolean} - true if the button should be disabled, false otherwise.
    */
-  isDisabled() {
-    if (this.extensionContext) {
-      const { host, getSelectedNodes } = this.extensionContext;
+  isDisabled(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { host, getSelectedNodes } = context;
       const focusNode = getSelectedNodes()[0];
       let enableInsert = true;
       if (focusNode) {
@@ -52,19 +46,25 @@ export class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer
    * Handles dropdown click event
    *
    * @param {RTEExtensionFunctionType} itemKey - key of the clicked item
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context for the editor.
    */
-  handleDropdownClick(itemKey) {
-    const { host, getSelectedNodes } = this.extensionContext;
-    const focusNode = getSelectedNodes()[0];
-    const action = new InsertFunctionBlockAction(itemKey);
-    if (!focusNode) {
-      host.value.apply(action);
-    }
-    else if (focusNode.parent) {
-      focusNode.parent.apply(action);
-    }
-    if (action.nextFocusNode) {
-      host.value.apply(new UpdateCursorPositionAction(action.nextFocusNode, 1));
+  handleDropdownClick(itemKey, editorContext) {
+    if (editorContext) {
+      const context = this.getExtensionContext(editorContext.host);
+      if (context) {
+        const { host, getSelectedNodes } = context;
+        const focusNode = getSelectedNodes()[0];
+        const action = new InsertFunctionBlockAction(itemKey);
+        if (!focusNode) {
+          host.value.apply(action);
+        }
+        else if (focusNode.parent) {
+          focusNode.parent.apply(action);
+        }
+        if (action.nextFocusNode) {
+          host.value.apply(new UpdateCursorPositionAction(action.nextFocusNode, 1));
+        }
+      }
     }
   }
 }

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/token-extension.js

@@ -20,16 +20,6 @@ export class VegaRTETokenExtension extends VegaRTEExtension {
     this.registerToolbarButtonRenderer('token', this.tokenToolbarButtonRenderer);
     this.registerElementToNodeDTOClassStrategy(spanToTokenNodeStrategy);
   }
-  /**
-   * @inheritDoc
-   */
-  initialExtension(context) {
-    super.initialExtension(context);
-    this.tokenRenderer.injectExtensionContext(context);
-    if (this.tokenToolbarButtonRenderer) {
-      this.tokenToolbarButtonRenderer.injectExtensionContext(context);
-    }
-  }
 }
 (() => {
   const insertTokenNodeStrategy = new InsertTokenNodeStrategy();

package/dist/collection/components/vega-rich-text-editor/extensions/tokens/token-node-renderer.js

@@ -1,13 +1,9 @@
-import { UpdateCursorPositionAction } from '../../public-api';
+import { UpdateCursorPositionAction } from '../../dto/actions/update-cursor-position-action';
 import { VegaRTEExtensionRenderer } from '../base-extension-renderer';
 /**
  * Token node renderer for the rich text editor.
  */
 export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
-  constructor() {
-    super(...arguments);
-    this.extensionContext = null;
-  }
   /**
    * Renders the token node as a DOM element.
    *
@@ -23,18 +19,10 @@ export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
       'onClick': (event) => {
         event.preventDefault();
         if (editorContent && editorContent.editable !== false) {
-          this.handleTokenElementClick(event, node);
+          this.handleTokenElementClick(event, node, editorContent.host);
         }
       } }), node.text);
   }
-  /**
-   * Sets the RTE extension context.
-   *
-   * @param {RTEExtensionContext} context - The context of the RTE extension.
-   */
-  injectExtensionContext(context) {
-    this.extensionContext = context;
-  }
   /**
    * Override to inject RTE scope styles for the token node.
    *
@@ -46,13 +34,15 @@ export class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
   /**
    * Handle the click event on the token element.
    *
+   * @typedef HTMLVegaRichTextEditorElement - The type definition for the rich text editor host element.
    * @param {MouseEvent} event - The click event.
    * @param {RTETokenNode} node - The token node that was clicked.
+   * @param {HTMLVegaRichTextEditorElement} [richTextEditor] - The rich text editor host element.
    */
-  handleTokenElementClick(event, node) {
+  handleTokenElementClick(event, node, richTextEditor) {
     event.preventDefault();
-    if (this.extensionContext) {
-      this.extensionContext.host.value.apply(new UpdateCursorPositionAction(node, undefined, true));
+    if (richTextEditor) {
+      richTextEditor.value.apply(new UpdateCursorPositionAction(node, undefined, true));
     }
   }
   /**