@heartlandone/vega 2.75.1 → 2.77.0

package/dist/esm/{function-extension-e8c0e43e.js → token-extension-73e4460a.js}

@@ -1,19 +1,21 @@
-import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlimmer, g as generateUUID } from './create-public-api-runtime-metrics-slimmer-bedf3a1e.js';
-import { a as arrayToClassString, g as getDeviceType, D as DeviceType } from './ui-bb99c0c2.js';
+import { g as generateUUID } from './misc-9fdbcfbb.js';
+import { a as arrayToClassString, g as getDeviceType, D as DeviceType } from './ui-ee31416b.js';
 import { L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.js';
+import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlimmer } from './create-public-api-runtime-metrics-slimmer-aaadaa08.js';
+import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
-import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-8744cb44.js';
-import { V as VegaInternalThemeManager } from './dark-mode-style-controller-de88a117.js';
-import { i as internalVegaEventManager } from './internal-vega-event-manager-efb6786e.js';
-import { c as convertToNumber } from './number-4398f2e1.js';
-import { R as RTEDTORendererManager, a as RTEDTOActionStrategyManager, E as ElementToDTOClassStrategyManager, U as UpdateCursorPositionAction, b as ElementToDTOStrategy, h as htmlElementToAnnotationGenerator, c as RTEListItemBlock, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, I as InsertNewParagraphAction, d as RTEImageBlock } from './dto-renderer-manager-ee1a5864.js';
-import { s as stateEntityRenderingRegistry, A as ActionHandleStrategyRegistry, a as ActionHandlerInterceptorRegistry, R as RTEDTOClassManager, M as ModifyContentAction, b as RTETextNode, c as ModifyContentActionType, d as ActionHandleStrategy, C as CustomAttributeAnnotation, e as RTETextBlock, f as RTEBlock, g as RTEAnnotationStyle, I as InsertChildrenAfterAction, h as AppendChildrenAction, i as RTENode, j as InsertChildrenBeforeAction, k as InternalAnnotationTypeEnum } from './code-block-8ee34ab6.js';
-import { i as isNonNullable } from './type-guard-c65a227d.js';
-import './translation-96e5debd.js';
-import { a as VegaInternalIconManager } from './internal-icon-manager-f0486245.js';
-import { c as cleanObject } from './object-66c37948.js';
+import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-d6af0d86.js';
+import { V as VegaInternalThemeManager } from './dark-mode-style-controller-82e5c1c6.js';
+import { i as internalVegaEventManager } from './internal-vega-event-manager-32a3d848.js';
+import { V as VegaInternalTranslation } from './internal-translation-controller-911515f9.js';
+import { R as RTEDTORendererManager, a as RTEDTOActionStrategyManager, E as ElementToDTOClassStrategyManager, U as UpdateCursorPositionAction, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, b as ElementToDTOStrategy, h as htmlElementToAnnotationGenerator, I as InsertNewParagraphAction, c as RTEImageBlock, d as RTEListItemBlock } from './dto-renderer-manager-6fd22ab7.js';
+import { s as stateEntityRenderingRegistry, A as ActionHandleStrategyRegistry, a as ActionHandlerInterceptorRegistry, R as RTEDTOClassManager, M as ModifyContentAction, b as RTETextNode, c as RTEBlock, d as RTETextBlock, e as RTEAnnotationStyle, f as ActionHandleStrategy, I as InsertChildrenAfterAction, g as AppendChildrenAction, h as RTENode, i as InsertChildrenBeforeAction, j as InternalAnnotationTypeEnum, k as ModifyContentActionType, C as CustomAttributeAnnotation } from './code-block-b6247a45.js';
+import { i as isNonNullable } from './type-guard-f50e34d6.js';
 import { V as VegaRTEBaseRenderer } from './base-renderer-101f6d04.js';
-import { D as DomNodeSubjectObserverFactory, V as VegaDropdownClick, a as VegaClick } from './dom-node-subject-observer-factory-064ee2b2.js';
+import { V as VegaInternalIconManager } from './internal-icon-manager-bd80b3bb.js';
+import { D as DomNodeSubjectObserverFactory } from './dom-node-subject-observer-factory-82f346e3.js';
+import { V as VegaDropdownClick, a as VegaClick } from './vega-event-id-38aa77a0.js';
+import { c as cleanObject } from './object-66c37948.js';
 
 const VegaLoaderRuntimeMetricsPayloadDefinition = [
   {
@@ -58,7 +60,7 @@ const VegaLoaderRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$7 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -180,185 +182,11 @@ class VegaLoaderController {
   }
 }
 VegaLoaderController.SPECIAL_ELEMENT_TO_WRAP_FULL_BODY = ['VEGA-MODAL'];
-__decorate$6([
+__decorate$7([
   InjectVegaTelemetrySlimmer()
 ], VegaLoaderController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 const VegaLoader = new VegaLoaderController();
 
-const BASE_BASIC_Z_INDEX = 10000;
-const TOP_BASIC_Z_INDEX = 11000;
-/**
- * Base level is for custom element such as modal, tooltip, dropdown, sidenav and header.
- * 	the z-index of current showing element is highly than already show.
- * Top level is for element that always display to top, such as notification.
- */
-class InternalVegaZIndexManager {
-  constructor() {
-    this.baseBasicZIndex = BASE_BASIC_Z_INDEX;
-    this.topBasicZIndex = TOP_BASIC_Z_INDEX;
-    this.levelEntry = {
-      base: {
-        zIndex: this.baseBasicZIndex,
-        elements: [],
-      },
-      top: {
-        zIndex: this.topBasicZIndex,
-        elements: [],
-      },
-    };
-  }
-  /**
-   * "If the element is not already the current element, then increment the z-index and set the element
-   * to the current element."
-   *
-   * The function is a little more complicated than that, but not much. The function takes an element and
-   * a level. The level is optional and defaults to 'base'. The level is used to keep track of the
-   * z-index for each level. The function uses a private variable, levelStatus, to keep track of the
-   * current element and z-index for each level
-   *
-   * @param {HTMLElement} element - The element to set the z-index of.
-   * @param {ZIndexLevelType} [level=base] - The level of the element.
-   * @returns {void}
-   */
-  setZIndex(element, level = 'base') {
-    if (element === null)
-      return;
-    this.removeZIndex(element, level);
-    const zIndexEntry = this.levelEntry[level];
-    if (element && zIndexEntry) {
-      if (level === 'base' && this.isBaseLevelOver()) {
-        LogUtility.warn(`The max 'z-index' of base level is '11000', but the current 'z-index' is over, Please optimize the use of 'z-index', otherwise there will be some performance overhead.`);
-        this.increaseTopEntry();
-      }
-      zIndexEntry.elements.push(element);
-      zIndexEntry.zIndex += 1;
-      element.style.zIndex = zIndexEntry.zIndex.toString();
-    }
-  }
-  /**
-   * It removes the element from the level's array of elements, and then decrements the z-index of all
-   * elements after the removed element
-   *
-   * @param {HTMLElement} element - HTMLElement - The element to move
-   * @param {ZIndexLevelType} [level=base] - Level = 'base'
-   * @returns {void}
-   */
-  removeZIndex(element, level = 'base') {
-    if (element === null)
-      return;
-    const zIndexEntry = this.levelEntry[level];
-    if (element && zIndexEntry) {
-      let startAt = -1;
-      zIndexEntry.elements.forEach((e, index) => {
-        if (e === element)
-          startAt = index;
-        if (startAt >= 0 && index > startAt) {
-          e.style.zIndex = `${convertToNumber(e.style.zIndex) - 1}`;
-        }
-      });
-      if (startAt >= 0) {
-        element.style.removeProperty('z-index');
-        zIndexEntry.elements.splice(startAt, 1);
-        zIndexEntry.zIndex -= 1;
-      }
-    }
-  }
-  /**
-   * The function "overrideZIndexBasicValues" updates the base and top basic z-index values based on the
-   * input provided.
-   *
-   * @param {ZIndexBasicValues} input - The input parameter is of type ZIndexBasicValues, which is an
-   * object with two properties: base and top. Both properties are optional and can be either a number or
-   * undefined.
-   */
-  overrideZIndexBasicValues(input) {
-    const basicValues = this.formatZIndexBasicValues(input);
-    if (this.validBasicValues(basicValues)) {
-      this.updateBasicValues(basicValues);
-    }
-  }
-  /**
-   * The function `formatZIndexBasicValues` takes an input object and returns a new object with additional
-   * properties `base` and `top` added to it.
-   *
-   * @param {ZIndexBasicValues} input - The input parameter is of type ZIndexBasicValues. It is an object
-   * that contains properties for base and top.
-   * @returns {ZIndexBasicValues} - an object that combines the properties of the input object `input` with the properties
-   * `base` and `top`. The values of `base` and `top` are taken from the `this.baseBasicZIndex` and
-   * `this.topBasicZIndex` variables respectively.
-   */
-  formatZIndexBasicValues(input) {
-    return Object.assign({
-      base: this.baseBasicZIndex,
-      top: this.topBasicZIndex,
-    }, input);
-  }
-  /**
-   * The function checks if the input values for base and top levels of a z-index are valid.
-   *
-   * @param {ZIndexBasicValues} input - The input parameter is an object of type ZIndexBasicValues. It
-   * has two properties: base and top. Both properties should be of type number.
-   * @returns {boolean} a boolean value.
-   */
-  validBasicValues(input) {
-    if (typeof input.base !== 'number' || typeof input.top !== 'number') {
-      LogUtility.error('Change z-index basic value failed, both base level and top level should be of type number!');
-      return false;
-    }
-    else if (input.base >= input.top) {
-      LogUtility.error('Change z-index basic value failed, the base level should be smaller than the top level!');
-      return false;
-    }
-    return true;
-  }
-  /**
-   * The function updates the z-index values of elements based on the input values.
-   *
-   * @param {ZIndexBasicValues} input - The input parameter is an object of type ZIndexBasicValues. It
-   * has two properties: base and top, both of which are optional and can be of type number.
-   */
-  updateBasicValues(input) {
-    // update basic z-index value
-    this.baseBasicZIndex = input.base;
-    this.topBasicZIndex = input.top;
-    // update base level entry
-    const baseLevel = this.levelEntry.base;
-    baseLevel.elements.forEach((element, index) => {
-      element.style.zIndex = `${this.baseBasicZIndex + index + 1}`;
-    });
-    baseLevel.zIndex = this.baseBasicZIndex + baseLevel.elements.length;
-    // update top level entry
-    const topLevel = this.levelEntry.top;
-    topLevel.elements.forEach((element, index) => {
-      element.style.zIndex = `${this.topBasicZIndex + index + 1}`;
-    });
-    topLevel.zIndex = this.topBasicZIndex + topLevel.elements.length;
-  }
-  /**
-   * It increases the z-index of all the elements in the top entry by 1
-   *
-   * @returns {void}
-   */
-  increaseTopEntry() {
-    const topEntry = this.levelEntry['top'];
-    topEntry.elements.forEach((element) => {
-      element.style.zIndex = `${convertToNumber(element.style.zIndex) + 1}`;
-    });
-    topEntry.zIndex += 1;
-  }
-  /**
-   * If the z-index of the level is over 1000 greater than the basic z-index of the level, then return
-   * true.
-   *
-   * @returns {boolean} - The zIndexEntry.zIndex - this.getBasicZIndexByLevel(level) >= 1000 is being returned.
-   */
-  isBaseLevelOver() {
-    const baseEntry = this.levelEntry['base'];
-    return baseEntry.zIndex >= this.topBasicZIndex;
-  }
-}
-const InternalVegaZIndexManager$1 = new InternalVegaZIndexManager();
-
 const VegaNotifyRuntimeMetricsPayloadDefinition = [
   {
     payloadKey: 'IS_OPEN_METHOD_CALLED',
@@ -422,7 +250,7 @@ const VegaNotifyRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$6 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   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;
@@ -440,7 +268,7 @@ class VegaNotifyController {
           var _a;
           const currentVisible = entries[0].contentRect.height > 0;
           if (!currentVisible && ((_a = this.container) === null || _a === void 0 ? void 0 : _a.classList.contains('hydrated'))) {
-            InternalVegaZIndexManager$1.removeZIndex(this.container, 'top');
+            InternalVegaZIndexManager.removeZIndex(this.container, 'top');
             this.container.remove();
             this.container = null;
           }
@@ -520,7 +348,7 @@ class VegaNotifyController {
     }
     // eslint-disable-next-line no-restricted-globals
     this.container = document.createElement('vega-page-notification-list');
-    InternalVegaZIndexManager$1.setZIndex(this.container, 'top');
+    InternalVegaZIndexManager.setZIndex(this.container, 'top');
     if (getDeviceType() === DeviceType.MOBILE) {
       this.container.classList.add('vega-page-notification-list-bottom');
     }
@@ -533,10 +361,10 @@ class VegaNotifyController {
     return this.container;
   }
 }
-__decorate$5([
+__decorate$6([
   InjectVegaSlimmer()
 ], VegaNotifyController.prototype, "resizeObserverSlimmer", void 0);
-__decorate$5([
+__decorate$6([
   InjectVegaTelemetrySlimmer()
 ], VegaNotifyController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 const VegaNotify = new VegaNotifyController();
@@ -644,7 +472,7 @@ const ThemeManagerRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$5 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -705,88 +533,11 @@ class ThemeManager {
     VegaInternalThemeManager.applyBranding(options);
   }
 }
-__decorate$4([
+__decorate$5([
   InjectVegaTelemetrySlimmer()
 ], ThemeManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 const VegaThemeManager = new ThemeManager();
 
-const VegaDialogRuntimeMetricsPayloadDefinition = [
-  {
-    payloadKey: 'IS_OPEN_METHOD_CALLED',
-    payloadDescription: 'Indicate if the method open of public API VegaDialogController is called',
-    /**
-     * Indicate whether the method is collected when the method been called .
-     *
-     * @param {string} scope - The class name of public api
-     * @param {string} methodName - The method name called by the public api
-     * @returns {boolean} A boolean value
-     */
-    canAccept: (scope, methodName) => scope === 'VegaDialogController' && methodName === 'open',
-    /**
-     * The function checks if the method name is open.
-     *
-     * @returns {boolean} A boolean value
-     */
-    payloadValue: () => {
-      return true;
-    },
-  },
-];
-
-var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
-  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-  return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-var __rest$1 = (undefined && undefined.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-    t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
-};
-/**
- * The dialog controller
- */
-class VegaDialogController {
-  constructor() {
-    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaDialogController, ['open'], VegaDialogRuntimeMetricsPayloadDefinition);
-  }
-  /**
-   *
-   * It creates a new `vega-dialog` element, sets its properties, appends it to the DOM, and opens it
-   *
-   * @param {VegaDialogOption} options - VegaDialogOption
-   * @returns {HTMLVegaDialogElement} The dialog reference.
-   * @vegaVersion 1.24.0
-   */
-  open(options) {
-    // eslint-disable-next-line no-restricted-globals
-    const dialog = document.createElement('vega-dialog');
-    const { isVerticallyCenter, isVerticallyCentered, showCloseButton, size, title, handleClose } = options, dialogProps = __rest$1(options, ["isVerticallyCenter", "isVerticallyCentered", "showCloseButton", "size", "title", "handleClose"]);
-    dialog.id = `vega-dialog-${generateUUID()}`;
-    dialog.dialogTitle = title;
-    dialog.modalProps = { isVerticallyCenter, isVerticallyCentered, showCloseButton, size, handleClose };
-    Object.keys(dialogProps).forEach((propName) => {
-      if (dialogProps[propName] !== undefined) {
-        dialog[propName] = dialogProps[propName];
-      }
-    });
-    // eslint-disable-next-line no-restricted-globals
-    document.body.append(dialog);
-    return dialog;
-  }
-}
-__decorate$3([
-  InjectVegaTelemetrySlimmer()
-], VegaDialogController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
-const VegaDialog = new VegaDialogController();
-
 /* istanbul ignore next */
 const VegaEventManagerRuntimeMetricsPayloadDefinition = [
   {
@@ -1001,7 +752,7 @@ const VegaEventManagerRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate$2 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$4 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1051,7 +802,7 @@ class VegaEventManager {
     return internalVegaEventManager.getEnabledEventIdsByComponent(componentName);
   }
 }
-__decorate$2([
+__decorate$4([
   InjectVegaTelemetrySlimmer()
 ], VegaEventManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 const VegaEventManager$1 = new VegaEventManager();
@@ -1100,7 +851,7 @@ const ZIndexManagerRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$3 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1122,14 +873,82 @@ class VegaZIndexManager {
    * @vegaVersion 2.3.0
    */
   overrideZIndexBasicValues(input) {
-    InternalVegaZIndexManager$1.overrideZIndexBasicValues(input);
+    InternalVegaZIndexManager.overrideZIndexBasicValues(input);
   }
 }
-__decorate$1([
+__decorate$3([
   InjectVegaTelemetrySlimmer()
 ], VegaZIndexManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 const VegaZIndexManager$1 = new VegaZIndexManager();
 
+const WaitForVegaPayloadDefinition = [
+  {
+    payloadKey: 'IS_WAITFORVEGA_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method waitForVega of public API WaitForVegaHandler is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'WaitForVegaHandler' && methodName === 'handle',
+    /**
+     * The function checks if the method name is waitForVega.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+];
+
+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;
+  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;
+};
+/**
+ * WaitForVegaHandler to check whether the vega component has been loaded.
+ */
+class WaitForVegaHandler {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(WaitForVegaHandler, ['handle'], WaitForVegaPayloadDefinition);
+  }
+  /* istanbul ignore next */
+  /**
+   * Wait for all vega elements to be ready.
+   *
+   * The below method is e2e-test covered in @see{module:wait-for-vega-should-work-as-expected}
+   *
+   * @vegaVersion 2.8.0
+   */
+  async handle() {
+    return await Promise.all(
+    // eslint-disable-next-line no-restricted-globals
+    Array.from(document.querySelectorAll('*:not(.hydrated)'))
+      .filter((item) => item.tagName.startsWith('VEGA'))
+      .map((item) => { var _a; return (_a = item.componentOnReady) === null || _a === void 0 ? void 0 : _a.call(item); }));
+  }
+}
+__decorate$2([
+  InjectVegaTelemetrySlimmer()
+], WaitForVegaHandler.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const WaitForVega = new WaitForVegaHandler();
+/* istanbul ignore next */
+/**
+ * Wait for all vega elements to be ready.
+ *
+ * The below method is e2e-test covered in @see{module:wait-for-vega-should-work-as-expected}
+ *
+ * @returns {Promise} A promise that resolves when all vega elements are ready.
+ */
+const waitForVega = async () => {
+  return WaitForVega.handle();
+};
+
 const VegaSkeletonRuntimeMetricsPayloadDefinition = [
   {
     payloadKey: 'IS_LOAD_METHOD_CALLED',
@@ -1193,7 +1012,7 @@ const VegaSkeletonRuntimeMetricsPayloadDefinition = [
   },
 ];
 
-var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+var __decorate$1 = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -1292,61 +1111,194 @@ class VegaSkeletonLoaderController {
   }
 }
 VegaSkeletonLoaderController.LOADER_DATA_SET_KEY = 'vegaSkeletonLoaderKey';
-__decorate([
+__decorate$1([
   InjectVegaTelemetrySlimmer()
 ], VegaSkeletonLoaderController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
 const VegaSkeletonLoader = new VegaSkeletonLoaderController();
 
+const VegaTranslationRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_INIT_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method load of public API VegaTranslation.init is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'TranslationController' && methodName === 'init',
+    /**
+     * The function checks if the method name is loaded.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_CHANGE_LANGUAGE_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method load of public API VegaTranslation.changeLanguage is called',
+    /**
+     * Indicate whether the method is collected when the method been called .
+     *
+     * @param {string} scope - The class name of public api
+     * @param {string} methodName - The method name called by the public api
+     * @returns {boolean} A boolean value
+     */
+    canAccept: (scope, methodName) => scope === 'TranslationController' && methodName === 'changeLanguage',
+    /**
+     * The function checks if the method name is load.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+];
+
+var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 /**
- * Base renderer for Vega Rich Text Editor.
+ * Vega Translation Public API
+ *
+ * @vegaVersion 2.27.0
  */
-class VegaRTEExtensionRenderer extends VegaRTEBaseRenderer {
-  /**
-   * Returns the styles to be injected into the RTE scope.
-   * Override this method to provide custom styles for the custom blocks or nodes.
-   *
-   * @returns {string} - The styles as a string.
-   */
-  injectRTEScopeStyles() {
-    return '';
+class TranslationController {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(TranslationController, ['init', 'changeLanguage'], VegaTranslationRuntimeMetricsPayloadDefinition);
   }
   /**
-   * Renders the given data as a DOM element.
+   * Get current language
    *
-   * @param {RTEBlock | RTENode} renderData - The data to render, which can be a block or a node.
-   * @param {RTERenderContext} rteContext - The rte editor context.
-   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
-   * @returns {VegaRTERenderResult} - The rendered DOM element.
+   * @returns {string} current language
+   * @vegaVersion 2.27.0
    */
-  render(renderData, rteContext, createElement) {
-    const element = this.doRender(createElement, renderData, rteContext);
-    this.fallbackRegisterRef(element, renderData);
-    this.appendChildren(element, renderData, rteContext, createElement);
-    return element;
+  get currentLanguage() {
+    return VegaInternalTranslation.currentLanguage;
   }
   /**
-   * Register the reference of the element in the rendering registry.
+   * Initializes the translation controller with provided resources and language.
    *
-   * @param {RTEBlock | RTENode} renderData - The data to register with the element.
-   * @returns {VegaRTEUseRef} - The function to register the element.
+   * @param {VegaTranslationConfig} config - Configuration object containing resources and initial language.
+   * @vegaVersion 2.27.0
    */
-  useRef(renderData) {
-    renderData[VegaRTEExtensionRenderer.REGISTER_REF_FLAG] = true;
-    return function (element) {
-      if (element) {
-        stateEntityRenderingRegistry.register(element, renderData);
-      }
-    };
+  init(config) {
+    VegaInternalTranslation.init(config);
   }
   /**
-   * Get a registered renderer by its key.
+   * Changes the current language if it exists in the resources.
    *
-   * @param {string} key - The key of the renderer.
-   * @returns {Nullable<BaseRenderer>} - The registered renderer or null if not found.
+   * @param {string} language - The language code to change to.
+   * @vegaVersion 2.27.0
+   */
+  changeLanguage(language) {
+    VegaInternalTranslation.changeLanguage(language);
+  }
+}
+__decorate([
+  InjectVegaTelemetrySlimmer()
+], TranslationController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaTranslation = new TranslationController();
+
+/**
+ * Manager for storing and retrieving the extension context associated with each rich text editor host element.
+ *
+ * @todo Currently, there are three types of contexts in RTE: toolbar render context, extension context, and DTO render context. The second and third types are bound to the extension context via host props. We are considering optimizing these three types of contexts to make the program more flexible and easier to maintain.
+ */
+class RTEExtensionContextManager {
+  constructor() {
+    this.extensionContextMap = new WeakMap();
+  }
+  /**
+   * Store the extension context for the given rich text editor host element.
+   *
+   * @param {RTEExtensionContext} context - The extension context to store.
+   */
+  setExtensionContext(context) {
+    if (context && context.host) {
+      this.extensionContextMap.set(context.host, context);
+    }
+  }
+  /**
+   * 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 {Nullable<HTMLVegaRichTextEditorElement>} el - The host rich text editor element.
+   * @returns {Nullable<RTEExtensionContext>} - The extension context associated with the host.
+   */
+  getExtensionContext(el) {
+    return el ? this.extensionContextMap.get(el) : null;
+  }
+}
+const rteExtensionContextManager = new RTEExtensionContextManager();
+
+/**
+ * Base renderer for Vega Rich Text Editor.
+ */
+class VegaRTEExtensionRenderer extends VegaRTEBaseRenderer {
+  /**
+   * Returns the styles to be injected into the RTE scope.
+   * Override this method to provide custom styles for the custom blocks or nodes.
+   *
+   * @returns {string} - The styles as a string.
+   */
+  injectRTEScopeStyles() {
+    return '';
+  }
+  /**
+   * Renders the given data as a DOM element.
+   *
+   * @param {RTEBlock | RTENode} renderData - The data to render, which can be a block or a node.
+   * @param {RTERenderContext} rteContext - The rte editor context.
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   * @returns {VegaRTERenderResult} - The rendered DOM element.
+   */
+  render(renderData, rteContext, createElement) {
+    const element = this.doRender(createElement, renderData, rteContext);
+    this.fallbackRegisterRef(element, renderData);
+    this.appendChildren(element, renderData, rteContext, createElement);
+    return element;
+  }
+  /**
+   * Register the reference of the element in the rendering registry.
+   *
+   * @param {RTEBlock | RTENode} renderData - The data to register with the element.
+   * @returns {VegaRTEUseRef} - The function to register the element.
+   */
+  useRef(renderData) {
+    renderData[VegaRTEExtensionRenderer.REGISTER_REF_FLAG] = true;
+    return function (element) {
+      if (element) {
+        stateEntityRenderingRegistry.register(element, renderData);
+      }
+    };
+  }
+  /**
+   * Get a registered renderer by its key.
+   *
+   * @param {string} key - The key of the renderer.
+   * @returns {Nullable<BaseRenderer>} - The registered renderer or null if not found.
    */
   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
    *
@@ -1435,6 +1387,7 @@ class VegaRTEExtension {
    */
   initialExtension(context) {
     this.extensionContext = context;
+    rteExtensionContextManager.setExtensionContext(context);
   }
   /**
    * Collect custom styles for the extension renderers.
@@ -1559,6 +1512,16 @@ 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.
    *
@@ -1572,7 +1535,10 @@ 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);
   }
   /**
@@ -1749,17 +1715,8 @@ class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
   constructor(tokenList) {
     super();
     this.tokenList = [];
-    this.extensionContext = null;
     this.tokenList = tokenList;
   }
-  /**
-   * Sets the RTE extension context.
-   *
-   * @param {RTEExtensionContext} context - The context of the RTE extension.
-   */
-  injectExtensionContext(context) {
-    this.extensionContext = context;
-  }
   /**
    * Renders the token toolbar button.
    *
@@ -1776,11 +1733,13 @@ class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
   /**
    * Checks if the token toolbar button is disabled.
    *
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context for the editor.
    * @returns {boolean} True if the button is 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 [startNode] = getSelectedNodes();
       return startNode
         ? host.disabled ||
@@ -1811,16 +1770,19 @@ class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
       const action = new InsertTokenNodeAction(rteRange, token);
       startNode.parent.apply(action);
       if (action.actionHandleResult) {
-        this.flushEditorUI();
+        this.flushEditorUI(editorContext);
       }
     }
   }
   /**
    * Refreshes the editor UI.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
    */
-  flushEditorUI() {
-    if (this.extensionContext) {
-      const { host, flushValue } = this.extensionContext;
+  flushEditorUI(editorContext) {
+    const context = this.getExtensionContext(editorContext.host);
+    if (context) {
+      const { host, flushValue } = context;
       flushValue(host.value);
     }
   }
@@ -1886,10 +1848,6 @@ class RTETokenNode extends RTETextNode {
  * Token node renderer for the rich text editor.
  */
 class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
-  constructor() {
-    super(...arguments);
-    this.extensionContext = null;
-  }
   /**
    * Renders the token node as a DOM element.
    *
@@ -1905,18 +1863,10 @@ 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.
    *
@@ -1928,13 +1878,15 @@ 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));
     }
   }
   /**
@@ -1954,138 +1906,206 @@ class RTETokenNodeRenderer extends VegaRTEExtensionRenderer {
 }
 
 /**
- * Insert a new children to the nearest position of the parent container
- *
- * @example parent.apply(new InsertNodeToNearestRoot(rteRange, nodeToBeInserted))
+ * Toolbar button renderer for language selection in Vega Rich Text Editor.
  */
-class InsertNodeToNearestRootAction extends ModifyContentAction {
-  constructor(rteRange, nodeToBeInserted) {
+class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  constructor(languageList, languageChangeCallback, selectedLanguage) {
     super();
-    this.type = ModifyContentActionType.INSERT_NODE_TO_NEAREST_ROOT;
-    this.rteRange = rteRange;
-    this.nodeToBeInserted = nodeToBeInserted;
+    this.languageList = [];
+    this.selectedLanguage = 'Select Language';
+    this.labelRef = null;
+    /**
+     * Handles the language selection event.
+     *
+     * @param {string} itemKey - The key of the selected language item.
+     */
+    this.handleDropdownClick = (itemKey) => {
+      this.setSelectedLanguage(itemKey);
+      if (typeof this.languageChangeCallback === 'function') {
+        this.languageChangeCallback(this.selectedLanguage);
+      }
+    };
+    this.languageList = languageList;
+    this.selectedLanguage = selectedLanguage;
+    this.languageChangeCallback = languageChangeCallback;
   }
-}
-
-/**
- * Strategy to handle the insertion of a token node into the nearest root block.
- */
-class InsertTokenNodeStrategy extends ActionHandleStrategy {
   /**
-   * @inheritDoc
+   * Public method to set the selected language.
+   *
+   * @param {string} language The language key to set as selected.
    */
-  handleAction(action, block) {
-    const { rteRange, token } = action;
-    if (rteRange && rteRange.startNode) {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      const { key, label, customAttrs = { wrapped: 'true' } } = token;
-      const tokenNode = new RTETokenNode(generateUUID(), key, label, block);
-      tokenNode.annotationMap.set('CUSTOM_ATTRIBUTE', new CustomAttributeAnnotation(customAttrs));
-      block.apply(new InsertNodeToNearestRootAction(rteRange, tokenNode));
-      action.actionHandleResult = true;
+  setSelectedLanguage(language) {
+    this.selectedLanguage = language;
+    if (this.labelRef) {
+      this.labelRef.textContent = this.getLanguageLabelByKey(language);
     }
   }
-}
-
-var __rest = (undefined && undefined.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-    t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
-};
-/**
- * Strategy to convert <span class="token" token-key="...">...</span> to a token node
- */
-class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
   /**
-   * @inheritDoc
+   * The source edit mode does not affect the language button visibility.
+   *
+   * @returns {boolean} True if the button is hidden, false otherwise.
    */
-  canHandle(elementsArray, currentIndex) {
-    const element = elementsArray[currentIndex];
-    if (element.nodeName === 'SPAN' &&
-      element.classList.contains('token') &&
-      element.hasAttribute('token-key')) {
-      return 1;
-    }
-    return 0;
+  isHidden() {
+    return false;
   }
   /**
    * @inheritDoc
    */
-  handle(elementsArray) {
-    const element = elementsArray[0];
-    const tokenKey = element.getAttribute('token-key');
-    const text = element.textContent;
-    const annotations = htmlElementToAnnotationGenerator.generate(RTETextNode, element);
-    // Exclude customAttribute and customClass from annotations
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { customAttribute, customClass } = annotations, restAnnotations = __rest(annotations, ["customAttribute", "customClass"]);
-    return {
-      id: generateUUID(),
-      type: 'token',
-      token: tokenKey,
-      text,
-      annotations: Object.assign(Object.assign({}, restAnnotations), { customAttribute: this.createCustomAttrs(customAttribute) }),
-    };
+  render(createElement, editorContext) {
+    return this.renderDropdown(createElement, editorContext, { source: this.languageList }, [
+      this.renderButton(createElement, editorContext, {
+        label: this.getLanguageLabelByKey(this.selectedLanguage),
+        showArrowIcon: true,
+      }),
+    ]);
   }
   /**
+   * Override to render the button label with custom behavior.
+   *
    * @inheritDoc
    */
-  // eslint-disable-next-line @typescript-eslint/no-empty-function
-  appendChildBlocks() { }
+  renderButtonLabel(h, editorContext, label) {
+    const isDisabled = this.isDisabled(editorContext);
+    return h('vega-font', {
+      variant: 'font-field-label-sm',
+      color: isDisabled ? 'text-disabled' : 'text-primary',
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (el) => (this.labelRef = el),
+    }, label);
+  }
+  /* istanbul ignore next */
   /**
-   * @inheritDoc
+   * Handles the button click event. No need this method for language button.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
    */
-  shouldProceedToElementChildren() {
-    return false;
+  handleButtonClick(editorContext) {
   }
   /**
-   * Creates custom attributes record from the given custom attribute object, clean some fixed attributes.
+   * Gets the label of a language by its key.
    *
-   * @param {Record<string, string>} customAttribute - The custom attribute object
-   * @returns {Record<string, string>} The processed custom attributes
+   * @param {string} key The language key to look up.
+   * @returns {string} The label of the language, or the key if not found.
    */
-  createCustomAttrs(customAttribute) {
-    const result = Object.assign(Object.assign({}, customAttribute), { 'contenteditable': null, 'template-token-key': null, 'token-key': null, 'wrapped': customAttribute.wrapped === 'false' ? 'false' : 'true' });
-    return cleanObject(result);
+  getLanguageLabelByKey(key) {
+    const language = this.getListItemByKey(this.languageList, key);
+    return language.label;
   }
 }
 
-const spanToTokenNodeStrategy = new SpanToTokenNodeStrategy();
 /**
- * Vega Rich Text Editor Token Extension
+ * Language extension for Vega Rich Text Editor.
+ * This extension allows users to switch between different languages and maintain separate content for each language.
  */
-class VegaRTETokenExtension extends VegaRTEExtension {
-  constructor(tokenList = []) {
+class VegaRTELanguageExtension extends VegaRTEExtension {
+  constructor(languageList, languagesState) {
     super();
-    this.tokenRenderer = new RTETokenNodeRenderer();
-    this.registerNode('token', RTETokenNode);
-    this.registerRenderer('token', this.tokenRenderer);
-    this.tokenToolbarButtonRenderer = new RTETokenToolbarButtonRenderer(tokenList);
-    this.registerToolbarButtonRenderer('token', this.tokenToolbarButtonRenderer);
-    this.registerElementToNodeDTOClassStrategy(spanToTokenNodeStrategy);
+    this.languageState = {
+      selectedLanguage: '',
+      contentMap: {},
+    };
+    /**
+     * Listener for language change events from the toolbar button renderer.
+     *
+     * @param {string} selectedLanguage - The newly selected language.
+     */
+    this.languageChangeCallBack = (selectedLanguage) => {
+      const previousLanguage = this.languageState.selectedLanguage;
+      if (this.extensionContext && previousLanguage) {
+        this.languageState.contentMap[previousLanguage] = this.getRTELatestValue(this.extensionContext.host);
+      }
+      this.languageState.selectedLanguage = selectedLanguage;
+      this.applyLanguageContent(selectedLanguage, this.languageState.contentMap);
+    };
+    if (languagesState) {
+      this.languageState = Object.assign(Object.assign({}, this.languageState), languagesState);
+    }
+    if (!this.languageState.selectedLanguage && languageList.length > 0) {
+      this.languageState.selectedLanguage = languageList[0].key;
+    }
+    this.languageToolbarButtonRenderer = new RTELanguageToolbarButtonRenderer(languageList, this.languageChangeCallBack, this.languageState.selectedLanguage);
+    this.registerToolbarButtonRenderer('languages', this.languageToolbarButtonRenderer);
   }
   /**
-   * @inheritDoc
+   * Initializes the language extension.
+   * Applies the content for the selected language upon initialization.
+   *
+   * @param {RTEExtensionContext} context The extension context.
    */
   initialExtension(context) {
     super.initialExtension(context);
-    this.tokenRenderer.injectExtensionContext(context);
-    if (this.tokenToolbarButtonRenderer) {
-      this.tokenToolbarButtonRenderer.injectExtensionContext(context);
+    const { selectedLanguage, contentMap } = this.languageState;
+    if (contentMap && contentMap[selectedLanguage]) {
+      this.applyLanguageContent(this.languageState.selectedLanguage, this.languageState.contentMap);
+    }
+  }
+  /**
+   * Invoked to set the language extension state. The method used if the state can not be provide when the editor is initialized.
+   *
+   * @param {RTELanguageExtensionState} state The language extension state to set.
+   */
+  setState(state) {
+    const { selectedLanguage, contentMap } = state;
+    this.languageToolbarButtonRenderer.setSelectedLanguage(selectedLanguage);
+    this.languageState.selectedLanguage = selectedLanguage;
+    this.languageState.contentMap = Object.assign({}, contentMap);
+    this.applyLanguageContent(selectedLanguage, contentMap);
+  }
+  /**
+   * Invoked to get the language extension state.
+   *
+   * @returns {RTELanguageExtensionState} The current language extension state.
+   */
+  getState() {
+    const { selectedLanguage, contentMap } = this.languageState;
+    if (this.extensionContext) {
+      contentMap[selectedLanguage] = this.getRTELatestValue(this.extensionContext.host);
     }
+    return this.languageState;
+  }
+  /**
+   * Applies the content for the selected language.
+   *
+   * @param {string} selectedLanguage - The newly selected language.
+   * @param {RTELanguageExtensionState['contentMap']} contentMap - The content map for all languages.
+   */
+  applyLanguageContent(selectedLanguage, contentMap) {
+    if (this.extensionContext && contentMap) {
+      let content = contentMap[selectedLanguage];
+      const { host, flushValue } = this.extensionContext;
+      if (content) {
+        content =
+          content instanceof VegaRTEContent
+            ? content
+            : VegaRTEContent.fromJSON(content, host.sourceEditConfig);
+      }
+      else {
+        content = VegaRTEContent.createEmptyContent();
+      }
+      if (host.value !== content) {
+        flushValue(content, true);
+      }
+    }
+  }
+  /**
+   * Get the RTE latest value. The value is from the code block when in source edit mode; otherwise, it's from the host value.
+   *
+   * @param {HTMLElement} host - The host element of the rich text editor.
+   * @returns {VegaRTEContent} - The content.
+   */
+  getRTELatestValue(host) {
+    let result = host.value;
+    if (this.extensionContext && this.extensionContext.isSourceEditMode() && host.shadowRoot) {
+      const codeBlock = host.shadowRoot.querySelector('.source-view-container vega-code-block');
+      if (codeBlock) {
+        result = VegaRTEContent.fromHtml(codeBlock.value.code, {
+          autoMatchFormat: host.sourceEditConfig.autoMatchFormat,
+        });
+      }
+    }
+    return result;
   }
 }
-(() => {
-  const insertTokenNodeStrategy = new InsertTokenNodeStrategy();
-  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
-  VegaRTEExtension.registerActionHandleStrategy(RTEListItemBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
-})();
 
 const INSERT_FUNCTION_BLOCK = 'INSERT_FUNCTION_BLOCK';
 /**
@@ -2434,14 +2454,6 @@ class RTELogicControlBlock extends RTEBlock {
  * Function toolbar button renderer class.
  */
 class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
-  /**
-   * Injects the extension context
-   *
-   * @param {RTEExtensionContext} context - extension context
-   */
-  injectExtensionContext(context) {
-    this.extensionContext = context;
-  }
   /**
    * @inheritDoc
    */
@@ -2457,11 +2469,13 @@ 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) {
@@ -2480,19 +2494,25 @@ 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));
+        }
+      }
     }
   }
 }
@@ -2871,17 +2891,6 @@ 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
    */
@@ -2905,4 +2914,128 @@ class VegaRTEFunctionExtension extends VegaRTEExtension {
   VegaRTEExtension.registerActionHandlerInterceptor(RTETextBlock.name, ModifyContentActionType.PASTE_CONTENT, new PreventPasteContentInterceptor());
 })();
 
-export { ActionHandlerInterceptor as A, InsertNodeToNearestRootAction as I, RTETokenToolbarButtonRenderer as R, VegaLoader as V, VegaNotify as a, VegaThemeManager as b, VegaDialog as c, VegaEventManager$1 as d, VegaZIndexManager$1 as e, VegaSkeletonLoader as f, VegaRTETokenExtension as g, VegaRTEFunctionExtension as h, VegaRTEToolbarButtonRenderer as i, VegaRTEExtension as j, VegaRTEExtensionRenderer as k, RTETokenNode as l, RTETokenNodeRenderer as m, InternalVegaZIndexManager$1 as n };
+/**
+ * Insert a new children to the nearest position of the parent container
+ *
+ * @example parent.apply(new InsertNodeToNearestRoot(rteRange, nodeToBeInserted))
+ */
+class InsertNodeToNearestRootAction extends ModifyContentAction {
+  constructor(rteRange, nodeToBeInserted) {
+    super();
+    this.type = ModifyContentActionType.INSERT_NODE_TO_NEAREST_ROOT;
+    this.rteRange = rteRange;
+    this.nodeToBeInserted = nodeToBeInserted;
+  }
+}
+
+/**
+ * Strategy to handle the insertion of a token node into the nearest root block.
+ */
+class InsertTokenNodeStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, block) {
+    const { rteRange, token } = action;
+    if (rteRange && rteRange.startNode) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { key, label, customAttrs = { wrapped: 'true' } } = token;
+      const tokenNode = new RTETokenNode(generateUUID(), key, label, block);
+      tokenNode.annotationMap.set('CUSTOM_ATTRIBUTE', new CustomAttributeAnnotation(customAttrs));
+      block.apply(new InsertNodeToNearestRootAction(rteRange, tokenNode));
+      action.actionHandleResult = true;
+    }
+  }
+}
+
+var __rest = (undefined && undefined.__rest) || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+    t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+/**
+ * Strategy to convert <span class="token" token-key="...">...</span> to a token node
+ */
+class SpanToTokenNodeStrategy extends ElementToDTOStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    if (element.nodeName === 'SPAN' &&
+      element.classList.contains('token') &&
+      element.hasAttribute('token-key')) {
+      return 1;
+    }
+    return 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    const tokenKey = element.getAttribute('token-key');
+    const text = element.textContent;
+    const annotations = htmlElementToAnnotationGenerator.generate(RTETextNode, element);
+    // Exclude customAttribute and customClass from annotations
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const { customAttribute, customClass } = annotations, restAnnotations = __rest(annotations, ["customAttribute", "customClass"]);
+    return {
+      id: generateUUID(),
+      type: 'token',
+      token: tokenKey,
+      text,
+      annotations: Object.assign(Object.assign({}, restAnnotations), { customAttribute: this.createCustomAttrs(customAttribute) }),
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Creates custom attributes record from the given custom attribute object, clean some fixed attributes.
+   *
+   * @param {Record<string, string>} customAttribute - The custom attribute object
+   * @returns {Record<string, string>} The processed custom attributes
+   */
+  createCustomAttrs(customAttribute) {
+    const result = Object.assign(Object.assign({}, customAttribute), { 'contenteditable': null, 'template-token-key': null, 'token-key': null, 'wrapped': customAttribute.wrapped === 'false' ? 'false' : 'true' });
+    return cleanObject(result);
+  }
+}
+
+const spanToTokenNodeStrategy = new SpanToTokenNodeStrategy();
+/**
+ * Vega Rich Text Editor Token Extension
+ */
+class VegaRTETokenExtension extends VegaRTEExtension {
+  constructor(tokenList = []) {
+    super();
+    this.tokenRenderer = new RTETokenNodeRenderer();
+    this.registerNode('token', RTETokenNode);
+    this.registerRenderer('token', this.tokenRenderer);
+    this.tokenToolbarButtonRenderer = new RTETokenToolbarButtonRenderer(tokenList);
+    this.registerToolbarButtonRenderer('token', this.tokenToolbarButtonRenderer);
+    this.registerElementToNodeDTOClassStrategy(spanToTokenNodeStrategy);
+  }
+}
+(() => {
+  const insertTokenNodeStrategy = new InsertTokenNodeStrategy();
+  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEListItemBlock.name, 'INSERT_TOKEN_NODE', insertTokenNodeStrategy);
+})();
+
+export { ActionHandlerInterceptor as A, InsertNodeToNearestRootAction as I, RTETokenToolbarButtonRenderer as R, VegaLoader as V, VegaNotify as a, VegaThemeManager as b, VegaEventManager$1 as c, VegaZIndexManager$1 as d, VegaSkeletonLoader as e, VegaTranslation as f, VegaRTETokenExtension as g, VegaRTELanguageExtension as h, VegaRTEFunctionExtension as i, VegaRTEExtension as j, VegaRTEExtensionRenderer as k, VegaRTEToolbarButtonRenderer as l, RTETokenNode as m, RTETokenNodeRenderer as n, RTELanguageToolbarButtonRenderer as o, waitForVega as w };