@heartlandone/vega 2.71.0-RTE-table-preview → 2.72.0-RTE-table-preview

package/dist/esm/table-extension-164b0d6c.js

@@ -0,0 +1,4816 @@
+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, f as findParent } from './ui-bb99c0c2.js';
+import { L as LogUtility, I as InjectVegaSlimmer } from './global-slimmer-registry-17c4efd4.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-4f51b17c.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, e as InsertChildrenBeforeStrategy, P as PasteContentStrategy } from './dto-renderer-manager-23784148.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, B as BlockAnnotation, l as RemoveChildrenAction } from './code-block-3d3a9030.js';
+import { i as isNonNullable } from './type-guard-b48aec98.js';
+import './translation-96e5debd.js';
+import { a as VegaInternalIconManager } from './internal-icon-manager-f0486245.js';
+import { R as RTETableExtensionAnnotationTypeEnum, S as SettingEventHandler, T as TableSettingType, a as RowOperationEventHandler, C as ColumnOperationEventHandler, r as remoteInvocationRegistry, b as RTETableBlock, g as generateTableBody, c as RTETableCellBlock, d as RTETableRowBlock, I as InsertTableRowDirection, e as RTETableBodyBlock, f as RTETableHeadBlock, h as getParentBlockByType, i as RTETableHeadCellBlock, j as TableColumnStrategy, k as getAllTableRows, l as InsertTableColumnDirection, m as getDefaultCellBlockTemplate, n as getFirstNode, o as INSERT_TABLE_ROW, D as DELETE_TABLE_ROW, p as TOGGLE_HEADER_ROW, q as INSERT_TABLE_COLUMN, s as DELETE_TABLE_COLUMN, t as TOGGLE_HEADER_TABLE_COLUMN, u as ToggleHeaderTableColumnStrategy, v as SELECT_TABLE_COLUMN } from './column-operation-4a93bf52.js';
+import { c as cleanObject } from './object-66c37948.js';
+import { V as VegaRTEBaseRenderer } from './base-renderer-101f6d04.js';
+import { D as DomNodeSubjectObserverFactory, V as VegaDropdownClick, a as VegaClick, d as domNodeSubjectFactory, b as VegaPopoverShow, c as VegaPopoverHide } from './dom-node-subject-observer-factory-f81f215f.js';
+import { V as VegaInternalPopoverUpdateTarget } from './vega-internal-event-id-54ce7562.js';
+import { d as debounce } from './timer-9321173b.js';
+import { t as tryGetDocument } from './try-get-document-bef0f526.js';
+
+const VegaLoaderRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_LOAD_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method load of public API VegaLoaderController 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 === 'VegaLoaderController' && methodName === 'load',
+    /**
+     * The function checks if the method name is load.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_CLOSE_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method close of public API VegaLoaderController 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 === 'VegaLoaderController' && methodName === 'close',
+    /**
+     * The function checks if the method name is close.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+];
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Vega loader controller to control the loading indicator
+ */
+class VegaLoaderController {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaLoaderController, ['load', 'close'], VegaLoaderRuntimeMetricsPayloadDefinition);
+  }
+  /**
+   * Create a loading indicator and append it to the container
+   *
+   * @param {VegaLoaderIndicatorOptions} options - VegaLoaderOptions = {} options of the method
+   * @returns {Nullable<string>} The uuid of the loader.
+   * @vegaVersion 1.16.0
+   */
+  load(options = {}) {
+    let containerSelector = options.containerSelector || 'body';
+    let containerElement = document.querySelector(containerSelector);
+    if (containerElement &&
+      VegaLoaderController.SPECIAL_ELEMENT_TO_WRAP_FULL_BODY.includes(containerElement.tagName)) {
+      containerSelector = 'body';
+      containerElement = document.querySelector('body');
+    }
+    if (!containerElement) {
+      LogUtility.error('Container is not found by selector: ', containerSelector);
+      return null;
+    }
+    const loadingIndicator = this.createLoadingIndicator(options.indicatorOptions);
+    const loader = this.createLoader(containerSelector);
+    loader.append(loadingIndicator);
+    return this.appendLoader(loader, containerElement);
+  }
+  /**
+   * Close the loader by id
+   *
+   * @param {string} id - The id of the loader.
+   * @vegaVersion 1.16.0
+   */
+  close(id) {
+    const loader = this.findLoader(id);
+    if (loader) {
+      if (loader.dataset.container) {
+        const container = document.querySelector(loader.dataset.container);
+        if (container) {
+          if (container.dataset['vegaLoaderOriginPosition']) {
+            container.style.position = container.dataset['vegaLoaderOriginPosition'];
+          }
+        }
+      }
+      loader.remove();
+    }
+  }
+  /**
+   * Find loader by id, if the id include '>>>' it will find inside shadowRoot
+   *
+   * @param {string} id - The id of the loader.
+   * @returns {Nullable<HTMLElement>} The loader found by id.
+   */
+  findLoader(id) {
+    var _a, _b;
+    let loader;
+    if (id.includes('>>>')) {
+      const [containerSelector, loaderSelector] = id.split('>>>');
+      loader = (_b = (_a = document.querySelector(containerSelector)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.getElementById(loaderSelector);
+    }
+    else {
+      loader = document.getElementById(id);
+    }
+    return loader;
+  }
+  /**
+   * Create a loader for loading indicator
+   *
+   * @param {string} containerSelector The container which you want to append
+   * @returns {HTMLElement} a wrapper for loader
+   */
+  createLoader(containerSelector) {
+    const loader = document.createElement('vega-loader-wrapper');
+    loader.className = arrayToClassString([
+      containerSelector === 'body' ? 'fixed-wrapper' : 'absolute-wrapper',
+    ]);
+    loader.dataset['container'] = containerSelector;
+    loader.id = `vega-loader-${generateUUID()}`;
+    return loader;
+  }
+  /**
+   * Create a loading indicator
+   *
+   * @param {VegaLoaderIndicatorOptions} indicatorOptions the props of vega loading indicator
+   * @returns {HTMLVegaLoadingIndicatorElement} vega-loading-indicator component template
+   */
+  createLoadingIndicator(indicatorOptions = {}) {
+    const loadingIndicator = document.createElement('vega-loading-indicator');
+    Object.assign(loadingIndicator, indicatorOptions);
+    return loadingIndicator;
+  }
+  /**
+   * Append the loader to the container
+   *
+   * @param {HTMLElement} loader A loader with loading indicator
+   * @param {string} containerElement The container which you want to append the loader to
+   * @returns {string} The uuid of the loader.
+   */
+  appendLoader(loader, containerElement) {
+    containerElement.dataset['vegaLoaderOriginPosition'] = containerElement.style.position;
+    containerElement.style.position = 'relative';
+    if (containerElement.shadowRoot) {
+      containerElement.shadowRoot.append(loader);
+      return `${loader.dataset['container']}>>>${loader.id}`;
+    }
+    else {
+      containerElement.append(loader);
+      return loader.id;
+    }
+  }
+}
+VegaLoaderController.SPECIAL_ELEMENT_TO_WRAP_FULL_BODY = ['VEGA-MODAL'];
+__decorate$6([
+  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',
+    payloadDescription: 'Indicate if the method open of public API VegaNotifyController 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 === 'VegaNotifyController' && methodName === 'open',
+    /**
+     * The function checks if the method name is open.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_CLOSE_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method close of public API VegaNotifyController 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 === 'VegaNotifyController' && methodName === 'close',
+    /**
+     * The function checks if the method name is close.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_CLOSEALL_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method closeAll of public API VegaNotifyController 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 === 'VegaNotifyController' && methodName === 'closeAll',
+    /**
+     * The function checks if the method name is closeAll.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+];
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The page notification controller
+ */
+class VegaNotifyController {
+  constructor() {
+    this.resizeObserverSlimmer = createDynamicSlimmer(VegaNotifyController, PageResizeObserverSlimmer, [], [{ mapFrom: 'connectResizeObserver', mapTo: 'connectResizeObserver' }], [
+      {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        callback: (entries) => {
+          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');
+            this.container.remove();
+            this.container = null;
+          }
+        },
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        target: () => this.container,
+      },
+    ]);
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaNotifyController, ['open', 'close', 'closeAll'], VegaNotifyRuntimeMetricsPayloadDefinition);
+  }
+  /**
+   * It creates a new notification element, adds it to the container, and returns the notification's ID
+   *
+   * @param {VegaNotifyOption} options - VegaNotifyProps
+   * @returns {Promise<string>} The ID of the notification.
+   * @vegaVersion 1.17.0
+   */
+  async open(options) {
+    const pageNotification = this.createPageNotification(options);
+    this.getContainer().append(pageNotification);
+    return pageNotification.id;
+  }
+  /**
+   * It closes all notifications
+   *
+   * @vegaVersion 1.17.0
+   */
+  async closeAll() {
+    this.container &&
+      Array.from(this.container.children).forEach((item) => {
+        void item.close();
+      });
+  }
+  /**
+   * It closes the notification with the given id
+   *
+   * @param {string} id - The id of the notification to close.
+   * @vegaVersion 1.17.0
+   */
+  async close(id) {
+    // eslint-disable-next-line no-restricted-globals
+    await document.getElementById(id).close();
+  }
+  /**
+   * The function "connectResizeObserver" is used to connect a resize observer.
+   *
+   * @vegaVersion 1.17.0
+   */
+  connectResizeObserver() {
+  }
+  /**
+   * It creates a new page notification element, sets its properties, and returns it
+   *
+   * @param {VegaNotifyOption} props - VegaNotifyProps - the properties of the notification
+   * @returns {HTMLVegaPageNotificationElement} A function that takes in a props object and returns a pageNotification element.
+   */
+  createPageNotification(props) {
+    const pageNotification = 
+    // eslint-disable-next-line no-restricted-globals
+    document.createElement('vega-page-notification');
+    Object.keys(props).forEach((propName) => {
+      props[propName] !== undefined && (pageNotification[propName] = props[propName]);
+    });
+    pageNotification.style.marginBottom = getDeviceType() === DeviceType.MOBILE ? '12px' : '16px';
+    pageNotification.id = `vega-page-notification-${generateUUID()}`;
+    return pageNotification;
+  }
+  /**
+   * It creates a div element, sets its z-index to be on top of everything else, adds a class to it, and
+   * then adds it to the body of the page
+   *
+   * @returns {HTMLVegaPageNotificationListElement} The container is being returned.
+   */
+  getContainer() {
+    if (this.container) {
+      return this.container;
+    }
+    // eslint-disable-next-line no-restricted-globals
+    this.container = document.createElement('vega-page-notification-list');
+    InternalVegaZIndexManager$1.setZIndex(this.container, 'top');
+    if (getDeviceType() === DeviceType.MOBILE) {
+      this.container.classList.add('vega-page-notification-list-bottom');
+    }
+    else {
+      this.container.classList.add('vega-page-notification-list-topRight');
+    }
+    // eslint-disable-next-line no-restricted-globals
+    document.body.append(this.container);
+    this.connectResizeObserver();
+    return this.container;
+  }
+}
+__decorate$5([
+  InjectVegaSlimmer()
+], VegaNotifyController.prototype, "resizeObserverSlimmer", void 0);
+__decorate$5([
+  InjectVegaTelemetrySlimmer()
+], VegaNotifyController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaNotify = new VegaNotifyController();
+
+const ThemeManagerRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_OVERRIDECOLORS_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method overrideColors of public API ThemeManager 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 === 'ThemeManager' && methodName === 'overrideColors',
+    /**
+     * The function checks if the method is be called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_RESET_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method reset of public API ThemeManager 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 === 'ThemeManager' && methodName === 'reset',
+    /**
+     * The function checks if the method is be called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_TOGGLEDARKMODE_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method toggleDarkMode of public API ThemeManager 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 === 'ThemeManager' && methodName === 'toggleDarkMode',
+    /**
+     * The function checks if the method is be called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_ISDARKMODE_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method isDarkMode of public API ThemeManager 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 === 'ThemeManager' && methodName === 'isDarkMode',
+    /**
+     * The function checks if the method is be called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_APPLY_BRANDING_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method applyBranding of public API ThemeManager 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 === 'ThemeManager' && methodName === 'applyBranding',
+    /**
+     * The function checks if the method is be called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+];
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * Vega components theme manager
+ */
+class ThemeManager {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(ThemeManager, ['overrideColors', 'reset', 'toggleDarkMode', 'isDarkMode', 'applyBranding'], ThemeManagerRuntimeMetricsPayloadDefinition);
+  }
+  /**
+   * It takes the colors you passed in, parses them into the correct format, and then applies them to the theme
+   *
+   * @param {VegaThemeOverrideColors} overrideColors - OverrideColors - This is the object that you pass to the function.
+   * @vegaVersion 1.20.0
+   */
+  async overrideColors(overrideColors) {
+    void VegaInternalThemeManager.overrideColors(overrideColors);
+  }
+  /**
+   * It removes all the custom override theme styles from the DOM
+   *
+   * @vegaVersion 1.20.0
+   */
+  async reset() {
+    void VegaInternalThemeManager.reset();
+  }
+  /**
+   * This function toggles the dark mode of a webpage by adding or removing a 'dark' class to the HTML element.
+   *
+   * @param {boolean | undefined} darkMode - A boolean or undefined value that determines whether to enable or disable dark mode.
+   * If it is true, dark mode is enabled.
+   * If it is false, dark mode is disabled.
+   * @vegaVersion 1.32.0
+   */
+  toggleDarkMode(darkMode) {
+    VegaInternalThemeManager.toggleDarkMode(darkMode);
+  }
+  /**
+   * The function checks if the HTML element has a class of "dark" and returns a boolean value accordingly.
+   *
+   * @returns {boolean} A boolean value indicating whether the HTML element has a class of "dark", which is
+   * typically used to indicate that the website is in dark mode.
+   * @vegaVersion 1.32.0
+   */
+  isDarkMode() {
+    return VegaInternalThemeManager.isDarkMode();
+  }
+  /**
+   * This function switches the Vega theme to a brand theme based on the provided options.
+   *
+   * @param {BrandOptions} options - The options includes 'gp', 'genius' and 'heartland' options
+   * @vegaVersion 2.47.0
+   */
+  applyBranding(options) {
+    VegaInternalThemeManager.applyBranding(options);
+  }
+}
+__decorate$4([
+  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 = [
+  {
+    payloadKey: 'IS_SETSEMANTICS_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method setSemantics of public API VegaEventManager 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 === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_GETSEMANTICS_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method getSemantics of public API VegaEventManager 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 === 'VegaEventManager' && methodName === 'getSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_GETENABLEDEVENTIDSBYCOMPONENT_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method getEnabledEventIdsByComponent of public API VegaEventManager 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 === 'VegaEventManager' && methodName === 'getEnabledEventIdsByComponent',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'globalEventIsNative',
+    payloadDescription: 'Indicate if the vega components will emit events without the vega prefix',
+    /**
+     * 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 === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @param {unknown[]} args - The args parameter is an object
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      const config = args;
+      return !!(config.global && config.global.namespace === 'native');
+    },
+  },
+  {
+    payloadKey: 'eventOfSpecificComponentsIsNative',
+    payloadDescription: 'Indicate if the vega components will emit events with the vega prefix, but special components will emit events without vega prefix',
+    /**
+     * 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 === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @param {unknown[]} args - The args parameter is an object
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      const config = args;
+      if (config.components) {
+        const specialComponents = Object.keys(config.components);
+        return !!(specialComponents.length > 0 &&
+          config.components[specialComponents[0]].namespace === 'native');
+      }
+      return false;
+    },
+  },
+  {
+    payloadKey: 'eventOfSpecificComponentsIsVega',
+    payloadDescription: 'Indicate if the vega components will emit events without the vega prefix, but special components will emit events with vega prefix',
+    /**
+     * 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 === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @param {unknown[]} args - The args parameter is an object
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      const config = args;
+      if (config.global && config.components) {
+        const specialComponents = Object.keys(config.components);
+        return !!(config.global.namespace === 'native' &&
+          specialComponents.length > 0 &&
+          config.components[specialComponents[0]].namespace === 'vega');
+      }
+      return false;
+    },
+  },
+  {
+    payloadKey: 'globalJqueryDelegatedEventIsTrue',
+    payloadDescription: 'Indicate if the use jQuery with event delegation',
+    /**
+     * 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 === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @param {unknown[]} args - The args parameter is an object
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      const config = args;
+      return !!(config.global && config.global.jqueryDelegatedEvent === true);
+    },
+  },
+  {
+    payloadKey: 'jqueryDelegatedEventIsCustomStrategy',
+    payloadDescription: 'Indicate if the use jQuery with event delegation',
+    /**
+     * 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 === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @param {unknown[]} args - The args parameter is an object
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      const config = args;
+      return !!(config.global &&
+        Array.isArray(config.global.jqueryDelegatedEvent) &&
+        config.global.jqueryDelegatedEvent.length > 0);
+    },
+  },
+  {
+    payloadKey: 'jqueryDelegatedEventOfSpecialComponentsIsTrue',
+    payloadDescription: 'Indicate if the use jQuery with event delegation',
+    /**
+     * 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 === 'VegaEventManager' && methodName === 'setSemantics',
+    /**
+     * The function checks if the method is been called.
+     *
+     * @param {unknown[]} args - The args parameter is an object
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      const config = args;
+      if (config.components) {
+        const specialComponents = Object.keys(config.components);
+        return !!(specialComponents.length > 0 &&
+          config.components[specialComponents[0]].jqueryDelegatedEvent === true);
+      }
+      return false;
+    },
+  },
+];
+
+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;
+};
+/**
+ * The VegaEventManager class provides methods for setting and retrieving event semantics configuration,
+ * as well as getting the corresponding native event name for a given event.
+ */
+class VegaEventManager {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaEventManager, ['setSemantics', 'getSemantics', 'getEnabledEventIdsByComponent'], VegaEventManagerRuntimeMetricsPayloadDefinition);
+  }
+  /**
+   * The function sets the semantics configuration for event management.
+   *
+   * @param {EventSemanticsConfig} config - The config parameter is an object that contains the
+   * configuration settings for the event semantics. It may include properties such as the event type,
+   * event source, event target, event data, and any other relevant information for setting up the
+   * semantics of the event.
+   * @vegaVersion 2.0.0
+   */
+  setSemantics(config) {
+    internalVegaEventManager.setSemantics(config);
+  }
+  /**
+   * The function "getSemantics" returns the event semantics of an HTML element.
+   *
+   * @param {HTMLElement} host - The host parameter is an HTMLElement, which represents an HTML element
+   * in the DOM (Document Object Model). It can be any valid HTML element such as a div, span, button,
+   * etc.
+   * @returns {EventSemantics} an object of type EventSemantics.
+   * @vegaVersion 2.0.0
+   */
+  getSemantics(host) {
+    return internalVegaEventManager.getSemantics(host);
+  }
+  /**
+   * The function "getEnabledEventIdsByComponent" returns the all eventIds in component.
+   *
+   * @param {VegaComponentName} componentName - The component name,
+   * etc.
+   * @returns {Nullable<VegaEventID[]>} All eventIds.
+   * @vegaVersion 2.0.0
+   */
+  getEnabledEventIdsByComponent(componentName) {
+    return internalVegaEventManager.getEnabledEventIdsByComponent(componentName);
+  }
+}
+__decorate$2([
+  InjectVegaTelemetrySlimmer()
+], VegaEventManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaEventManager$1 = new VegaEventManager();
+
+const ZIndexManagerRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_OVERRIDEZINDEXBASICVALUES_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method overrideZIndexBasicValues of public API ZIndexManager 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 === 'VegaZIndexManager' && methodName === 'overrideZIndexBasicValues',
+    /**
+     * The function checks if the method name is load.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'zIndexBasicValuesGreatThanTenThousand',
+    payloadDescription: 'Indicate if the basic z-index value is great than ten thousand',
+    /**
+     * 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 === 'VegaZIndexManager' && methodName === 'overrideZIndexBasicValues',
+    /**
+     * The function checks if the method name is load.
+     *
+     * @param {unknown[]} args - The parameter of slimmer method
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: (args) => {
+      return args['base'] > 10000;
+    },
+  },
+];
+
+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;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+/**
+ * The VegaZIndexManager class calls a method in the ZIndexManager class to
+ * change z-index values based on the input.
+ */
+class VegaZIndexManager {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaZIndexManager, ['overrideZIndexBasicValues'], ZIndexManagerRuntimeMetricsPayloadDefinition);
+  }
+  /**
+   * The function "overrideZIndexBasicValues" calls a method in the "ZIndexManager" class to change the
+   * z-index values based on the input.
+   *
+   * @param {ZIndexBasicValues} input - The input parameter is of type ZIndexBasicValues.
+   * @vegaVersion 2.3.0
+   */
+  overrideZIndexBasicValues(input) {
+    InternalVegaZIndexManager$1.overrideZIndexBasicValues(input);
+  }
+}
+__decorate$1([
+  InjectVegaTelemetrySlimmer()
+], VegaZIndexManager.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaZIndexManager$1 = new VegaZIndexManager();
+
+const VegaSkeletonRuntimeMetricsPayloadDefinition = [
+  {
+    payloadKey: 'IS_LOAD_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method load of public API VegaSkeletonLoaderController 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 === 'VegaSkeletonLoaderController' && methodName === 'load',
+    /**
+     * The function checks if the method name is load.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_UNLOAD_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method unLoad of public API VegaSkeletonLoaderController 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 === 'VegaSkeletonLoaderController' && methodName === 'unLoad',
+    /**
+     * The function checks if the method name is unLoad.
+     *
+     * @returns {boolean} A boolean value
+     */
+    payloadValue: () => {
+      return true;
+    },
+  },
+  {
+    payloadKey: 'IS_UNLOADALL_METHOD_CALLED',
+    payloadDescription: 'Indicate if the method unLoadAll of public API VegaSkeletonLoaderController 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 === 'VegaSkeletonLoaderController' && methodName === 'unLoadAll',
+    /**
+     * The function checks if the method name is unLoadAll.
+     *
+     * @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;
+};
+/**
+ * Vega Skeleton Loader Controller to show skeletons in the target elements
+ */
+class VegaSkeletonLoaderController {
+  constructor() {
+    this.vegaPublicAPIRuntimeMetricsSlimmer = createPublicAPIRuntimeMetricsSlimmer(VegaSkeletonLoaderController, ['load', 'unLoad', 'unLoadAll'], VegaSkeletonRuntimeMetricsPayloadDefinition);
+    this.loaderMap = new Map();
+  }
+  /**
+   * Load the skeletons in the target elements
+   *
+   * @param { VegaSkeletonLoaderConfig } config - Configuration for the loading function
+   * @param {string} config.target - Target elements to show the skeletons.
+   * @param {VegaSkeletonLoaderConfig.type} [config.type = 'text'] - Type of the skeleton.
+   * @param {VegaSkeletonLoaderConfig.width} config.width - Width of the skeleton.
+   * @param {VegaSkeletonLoaderConfig.height} config.height - Height of the skeleton.
+   * @param {VegaSkeletonLoaderConfig.items} config.items - Configuration for multiple skeleton items.
+   * @param {VegaSkeletonLoaderConfig.layout} config.layout - Layout of the skeleton items.
+   * @returns { string } - Key of the loaded skeleton items.
+   * @vegaVersion 2.16.0
+   */
+  load({ target, type = 'text', width, height, items, layout }) {
+    // eslint-disable-next-line no-restricted-globals
+    const targets = Array.from(document.body.querySelectorAll(target));
+    const key = `vega-skeleton-loader-${generateUUID()}`;
+    const loaderItems = [];
+    targets.forEach((target) => {
+      const skeletonsLoaders = !items
+        ? [this.createSkeleton({ type, width, height })]
+        : items.map(this.createSkeleton);
+      const itemsWithKey = (layout ? [this.wrapLayout(skeletonsLoaders, layout)] : skeletonsLoaders).map((item) => {
+        item.dataset[VegaSkeletonLoaderController.LOADER_DATA_SET_KEY] = key;
+        return item;
+      });
+      loaderItems.push(...itemsWithKey);
+      target.append(...itemsWithKey);
+    });
+    this.loaderMap.set(key, loaderItems);
+    return key;
+  }
+  /**
+   * Remove the skeletons from the dom.
+   *
+   * @param {string} key - The key returned from {@link VegaSkeletonLoaderController.load}.
+   * @vegaVersion 2.16.0
+   */
+  unLoad(key) {
+    if (this.loaderMap.has(key)) {
+      this.loaderMap.get(key).forEach((item) => item.remove());
+      this.loaderMap.delete(key);
+    }
+  }
+  /**
+   * Remove all the skeletons from the dom.
+   *
+   * @vegaVersion 2.16.0
+   */
+  unLoadAll() {
+    for (const items of this.loaderMap.values()) {
+      items.forEach((item) => item.remove());
+    }
+    this.loaderMap.clear();
+  }
+  /**
+   * Create a skeleton item. The skeleton animated always be true
+   *
+   * @param {VegaSkeletonLoaderItem} config - Configuration for the skeleton item.
+   * @returns {HTMLVegaSkeletonElement} - Skeleton item.
+   */
+  createSkeleton(config) {
+    const { type, width, height } = config;
+    // eslint-disable-next-line no-restricted-globals
+    const skeleton = document.createElement('vega-skeleton');
+    Object.assign(skeleton, { animated: true, type, width, height });
+    return skeleton;
+  }
+  /**
+   * Wrap the flex layout for the skeletons.
+   *
+   * @param {HTMLElement[]} skeletons - Skeleton elements of the loader.
+   * @param {VegaSkeletonLoaderLayout} layout - Flex properties for the layout.
+   * @returns {HTMLVegaFlexElement} - Container wrapping the skeletons in the specified flex layout.
+   */
+  wrapLayout(skeletons, layout) {
+    // eslint-disable-next-line no-restricted-globals
+    const skeletonContainer = document.createElement('vega-flex');
+    Object.assign(skeletonContainer, Object.assign({ className: 'vega-skeleton-loader-template-container' }, layout.props));
+    Object.assign(skeletonContainer.style, layout.style);
+    skeletonContainer.append(...skeletons);
+    return skeletonContainer;
+  }
+}
+VegaSkeletonLoaderController.LOADER_DATA_SET_KEY = 'vegaSkeletonLoaderKey';
+__decorate([
+  InjectVegaTelemetrySlimmer()
+], VegaSkeletonLoaderController.prototype, "vegaPublicAPIRuntimeMetricsSlimmer", void 0);
+const VegaSkeletonLoader = new VegaSkeletonLoaderController();
+
+/**
+ * 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) {
+    var _a;
+    const element = this.doRender(createElement, renderData, rteContext);
+    this.fallbackRegisterRef(element, renderData);
+    this.appendChildren(((_a = element.childrenContainerGetter) === null || _a === void 0 ? void 0 : _a.call(element)) || 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);
+  }
+  /**
+   * Auto render the block children if the block element is not exist
+   *
+   * @param {VegaRTERenderResult} parentElement - The parent element to append children to.
+   * @param {RTEBlock | RTENode} renderData - The data to render children for.
+   * @param {RTERenderContext} rteContext - The render context.
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   */
+  appendChildren(parentElement, renderData, rteContext, createElement) {
+    if (Array.isArray(renderData['children']) &&
+      renderData['children'].length &&
+      !parentElement['$children$']) {
+      parentElement['$children$'] = renderData['children']
+        .map((child) => {
+        return this.renderChildren(child, rteContext, createElement);
+      })
+        .filter(isNonNullable);
+    }
+  }
+  /**
+   * Render the children node.
+   *
+   * @param {RTENode | RTEBlock} renderData - The node to render children for.
+   * @param {RTERenderContext} rteContext - The render context.
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   * @returns {Nullable<VegaRTERenderResult>} - The rendered DOM element.
+   */
+  renderChildren(renderData, rteContext, createElement) {
+    const renderer = this.getDTORenderer(renderData.type);
+    if (renderer) {
+      return renderer.render(renderData, rteContext, createElement);
+    }
+  }
+  /**
+   * Fallback register reference for the element.
+   *
+   * @param {VegaRTERenderResult} element - The rendered DOM element.
+   * @param {RTEBlock | RTENode} renderData - The data to register with the element.
+   */
+  fallbackRegisterRef(element, renderData) {
+    if (!renderData[VegaRTEExtensionRenderer.REGISTER_REF_FLAG] &&
+      element['$attrs$'] &&
+      !element['$attrs$']['ref']) {
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      element['$attrs$']['ref'] = this.useRef(renderData);
+    }
+  }
+}
+VegaRTEExtensionRenderer.REGISTER_REF_FLAG = '__registeredRef__';
+
+/**
+ * Abstract class for Vega Rich Text Editor extensions.
+ */
+class VegaRTEExtension {
+  constructor() {
+    /**
+     * The context of the RTE extension, which may include references to the host editor and other relevant information.
+     */
+    this.extensionContext = null;
+    this.hasCustomStylesRenderers = new Set();
+  }
+  /**
+   * Registers an action handle strategy for a specific node or block class.
+   *
+   * @param {string} nodeOrBlockClassName - The name of the node or block class.
+   * @param {string} actionType - The type of the action.
+   * @param {ActionHandleStrategy<ModifyContentAction, RTENode | RTEBlock | VegaRTEContent>} strategy - The strategy to register.
+   */
+  static registerActionHandleStrategy(nodeOrBlockClassName, actionType, strategy) {
+    ActionHandleStrategyRegistry.register(actionType, nodeOrBlockClassName, strategy);
+  }
+  /**
+   * Registers an action handler interceptor for a specific node or block class.
+   *
+   * @param {string} nodeOrBlockClassName - The name of the node or block class.
+   * @param {string} actionType - The type of the action.
+   * @param {ActionHandlerInterceptor<ModifyContentAction, RTENode | RTEBlock | VegaRTEContent>} strategy - The interceptor to register.
+   */
+  static registerActionHandlerInterceptor(nodeOrBlockClassName, actionType, strategy) {
+    ActionHandlerInterceptorRegistry.register(actionType, nodeOrBlockClassName, strategy);
+  }
+  /**
+   * Initializes the RTE extension with the provided context.
+   *
+   * @param {RTEExtensionContext} context - The context of the RTE extension.
+   */
+  initialExtension(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Callback method invoked when the extension is destroyed.
+   * Override this method to perform any necessary cleanup.
+   */
+  destroyExtension() {
+  }
+  /**
+   * Collect custom styles for the extension renderers.
+   * If custom nodes have special styles, override this method to provide the styles.
+   *
+   * @returns {string} - The custom styles as a string.
+   */
+  collectExtensionRendererStyles() {
+    let styles = '';
+    if (this.hasCustomStylesRenderers.size > 0) {
+      this.hasCustomStylesRenderers.forEach((renderer) => {
+        styles += `${renderer.injectRTEScopeStyles()}\n`;
+      });
+    }
+    return styles;
+  }
+  /**
+   * Register a node type with the extension.
+   *
+   * @param {string} type - The type of the node or block. The type should be a string that uniquely identifies the node or block.
+   * @param {ClassType<RTEBlock | RTENode>} DTOClass - The DTO class to register.
+   */
+  registerNode(type, DTOClass) {
+    RTEDTOClassManager.registerRTEDTOClass(type, DTOClass);
+  }
+  /**
+   * Register a renderer for a node type with the extension.
+   *
+   * @param {string} type - The type of the node or block. The type should be a string that uniquely identifies the node or block.
+   * @param {BaseRenderer} renderer - The renderer to register.
+   */
+  registerRenderer(type, renderer) {
+    RTEDTORendererManager.registerRTEDTORenderer(type, renderer);
+    if (renderer instanceof VegaRTEExtensionRenderer && renderer.injectRTEScopeStyles()) {
+      this.hasCustomStylesRenderers.add(renderer);
+    }
+  }
+  /**
+   * Register a toolbar button renderer for the extension.
+   *
+   * @param {string} type - The type of the toolbar button.
+   * @param {VegaRTEToolbarButtonRenderer} renderer - The renderer to register.
+   */
+  registerToolbarButtonRenderer(type, renderer) {
+    RTEDTORendererManager.registerRTEToolbarButtonRenderer(type, renderer);
+  }
+  /**
+   * This is a helper method that utilizes RTEUtils to register common strategies.
+   * Call the method with the class name of the block to make it support basic strategies like:
+   * - Delete children
+   * - Append the children
+   * - Delete the block children content
+   *
+   * @param {string} blockClassName - The class name of the block to register strategies for.
+   */
+  registerBlockBasicStrategies(blockClassName) {
+    RTEDTOActionStrategyManager.registerBlockBasicStrategies(blockClassName);
+  }
+  /**
+   * Unregister a strategy for a specific action type and block class if not need.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} blockClassName - The class name of the block to unregister the strategy for.
+   */
+  unRegisterStrategy(actionType, blockClassName) {
+    ActionHandleStrategyRegistry.unregister(actionType, blockClassName);
+  }
+  /**
+   * Unregister a strategy for a specific action type and block class if not need.
+   *
+   * @param {string} actionType - The special action type or the action class name.
+   * @param {string} blockClassName - The class name of the block to unregister the strategy for.
+   * @param {ActionHandlerInterceptor<ModifyContentAction, RTENode | RTEBlock | VegaRTEContent>} strategy - The interceptor to unregister.
+   */
+  unRegisterInterceptor(actionType, blockClassName, strategy) {
+    ActionHandlerInterceptorRegistry.unregister(actionType, blockClassName, strategy);
+  }
+  /**
+   * Register an element to block DTO class strategy.
+   *
+   * @param {ElementToDTOStrategy} strategy - The strategy to register.
+   */
+  registerElementToBlockDTOClassStrategy(strategy) {
+    ElementToDTOClassStrategyManager.registerElementToBlockStrategy(strategy);
+  }
+  /**
+   * Register an element to node DTO class strategy.
+   *
+   * @param {ElementToDTOStrategy} strategy - The strategy to register.
+   */
+  registerElementToNodeDTOClassStrategy(strategy) {
+    ElementToDTOClassStrategyManager.registerElementToNodeStrategy(strategy);
+  }
+  /**
+   * Get the registered element to node DTO class strategies.
+   *
+   * @returns {ElementToDTOStrategy[]} - The registered element to node DTO class strategies.
+   */
+  getElementToNodeDTOClassStrategies() {
+    return ElementToDTOClassStrategyManager.getElementToNodeStrategies();
+  }
+}
+
+/**
+ * Base class for rendering extension toolbar button in the rich text editor.
+ * The renderer provides common functionalities for rendering toolbar buttons, including:
+ * - Rendering a button with an icon, label, and optional arrow icon.
+ * - Rendering a dropdown with a list of items.
+ * - Rendering dropdown items.
+ * - Rendering template for dropdown list.
+ * - Determining if the button should be disabled based on the editor context.
+ * - Handling button and dropdown click events.
+ * Override the methods to customize the rendering and behavior of the button.
+ */
+class VegaRTEToolbarButtonRenderer {
+  /**
+   * Checks if the button should be hidden.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context for the editor.
+   * @returns {boolean} True if the button is hidden, false otherwise.
+   */
+  isHidden(editorContext) {
+    return editorContext.sourceEditMode;
+  }
+  /**
+   * Renders a dropdown component with the specified properties and children.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @param {RTEToolbarDropdownProps} dropdownProps - The properties for the dropdown.
+   * @param {VegaRTERenderResult[]} children - The children elements for the dropdown.
+   * @returns {VegaRTERenderResult} - The render result for the dropdown.
+   */
+  renderDropdown(h, editorContext, dropdownProps, children) {
+    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));
+      } }, dropdownProps), children);
+  }
+  /**
+   * Renders the dropdown list template.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {(RTEDropdownListItem | RTEDropdownListGroup)[]} itemList - The list of dropdown items.
+   * @returns {VegaRTERenderResult} - The render result for the dropdown list.
+   */
+  renderDropdownListTemplate(h, itemList) {
+    return h('div', {
+      slot: 'items',
+      onMouseDown: this.preventDefault,
+    }, itemList.map((item) => {
+      return 'children' in item
+        ? this.renderDropdownGroup(h, item)
+        : this.renderDropdownItem(h, item);
+    }));
+  }
+  /**
+   * Renders a dropdown item for the toolbar button.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {RTEDropdownListItem} item - The dropdown item.
+   * @returns {VegaRTERenderResult} - The render result for the dropdown item.
+   */
+  renderDropdownItem(h, item) {
+    return h('vega-dropdown-item', {
+      key: item.key,
+      itemKey: item.key,
+      label: item.label,
+      prefixIcon: item.icon,
+    });
+  }
+  /**
+   * Renders a dropdown item for the toolbar button.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {RTEDropdownListGroup} item - The dropdown group.
+   * @returns {VegaRTERenderResult} - The render result for the dropdown item.
+   */
+  renderDropdownGroup(h, item) {
+    return h('vega-dropdown-group', {
+      key: item.key,
+      label: item.label,
+      divide: false,
+    }, item.children.map((child) => {
+      return 'children' in child
+        ? this.renderDropdownGroup(h, child)
+        : this.renderDropdownItem(h, child);
+    }));
+  }
+  /**
+   * Renders a common toolbar button with optional icon, label, and arrow icon.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @param {RTEToolbarButtonProps} buttonProps - The properties for the button.
+   * @returns {VegaRTERenderResult} - The render result for the button.
+   */
+  renderButton(h, editorContext, buttonProps) {
+    const { icon, label, showArrowIcon } = buttonProps;
+    const isDisabled = this.isDisabled(editorContext);
+    return h('vega-rich-text-editor-toolbar-button', {
+      disabled: isDisabled,
+      icon: icon,
+      hidden: this.isHidden(editorContext),
+      selected: this.isSelected(editorContext),
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (el) => {
+        DomNodeSubjectObserverFactory.addUniqueObserverToNode(el, VegaClick, () => this.handleButtonClick(editorContext));
+      },
+      onMouseDown: this.preventDefault,
+    }, [
+      this.renderButtonLabel(h, editorContext, label),
+      showArrowIcon
+        ? h('vega-icon', {
+          size: 'size-8',
+          color: isDisabled ? 'text-disabled' : 'text-secondary',
+          style: { marginLeft: '8px' },
+          icon: VegaInternalIconManager.getIconKey('chevron-down'),
+        })
+        : null,
+    ].filter(isNonNullable));
+  }
+  /**
+   * Renders the button label.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @param {Nullable<string>} label - The button label if exist.
+   * @returns {Nullable<VegaRTERenderResult>} - The render result for the button.
+   */
+  renderButtonLabel(h, editorContext, label) {
+    if (label) {
+      const isDisabled = this.isDisabled(editorContext);
+      return h('vega-font', {
+        variant: 'font-field-label-sm',
+        color: isDisabled ? 'text-disabled' : 'text-primary',
+      }, label);
+    }
+    return null;
+  }
+  /**
+   * Determines if the button should be disabled based on the editor context.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   * @returns {boolean} - True if the button should be disabled, false otherwise.
+   */
+  isDisabled(editorContext) {
+    return editorContext.host.disabled;
+  }
+  /**
+   * Checks if the button should be selected.
+   *
+   * @param {VegaRTEToolbarRenderContext} _editorContext The render context for the editor.
+   * @returns {boolean} True if the button is selected, false otherwise.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isSelected(_editorContext) {
+    return false;
+  }
+  /**
+   * Prevents the default action of the click event. This is to avoid losing focus from the editor when the button is clicked.
+   *
+   * @param {MouseEvent} e The mouse event to prevent default action for.
+   */
+  preventDefault(e) {
+    e.preventDefault();
+  }
+  /**
+   * Recursively searches for a dropdown list item by its key.
+   *
+   * @param {(RTEDropdownListItem | RTEDropdownListGroup)[]} itemList The list of dropdown items or groups to search through.
+   * @param {string} key The key of the item to find.
+   * @returns {Nullable<RTEDropdownListItem>} The dropdown list item if found, otherwise null.
+   */
+  getListItemByKey(itemList, key) {
+    for (const item of itemList) {
+      if ('children' in item) {
+        const foundItem = this.getListItemByKey(item.children, key);
+        if (foundItem) {
+          return foundItem;
+        }
+      }
+      else if (item.key === key) {
+        return item;
+      }
+    }
+    return null;
+  }
+}
+
+/**
+ * Action to insert a token node at a specified range in the Rich Text Editor.
+ *
+ * @example block.apply(new InsertTokenNodeAction(rteRange, tokenNode));
+ */
+class InsertTokenNodeAction extends ModifyContentAction {
+  constructor(rteRange, token) {
+    super();
+    this.type = 'INSERT_TOKEN_NODE';
+    this.rteRange = null;
+    this.actionHandleResult = false;
+    this.rteRange = rteRange;
+    this.token = token;
+  }
+}
+
+/**
+ * Renderer for the token toolbar button in the Vega Rich Text Editor.
+ */
+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.
+   *
+   * @param {VegaRTECreateElementFunction} createElement Function to create elements in the rich text editor.
+   * @param {VegaRTEToolbarRenderContext} editorContext The render context for the editor.
+   * @returns {VegaRTERenderResult} Token toolbar button.
+   */
+  render(createElement, editorContext) {
+    return this.renderDropdown(createElement, editorContext, {}, [
+      this.renderButton(createElement, editorContext, { label: 'Tokens', showArrowIcon: true }),
+      this.renderDropdownListTemplate(createElement, this.tokenList),
+    ]);
+  }
+  /**
+   * Checks if the token toolbar button is disabled.
+   *
+   * @returns {boolean} True if the button is disabled, false otherwise.
+   */
+  isDisabled() {
+    if (this.extensionContext) {
+      const { host, getSelectedNodes } = this.extensionContext;
+      const [startNode] = getSelectedNodes();
+      return startNode
+        ? host.disabled ||
+          !ActionHandleStrategyRegistry.canHandle('INSERT_TOKEN_NODE', startNode.parent)
+        : host.disabled;
+    }
+    return false;
+  }
+  /* istanbul ignore next */
+  /**
+   * Handles the button click event. No need this method for token button.
+   *
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  handleButtonClick(editorContext) {
+  }
+  /**
+   * Handles the token item click event from the dropdown.
+   *
+   * @param {string} itemKey - The key of the clicked token item.
+   * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
+   */
+  handleDropdownClick(itemKey, editorContext) {
+    const token = this.getListItemByKey(this.tokenList, itemKey);
+    const { rteRange } = editorContext;
+    const { startNode } = rteRange;
+    if (startNode && startNode.parent) {
+      const action = new InsertTokenNodeAction(rteRange, token);
+      startNode.parent.apply(action);
+      if (action.actionHandleResult) {
+        this.flushEditorUI();
+      }
+    }
+  }
+  /**
+   * Refreshes the editor UI.
+   */
+  flushEditorUI() {
+    if (this.extensionContext) {
+      const { host, flushValue } = this.extensionContext;
+      flushValue(host.value);
+    }
+  }
+}
+
+/**
+ * Token node for the Vega Rich Text Editor.
+ */
+class RTETokenNode extends RTETextNode {
+  constructor(id, token, text, parentBlock, annotations) {
+    super(id, text, parentBlock, annotations);
+    this.type = 'token';
+    this.token = token;
+    this.text = text;
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(value, parent) {
+    const node = new RTETokenNode(value.id, value.token, value.text, parent);
+    if (value.annotations) {
+      node.annotationMap = this.generateTextAnnotationMap(value.annotations);
+    }
+    return node;
+  }
+  /**
+   * Converts the token node to a JSON representation.
+   *
+   * @returns {VegaRTETokenNode} - The JSON representation of the token node.
+   */
+  toJSON() {
+    const json = super.toJSON();
+    return Object.assign({ id: this.id, type: this.type, text: this.text, token: this.token }, (json.annotations ? { annotations: json.annotations } : {}));
+  }
+  /**
+   * Determines if the token node is content editable.
+   *
+   * @returns {boolean} - Always returns false for token nodes.
+   */
+  isContentEditable() {
+    return false;
+  }
+  /**
+   * Clones the token node.
+   *
+   * @param {RTETextBlock} parent - The parent block for the cloned node.
+   * @returns {RTETokenNode} - The cloned token node.
+   */
+  clone(parent) {
+    return new RTETokenNode(this.id, this.token, this.text, parent, this.annotationMap);
+  }
+  /**
+   * Converts the token node to an HTML representation.
+   *
+   * @returns {string} - The HTML representation of the token node.
+   */
+  toHtml() {
+    return `<span class="token" contenteditable="false" template-token-key="${this.token}" token-key="${this.token}"${super.generateAttributeString()}>${this.text}</span>`;
+  }
+}
+
+/**
+ * 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.
+   *
+   * @param {VegaRTECreateElementFunction} createElement - The function to create a DOM element.
+   * @param {RTETokenNode} node - The token node to render.
+   * @param {RTERenderContext} editorContent - The editor content context.
+   * @returns {VegaRTERenderResult} - The rendered DOM element.
+   */
+  doRender(createElement, node, editorContent) {
+    const { id, token } = node;
+    return createElement('span', Object.assign(Object.assign({ 'key': id, 'template-token-key': token, 'token-key': token, 'contenteditable': 'false', 'style': node.getStyles(), 'class': `token ${node.getClasses()}` }, this.additionalAttributes(node)), { 'ref': this.useRef(node), 
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      'onClick': (event) => {
+        event.preventDefault();
+        if (editorContent && editorContent.editable !== false) {
+          this.handleTokenElementClick(event, node);
+        }
+      } }), 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.
+   *
+   * @returns {string} The CSS styles for the token node.
+   */
+  injectRTEScopeStyles() {
+    return `span[token-key]{padding: 0 2px; margin: 0 1px; background-color: rgba(var(--v-bg-status-info, 205,209,211))}`;
+  }
+  /**
+   * Handle the click event on the token element.
+   *
+   * @param {MouseEvent} event - The click event.
+   * @param {RTETokenNode} node - The token node that was clicked.
+   */
+  handleTokenElementClick(event, node) {
+    event.preventDefault();
+    if (this.extensionContext) {
+      this.extensionContext.host.value.apply(new UpdateCursorPositionAction(node, undefined, true));
+    }
+  }
+  /**
+   * Additional attributes for the token node.
+   *
+   * @param {RTETokenNode} node - The token node.
+   * @returns {Record<string, string>} Additional attributes
+   */
+  additionalAttributes(node) {
+    const annotation = node.getCustomAttributesAnnotation();
+    let result = { wrapped: 'true' };
+    if (annotation) {
+      result = Object.assign(Object.assign({}, result), annotation.render());
+    }
+    return result;
+  }
+}
+
+/**
+ * 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);
+  }
+  /**
+   * @inheritDoc
+   */
+  initialExtension(context) {
+    super.initialExtension(context);
+    this.tokenRenderer.injectExtensionContext(context);
+    if (this.tokenToolbarButtonRenderer) {
+      this.tokenToolbarButtonRenderer.injectExtensionContext(context);
+    }
+  }
+}
+(() => {
+  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';
+/**
+ * Action to insert a function block into the rich text editor.
+ *
+ * @example focusedBlock.apply(new InsertFunctionBlockAction('IF'))
+ * @example host.value.apply(new InsertFunctionBlockAction('IF'))
+ */
+class InsertFunctionBlockAction extends ModifyContentAction {
+  constructor(functionType) {
+    super();
+    this.type = INSERT_FUNCTION_BLOCK;
+    this.functionType = functionType;
+  }
+}
+
+/**
+ * RTE Function Block
+ */
+class RTEFunctionBlock extends RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'function-block';
+    this.children = [];
+  }
+  /**
+   * Creates an RTEFunctionBlock from a VegaFunctionBlock.
+   *
+   * @param {VegaFunctionBlock} block - The custom block to convert.
+   * @param {VegaRTETransformOptions} [options] - Optional transformation options.
+   * @returns {RTEFunctionBlock} The resulting RTEFunctionBlock.
+   */
+  static from(block, options) {
+    const functionBlock = new RTEFunctionBlock(block.id);
+    const defaultAnnotation = { customClass: ['statement'] };
+    let { annotations } = block;
+    annotations = annotations
+      ? Object.assign(Object.assign({}, annotations), defaultAnnotation) : defaultAnnotation;
+    super.convertAnnotationsToMap(functionBlock.annotationMap, annotations);
+    functionBlock.children = this.generateBlockChildren(block.children, options, functionBlock);
+    return functionBlock;
+  }
+  /**
+   * Converts the RTEFunctionBlock and its children to an HTML string.
+   *
+   * @returns {string} The HTML string representation of the function block.
+   */
+  toHtml() {
+    const childrenHtml = this.children
+      .map((child) => {
+      if (child instanceof RTETextBlock) {
+        const attrStr = this.getFunctionContentStyle(child);
+        return `<div class="statementelement"${attrStr}>${child.getChildrenHtml()}</div>`;
+      }
+      else {
+        return child.toHtml();
+      }
+    })
+      .join('');
+    return `<div class="statement">${childrenHtml}</div>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTEFunctionBlock(generateUUID());
+    clonedBlock.parent = parent;
+    clonedBlock.children = this.children.map((child) => {
+      const clonedChild = child.clone(clonedBlock);
+      return clonedChild;
+    });
+    clonedBlock.annotationMap = super.cloneAnnotations();
+    return clonedBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1].getLastNode();
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { id: this.id, type: this.type, children: this.children.map((child) => child.toJSON()) });
+  }
+  /**
+   * Get the style string for function content block, excluding default paragraph styles.
+   *
+   * @param {RTETextBlock} block - The text block to extract styles from
+   * @returns {string} - The style attribute string
+   */
+  getFunctionContentStyle(block) {
+    const blockAnnotationStyle = new RTEAnnotationStyle(block);
+    let styles = blockAnnotationStyle.toCssText({ standalone: true });
+    const textStyleAnnotation = block.getAnnotationByType('TEXT_STYLE');
+    if (textStyleAnnotation && textStyleAnnotation.textStyle === 'paragraph') {
+      const defaultParagraphStyles = blockAnnotationStyle.toCssText(undefined, undefined, textStyleAnnotation.renderStyle({ standalone: true }));
+      styles = styles.replace(defaultParagraphStyles, '').trim();
+    }
+    return styles ? ` style="${styles}"` : '';
+  }
+}
+
+/**
+ * Strategy to handle the insertion of a function block into the rich text editor.
+ */
+class InsertFunctionBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { functionType } = action;
+    const functionBlock = this.getFunctionBlock(functionType);
+    const emptyParagraph = this.createNewParagraph('');
+    const referenceBlock = this.getReferenceBlock(target);
+    if (referenceBlock) {
+      referenceBlock.parent.apply(new InsertChildrenAfterAction(referenceBlock, functionBlock, emptyParagraph));
+    }
+    else {
+      target.apply(new AppendChildrenAction([functionBlock, emptyParagraph]));
+    }
+    if (emptyParagraph) {
+      action.nextFocusNode = emptyParagraph.children[0];
+    }
+  }
+  /**
+   * Get a function block based on the specified type.
+   *
+   * @param {string} type - The type of function block to create.
+   * @returns {RTEFunctionBlock} The function block instance.
+   */
+  getFunctionBlock(type) {
+    const id = generateUUID();
+    return RTEFunctionBlock.from({
+      id: id,
+      type: 'function-block',
+      children: [
+        {
+          id: `${id}-1`,
+          type: 'logic-control-block',
+          statementText: type.toUpperCase(),
+        },
+        {
+          id: `${id}-2`,
+          annotations: {
+            customClass: ['statementelement'],
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: `${id}-2-1`,
+              type: 'text',
+              text: '   ',
+            },
+          ],
+        },
+        {
+          id: `${id}-3`,
+          type: 'logic-control-block',
+          statementText: 'SHOW',
+        },
+        {
+          id: `${id}-4`,
+          annotations: {
+            customClass: ['statementelement'],
+          },
+          type: 'paragraph',
+          nodes: [
+            {
+              id: `${id}-4-1`,
+              type: 'text',
+              text: '   ',
+            },
+          ],
+        },
+      ],
+    });
+  }
+  /**
+   * We need to get the correct block if the current target is a function block element to avoid nesting function blocks.
+   *
+   * @param {RTEBlock | VegaRTEContent} currentTarget - The current target block or content.
+   * @returns {Nullable<RTEBlock>} The reference block.
+   */
+  getReferenceBlock(currentTarget) {
+    if (!(currentTarget instanceof VegaRTEContent)) {
+      const parentBlock = currentTarget.parent;
+      if (parentBlock instanceof RTEFunctionBlock) {
+        return parentBlock;
+      }
+      else {
+        return currentTarget;
+      }
+    }
+  }
+}
+
+/**
+ * Class representing a logic control node in the rich text editor.
+ */
+class RTELogicControlNode extends RTENode {
+  constructor(id, text, parent) {
+    super(id);
+    this.type = 'logic-control-node';
+    this.text = '';
+    this.text = text;
+    this.parent = parent;
+  }
+  /**
+   * Clone the current node instance.
+   *
+   * @returns {RTELogicControlNode} - A new instance of RTELogicControlNode.
+   */
+  clone() {
+    return new RTELogicControlNode(this.id, this.text, this.parent);
+  }
+  /**
+   * Convert the node to its HTML representation.
+   *
+   * @returns {string} - The HTML string of the logic control node.
+   */
+  toHtml() {
+    return this.text;
+  }
+  /**
+   * Convert the node to a JSON representation.
+   *
+   * @returns {unknown} - The JSON object of the statement syntax node.
+   */
+  toJSON() {
+    return {
+      id: this.id,
+      type: this.type,
+      text: this.text,
+    };
+  }
+  /**
+   * Get the end offset of the node's range.
+   *
+   * @returns {number} - The end offset of the node's range.
+   */
+  getRangeEndOffset() {
+    return 1;
+  }
+  /**
+   * Get the container element for the node's range.
+   *
+   * @returns {Nullable<Node>} - The container node for the range.
+   */
+  getRangeContainer() {
+    const element = stateEntityRenderingRegistry.getDOMByEntity(this);
+    if (element) {
+      return element.parentElement;
+    }
+  }
+  /**
+   * Get the content editable state of the node.
+   *
+   * @returns {boolean} - The content editable state of the node.
+   */
+  isContentEditable() {
+    return false;
+  }
+}
+
+/**
+ * Class representing a logic control block in the rich text editor.
+ */
+class RTELogicControlBlock extends RTEBlock {
+  constructor(id, statementText, parent) {
+    super(id);
+    this.type = 'logic-control-block';
+    this.children = [];
+    this.statementText = '';
+    this.statementText = statementText;
+    this.children = [new RTELogicControlNode(`${id}-node-1`, statementText, this)];
+    if (parent) {
+      this.parent = parent;
+    }
+  }
+  /**
+   * Create a logic control block from a JSON representation.
+   *
+   * @param {VegaRTELogicControlBlock} json - The JSON object representing the logic control block.
+   * @returns {RTELogicControlBlock} - The created logic control block.
+   */
+  static from(json) {
+    const block = new RTELogicControlBlock(json.id, json.statementText);
+    return block;
+  }
+  /**
+   * Check the block is not empty.
+   *
+   * @returns {boolean} - Always true for logic control block.
+   */
+  isNotEmpty() {
+    return true;
+  }
+  /**
+   * Get the last node of the block.
+   *
+   * @returns {RTELogicControlNode} - The last node in the block.
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1];
+  }
+  /**
+   * Convert the block to its HTML representation.
+   *
+   * @returns {string} - The HTML string of the logic control block.
+   */
+  toHtml() {
+    return `<div class='statementsyntax' contenteditable='false'>${this.statementText}</div>`;
+  }
+  /**
+   * Clone the current block instance.
+   *
+   * @param { RTEFunctionBlock } parent - The parent function block for the cloned instance.
+   * @returns {RTELogicControlBlock} - A new instance of RTEStatementSyntaxBlock.
+   */
+  clone(parent) {
+    return new RTELogicControlBlock(this.id, this.statementText, parent);
+  }
+  /**
+   * Get the JSON representation of the block.
+   *
+   * @returns {VegaRTELogicControlBlock} - The JSON object of the logic control block.
+   */
+  toJSON() {
+    return {
+      id: this.id,
+      type: this.type,
+      statementText: this.statementText,
+    };
+  }
+}
+
+/**
+ * Function toolbar button renderer class.
+ */
+class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  /**
+   * Injects the extension context
+   *
+   * @param {RTEExtensionContext} context - extension context
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * @inheritDoc
+   */
+  render(h, editorContext) {
+    return this.renderDropdown(h, editorContext, {}, [
+      this.renderButton(h, editorContext, {
+        label: 'Functions',
+        showArrowIcon: true,
+      }),
+      this.renderDropdownListTemplate(h, FunctionToolbarButtonRenderer.FUNCTION_LIST),
+    ]);
+  }
+  /**
+   * Overrides the isDisabled method to determine if the button should be disabled.
+   *
+   * @returns {boolean} - true if the button should be disabled, false otherwise.
+   */
+  isDisabled() {
+    if (this.extensionContext) {
+      const { host, getSelectedNodes } = this.extensionContext;
+      const focusNode = getSelectedNodes()[0];
+      let enableInsert = true;
+      if (focusNode) {
+        enableInsert = ActionHandleStrategyRegistry.canHandle(INSERT_FUNCTION_BLOCK, focusNode.parent);
+      }
+      return host.disabled || !enableInsert;
+    }
+    return false;
+  }
+  /* istanbul ignore next */
+  // eslint-disable-next-line jsdoc/require-jsdoc
+  handleButtonClick() {
+    throw new Error('Method not implemented.');
+  }
+  /**
+   * Handles dropdown click event
+   *
+   * @param {RTEExtensionFunctionType} itemKey - key of the clicked item
+   */
+  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));
+    }
+  }
+}
+FunctionToolbarButtonRenderer.FUNCTION_LIST = [
+  { key: 'IF', label: 'Conditional' },
+  { key: 'FOREACH', label: 'Foreach' },
+];
+
+/**
+ * Renders a logic control block in the rich text editor.
+ */
+class RTELogicControlBlockRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('div', {
+      key: renderData.id,
+      class: 'statementsyntax',
+      ref: this.useRef(renderData),
+    }, h('span', {
+      key: `${renderData.id}-1`,
+      contenteditable: 'false',
+      ref: this.useRef(renderData.children[0]),
+    }, renderData.statementText));
+  }
+}
+
+/**
+ * Strategy to convert a div with class 'statementsyntax' into an RTELogicControlBlock DTO.
+ */
+class DivToLogicControlBlockStrategy extends BlockToRTEBlockStrategyAbstract {
+  constructor() {
+    super(...arguments);
+    this.blockClassName = 'statementsyntax';
+  }
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element &&
+      element.nodeType === Node.ELEMENT_NODE &&
+      element.classList.contains(this.blockClassName) &&
+      this.isFunctionBlockChild(element)
+      ? 1
+      : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray) {
+    const element = elementsArray[0];
+    return RTELogicControlBlock.from({
+      id: generateUUID(),
+      type: 'logic-control-block',
+      statementText: element.innerText,
+    });
+  }
+  /**
+   * The logic control block does not have child blocks to append. so this method is intentionally left empty.
+   */
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  appendChildBlocks() { }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return false;
+  }
+  /**
+   * Checks if the given element is a child of a function block
+   *
+   * @param {HTMLElement} element - The HTML element to check
+   * @returns {boolean} True if the element is a child of a function block, false otherwise
+   */
+  isFunctionBlockChild(element) {
+    return !!(element.parentElement && element.parentElement.classList.contains('statement'));
+  }
+}
+
+/**
+ * Strategy to convert a div with class 'statement' into an function block.
+ */
+class DivToFunctionBlockStrategy extends ElementToDTOStrategy {
+  /**
+   * @inheritDoc
+   */
+  canHandle(elementsArray, currentIndex) {
+    const element = elementsArray[currentIndex];
+    return element &&
+      element.tagName === 'DIV' &&
+      element.classList.contains('statement') &&
+      element.childNodes.length &&
+      element.querySelector('.statementsyntax')
+      ? 1
+      : 0;
+  }
+  /**
+   * @inheritDoc
+   */
+  handle() {
+    return RTEFunctionBlock.from({
+      id: generateUUID(),
+      type: 'function-block',
+      annotations: {
+        customClass: ['statement'],
+      },
+      children: [],
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  appendChildBlocks(currentBlock, childBlocks) {
+    currentBlock.children = childBlocks.map((block) => {
+      block.parent = currentBlock;
+      return block;
+    });
+  }
+  /**
+   * @inheritDoc
+   */
+  shouldProceedToElementChildren() {
+    return true;
+  }
+}
+
+/**
+ * Strategy to convert a div with class 'statementelement' into an function block.
+ */
+class DivToFunctionContentStrategy extends DivToLogicControlBlockStrategy {
+  constructor() {
+    super(...arguments);
+    this.blockClassName = 'statementelement';
+  }
+  /**
+   * @inheritDoc
+   */
+  handle(elementsArray, options) {
+    const element = elementsArray[0];
+    const annotations = htmlElementToAnnotationGenerator.generate(RTETextBlock, element);
+    const nodes = Array.from(elementsArray[0].childNodes);
+    return RTETextBlock.from({
+      id: generateUUID(),
+      type: 'paragraph',
+      annotations: Object.assign({ customClass: [this.blockClassName] }, annotations),
+      nodes: this.generateChildNodes(nodes, undefined, options),
+    });
+  }
+}
+
+const functionBlockStylesCss = "div.statement{padding:2px 4px;background:rgba(var(--v-bg-accent3-secondary, 255, 239, 200));border:1px solid rgba(var(--v-bg-accent3-primary, 255, 220, 131));border-radius:4px;display:flex;flex-direction:row;justify-content:flex-start;align-items:stretch;gap:4px}div.statement .statementsyntax{padding:3px 0;line-height:22px}.rich-text-content div.statement .statementsyntax,.rich-text-content div.statement .statementelement{display:inline-block}div.statement+div.statement{margin-top:2px}div.statement .statementsyntax span{color:rgb(38, 42, 255);font-weight:bold}div.statement .statementelement{padding:2px 4px;background:rgba(var(--v-bg-secondary, 245, 247, 247));border:1px solid rgba(var(--v-border-color-input-field, 171, 198, 216));border-radius:4px;margin:0;min-width:8px}";
+
+/**
+ * Renderer for Function Block
+ */
+class RTEFunctionBlockRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(createElement, renderData) {
+    return createElement('div', {
+      key: renderData.id,
+      class: this.getElementClassName(renderData),
+      ref: this.useRef(renderData),
+    });
+  }
+  /**
+   * Defines the function block styles to be injected into the RTE scope.
+   *
+   * @returns {string} - The styles as a string.
+   */
+  injectRTEScopeStyles() {
+    return functionBlockStylesCss;
+  }
+  /**
+   * Gets the class name for the function block element.
+   *
+   * @param {RTEFunctionBlock} block - The function block.
+   * @returns {string} The class name for the function block element.
+   */
+  getElementClassName(block) {
+    let classes = block.getClasses();
+    if (classes.indexOf('statement') < 0) {
+      classes = 'statement ' + classes;
+    }
+    return classes.trim();
+  }
+}
+
+/**
+ * Abstract class for action handler interceptors, which can intercept actions before they are handled.
+ */
+class ActionHandlerInterceptor {
+}
+
+/**
+ * Prevent special type input in function block.
+ */
+class PreventNewParagraphInterceptor extends ActionHandlerInterceptor {
+  /**
+   * Checks the target block parent whether is function block.
+   *
+   * @param {InsertNewParagraphAction} _action - the action to be intercepted
+   * @param {RTETextBlock} target - the target block
+   * @returns {boolean} - true if the target block parent is function block, false otherwise
+   */
+  canIntercept(_action, target) {
+    return target.parent && target.parent instanceof RTEFunctionBlock;
+  }
+  /**
+   * Insert a new paragraph behind of the function block instead of the target block.
+   *
+   * @param {ActionHandlerExecution} _execution - the original execution function
+   * @param {ModifyContentAction} _action - the action to be intercepted
+   * @param {RTETextBlock} target - the target block
+   */
+  intercept(_execution, _action, target) {
+    const insertParagraphAction = new InsertNewParagraphAction(target.children[0], 0);
+    insertParagraphAction.isFlushable = true;
+    target.parent.apply(insertParagraphAction);
+  }
+}
+
+/**
+ * Insert a new paragraph behind of current function block strategy.
+ */
+class FunctionBlockInsertParagraphStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const newParagraph = this.createNewParagraph('');
+    if (newParagraph) {
+      target.parent.apply(new InsertChildrenAfterAction(target, newParagraph));
+      action.newBlock = newParagraph;
+      this.focusToNextLine(newParagraph);
+    }
+  }
+  /**
+   * Focus to next paragraph.
+   *
+   * @param {RTETextBlock} block - The paragraph need to focus.
+   */
+  focusToNextLine(block) {
+    const root = this.getRootContent(block);
+    if (root) {
+      root.apply(new UpdateCursorPositionAction(block.children[0], 1));
+    }
+  }
+}
+
+const PASTE_PLAIN_TEXT = 'PASTE_PLAIN_TEXT';
+/**
+ * Action to paste plain text content into function block.
+ *
+ * @example functionBlock.apply(new PastePlainTextAction('content', range))
+ * @example host.value.apply(new PastePlainTextAction('content', range))
+ */
+class PastePlainTextAction extends ModifyContentAction {
+  constructor(blocksToBeInserted, startNode, startOffset) {
+    super();
+    this.type = PASTE_PLAIN_TEXT;
+    this.blocksToBeInserted = blocksToBeInserted;
+    this.startNode = startNode;
+    this.startOffset = startOffset;
+  }
+}
+
+/**
+ * Prevent special type input in function block.
+ */
+class PreventPasteContentInterceptor extends PreventNewParagraphInterceptor {
+  /**
+   * Paste plain text into text block.
+   *
+   * @param {ActionHandlerExecution} _execution - the original execution function
+   * @param {ModifyContentAction} action - the action to be intercepted
+   * @param {RTETextBlock} target - the target block
+   */
+  intercept(_execution, action, target) {
+    const { blocksToBeInserted, rteRange } = action;
+    let { startNode, startOffset } = action;
+    // Set the start offset from rteRange if available, this is to handle the paste issue https://gethired.atlassian.net/browse/VD-7779
+    if (rteRange) {
+      startNode = rteRange.startNode;
+      startOffset = rteRange.startOffset;
+    }
+    const pastePlainTextAction = new PastePlainTextAction(blocksToBeInserted, startNode, startOffset);
+    target.apply(pastePlainTextAction);
+  }
+}
+
+/**
+ * Strategy to handle the paste content into function block.
+ */
+class PastePlainTextStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { blocksToBeInserted, startNode, startOffset } = action;
+    if (startNode instanceof RTETextNode) {
+      const textNodes = blocksToBeInserted.flatMap((block) => {
+        if (block instanceof RTETextBlock) {
+          this.copyLinkGroupAnnotations(target.annotationMap, block.annotationMap);
+          return block.children;
+        }
+        return [];
+      });
+      if (textNodes.length > 0) {
+        if (startOffset > 0) {
+          target.apply(new InsertChildrenAfterAction(startNode, ...textNodes));
+        }
+        else {
+          target.apply(new InsertChildrenBeforeAction(startNode, ...textNodes));
+        }
+        this.focusToNextLine(textNodes[textNodes.length - 1], textNodes[textNodes.length - 1].getRangeEndOffset());
+      }
+    }
+  }
+  /**
+   * Focus to next paragraph.
+   *
+   * @param {RTETextNode} node - The text node need to focus.
+   * @param {number} startOffset - The offset need to focus.
+   */
+  focusToNextLine(node, startOffset) {
+    const root = this.getRootContent(node);
+    if (root) {
+      root.apply(new UpdateCursorPositionAction(node, startOffset));
+    }
+  }
+  /**
+   * Copy link group annotations from copied block to target block.
+   *
+   * @param {BlockAnnotations} blockAnnotationMap - The target block annotation map.
+   * @param {BlockAnnotations} copiedAnnotationMap - The copied block annotation map.
+   */
+  copyLinkGroupAnnotations(blockAnnotationMap, copiedAnnotationMap) {
+    if (copiedAnnotationMap && copiedAnnotationMap.has(InternalAnnotationTypeEnum.LINK_GROUP)) {
+      const copiedLinkGroupAnnotation = copiedAnnotationMap.get(InternalAnnotationTypeEnum.LINK_GROUP);
+      if (!blockAnnotationMap.has(InternalAnnotationTypeEnum.LINK_GROUP)) {
+        blockAnnotationMap.set(InternalAnnotationTypeEnum.LINK_GROUP, copiedAnnotationMap.get(InternalAnnotationTypeEnum.LINK_GROUP));
+      }
+      else {
+        copiedLinkGroupAnnotation.linkGroups.forEach((nodes, groupKey) => {
+          const existingAnnotation = blockAnnotationMap.get(InternalAnnotationTypeEnum.LINK_GROUP);
+          existingAnnotation.linkGroups.set(groupKey, nodes);
+        });
+      }
+    }
+  }
+}
+
+const convertLogicControlBlockStrategy = new DivToLogicControlBlockStrategy();
+const convertFunctionContentStrategy = new DivToFunctionContentStrategy();
+const convertFunctionBlockStrategy = new DivToFunctionBlockStrategy();
+/**
+ * Function extension class for Vega Rich Text Editor.
+ */
+class VegaRTEFunctionExtension extends VegaRTEExtension {
+  constructor() {
+    super();
+    this.toolbarButtonRenderer = new FunctionToolbarButtonRenderer();
+    this.registerBlockBasicStrategies(RTELogicControlBlock.name);
+    this.registerBlockBasicStrategies(RTEFunctionBlock.name);
+    this.preventFunctionBlockDefaultInsertNewParagraph();
+    this.registerNode('logic-control-block', RTELogicControlBlock);
+    this.registerRenderer('logic-control-block', new RTELogicControlBlockRenderer());
+    this.registerNode('function-block', RTEFunctionBlock);
+    this.registerRenderer('function-block', new RTEFunctionBlockRenderer());
+    this.registerToolbarButtonRenderer('functions', this.toolbarButtonRenderer);
+    this.registerElementToBlockDTOClassStrategy(convertLogicControlBlockStrategy);
+    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
+   */
+  preventFunctionBlockDefaultInsertNewParagraph() {
+    this.unRegisterStrategy(ModifyContentActionType.INSERT_NEW_PARAGRAPH, RTELogicControlBlock.name);
+    this.unRegisterStrategy(ModifyContentActionType.APPEND_CHILDREN, RTEFunctionBlock.name);
+    this.unRegisterStrategy(ModifyContentActionType.INSERT_CHILDREN_AFTER, RTEFunctionBlock.name);
+    this.unRegisterStrategy(ModifyContentActionType.INSERT_CHILDREN_BEFORE, RTEFunctionBlock.name);
+    this.unRegisterStrategy(ModifyContentActionType.PASTE_CONTENT, RTELogicControlBlock.name);
+    VegaRTEExtension.registerActionHandleStrategy(RTEFunctionBlock.name, ModifyContentActionType.INSERT_NEW_PARAGRAPH, new FunctionBlockInsertParagraphStrategy());
+  }
+}
+(() => {
+  const insertFunctionBlockStrategy = new InsertFunctionBlockStrategy();
+  VegaRTEExtension.registerActionHandleStrategy(VegaRTEContent.name, INSERT_FUNCTION_BLOCK, insertFunctionBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, INSERT_FUNCTION_BLOCK, insertFunctionBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEImageBlock.name, INSERT_FUNCTION_BLOCK, insertFunctionBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTELogicControlBlock.name, INSERT_FUNCTION_BLOCK, insertFunctionBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, PASTE_PLAIN_TEXT, new PastePlainTextStrategy());
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETextBlock.name, ModifyContentActionType.INSERT_NEW_PARAGRAPH, new PreventNewParagraphInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETextBlock.name, ModifyContentActionType.PASTE_CONTENT, new PreventPasteContentInterceptor());
+})();
+
+const tableBlockStylesCss = ".v-rte--extension-table-container{display:table}table.v-rte--extension-table{border-collapse:collapse}table.v-rte--extension-table th,table.v-rte--extension-table td{border:1px solid #ddd;padding:12px;text-align:left;vertical-align:middle;min-width:30px;position:relative}table.v-rte--extension-table th{background-color:#f2f2f2}.rte-table-setting-popover,.rte-table-dynamic-popover{display:block}table.v-rte--extension-table .v-rte-table-cell-focused::after,table.v-rte--extension-table .v-rte-table-cell-selected::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;background-color:rgba(158, 207, 250, 0.3)}table.v-rte--extension-table:has(.v-rte-table-cell-selected){caret-color:transparent}table.v-rte--extension-table:has(.v-rte-table-cell-selected) ::selection{background-color:transparent}table.v-rte--extension-table:has(.v-rte-table-cell-selected) ::-moz-selection{background-color:transparent}.v-rte--extension-table-caption{padding:8px;border:1px solid #ddd;border-bottom:none;background-color:#f7f7f7;position:relative;display:table-caption;caption-side:top;min-height:22px;text-align:center;word-break:break-word;overflow-wrap:break-word}.v-rte--extension-table-caption.showPlaceholder::before{position:absolute;left:0;right:0;content:attr(data-placeholder);font-family:'Inter', sans-serif;font-size:16px;font-weight:400;line-height:24px;letter-spacing:0;color:rgba(var(--v-text-input-placeholder, 176, 180, 181, 1));text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rte-cell-properties-popover,.rte-table-properties-popover{display:none}";
+
+const DELETE_TABLE_BLOCK = 'DELETE_TABLE_BLOCK';
+/**
+ * Action to delete a table block
+ */
+class DeleteTableBlockAction extends ModifyContentAction {
+  constructor(target) {
+    super();
+    this.isFlushable = true;
+    this.type = DELETE_TABLE_BLOCK;
+    this.tableBlock = target;
+  }
+}
+
+/**
+ * Class representing a table caption annotation in the rich text editor.
+ */
+class RTETableCaptionAnnotation extends BlockAnnotation {
+  constructor() {
+    super(...arguments);
+    this.type = RTETableExtensionAnnotationTypeEnum.CAPTION;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone() {
+    return new RTETableCaptionAnnotation();
+  }
+  /**
+   * @inheritDoc
+   */
+  renderClass(options) {
+    if (options === null || options === void 0 ? void 0 : options.standalone)
+      return null;
+    return 'v-rte--extension-table-caption';
+  }
+  /**
+   * @inheritDoc
+   */
+  renderStyle(options) {
+    if (!(options === null || options === void 0 ? void 0 : options.standalone))
+      return null;
+    return {
+      padding: '8px',
+      border: '1px solid #ddd',
+      borderBottom: 'none',
+      backgroundColor: '#f7f7f7',
+      position: 'relative',
+      textAlign: 'center',
+      minHeight: '22px',
+    };
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return {
+      caption: {
+        padding: '8px 12px',
+        border: '1px solid #ddd',
+        borderBottom: 'none',
+        backgroundColor: '#f7f7f7',
+        position: 'relative',
+        textAlign: 'center',
+        minHeight: '22px',
+      },
+    };
+  }
+}
+
+/**
+ * Represents the optional caption block for a table.
+ */
+class RTETableCaptionBlock extends RTEBlock {
+  constructor(id) {
+    super(id);
+    this.type = 'table-caption';
+    this.annotationMap.set(RTETableExtensionAnnotationTypeEnum.CAPTION, new RTETableCaptionAnnotation());
+  }
+  /**
+   * @inheritDoc
+   */
+  static from(block, options) {
+    const captionBlock = new RTETableCaptionBlock(block.id);
+    super.convertAnnotationsToMap(captionBlock.annotationMap, Object.assign({}, block.annotations));
+    captionBlock.children = super.generateBlockChildren(block.children, options, captionBlock);
+    return captionBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  clone(parent) {
+    const clonedBlock = new RTETableCaptionBlock(this.id);
+    clonedBlock.children = this.children.map((child) => child.clone(clonedBlock));
+    clonedBlock.parent = parent;
+    return clonedBlock;
+  }
+  /**
+   * @inheritDoc
+   */
+  getLastNode() {
+    return this.children[this.children.length - 1].getLastNode();
+  }
+  /**
+   * @inheritDoc
+   */
+  isNotEmpty() {
+    return this.children.length > 0 && this.children.some((child) => child.isNotEmpty());
+  }
+  /**
+   * @inheritDoc
+   */
+  toHtml() {
+    const childrenHtml = this.children.map((child) => child.toHtml()).join('');
+    const attrStr = super.generateAttributeString();
+    return `<caption${attrStr}>${childrenHtml}</caption>`;
+  }
+  /**
+   * @inheritDoc
+   */
+  toJSON() {
+    return Object.assign(Object.assign({}, super.toJSON()), { type: this.type, children: this.children.map((child) => child.toJSON()) });
+  }
+}
+(() => {
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.INSERT_CHILDREN_BEFORE, RTETableCaptionBlock.name, new InsertChildrenBeforeStrategy());
+  ActionHandleStrategyRegistry.register(ModifyContentActionType.PASTE_CONTENT, RTETableCaptionBlock.name, new PasteContentStrategy());
+})();
+
+const TOGGLE_TABLE_CAPTION = 'TOGGLE_TABLE_CAPTION';
+/**
+ * Action payload for toggling the optional table caption block.
+ */
+class TableCaptionAction extends ModifyContentAction {
+  constructor(shouldEnable) {
+    super();
+    this.type = TOGGLE_TABLE_CAPTION;
+    this.isFlushable = true;
+    this.shouldEnable = shouldEnable;
+  }
+}
+
+/**
+ * Event handler for row operations in a table.
+ */
+class CaptionOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.CAPTION;
+  }
+  /**
+   * Toggle caption state for the target table block when the caption menu item is clicked.
+   *
+   * @param {Array<string>} action - Table setting payload, e.g. ['CAPTION', 'rte-table-caption'].
+   * @param {RTEExtensionContext} _extensionContext - Current editor extension context (unused here).
+   * @param {RTETableBlock} tableBlock - Table block that owns the caption.
+   */
+  execute(action, _extensionContext, tableBlock) {
+    const shouldEnable = action[1] === 'rte-table-caption';
+    const toggleAction = new TableCaptionAction(shouldEnable);
+    const existingCaption = tableBlock.getCaption();
+    if (shouldEnable) {
+      const hydratedCaption = existingCaption && existingCaption.isNotEmpty()
+        ? existingCaption
+        : this.createCaptionBlock(existingCaption === null || existingCaption === void 0 ? void 0 : existingCaption.id);
+      if (!existingCaption || hydratedCaption !== existingCaption) {
+        tableBlock.setCaption(hydratedCaption);
+      }
+      toggleAction.nextFocusNode = hydratedCaption.getLastNode();
+    }
+    else {
+      if (existingCaption) {
+        tableBlock.setCaption(null);
+        toggleAction.nextFocusNode = tableBlock.getFirstNode();
+      }
+    }
+    this.syncCursorPosition(tableBlock, toggleAction.nextFocusNode);
+  }
+  /**
+   * Applies a cursor update action so the editor focuses on the resolved node.
+   *
+   * @param {RTETableBlock} block - Table block currently being toggled.
+   * @param {Nullable<RTENode>} focusNode - Target node that should receive the caret.
+   */
+  syncCursorPosition(block, focusNode) {
+    super.syncCursorPosition(block, focusNode);
+  }
+  /**
+   * Build a fresh caption block with a default paragraph + placeholder text.
+   *
+   * @param {string} id - table-caption id
+   * @returns {RTETableCaptionBlock} Newly created caption DTO ready for rendering.
+   */
+  createCaptionBlock(id) {
+    const captionData = {
+      id: id !== null && id !== void 0 ? id : generateUUID(),
+      type: 'table-caption',
+      children: [
+        {
+          id: generateUUID(),
+          type: 'paragraph',
+          nodes: [
+            {
+              id: generateUUID(),
+              type: 'text',
+              text: '',
+            },
+          ],
+        },
+      ],
+    };
+    return RTETableCaptionBlock.from(captionData);
+  }
+}
+
+/**
+ * Centralizes the popover rendering and interaction logic for table settings.
+ */
+class TableSettingPopoverRenderer {
+  constructor() {
+    this.settingHandlers = [
+      new RowOperationEventHandler(),
+      new CaptionOperationEventHandler(),
+      new ColumnOperationEventHandler(),
+    ];
+    /**
+     * Show table setting popover when table is clicked.
+     * Only the popover belonging to the nearest table will be shown,
+     * which avoids outer tables showing their popover when an inner (nested) table is clicked.
+     *
+     * @param {MouseEvent} event - The MouseEvent that triggered the table action
+     * @param {HTMLElement} trigger - The element that can triggered the popover open.
+     */
+    this.handleTableClick = (event, trigger) => {
+      const target = event.target;
+      const ownTrigger = target.closest('.v-rte--extension-table-popover-trigger');
+      if (trigger !== ownTrigger) {
+        void this.popoverRef.hide();
+        void this.tableDynamicPopover.hide();
+        return;
+      }
+      void this.tableDynamicPopover.hide();
+      if (!this.popoverShow) {
+        remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), ownTrigger);
+        void this.popoverRef.show();
+      }
+    };
+    /**
+     * Sync the selected cells from the table selection to the table setting component.
+     */
+    this.syncSelectedCells = () => {
+      if (this.tableSettingRef) {
+        const selectedCells = this.getTableSelectedCells();
+        this.tableSettingRef.selectedCells = selectedCells;
+      }
+    };
+    /**
+     * Receive setting menu click events.
+     *
+     * @param {CustomEvent<Array<string>>} event - The custom event emitted from the setting menu.
+     */
+    this.handleSettingMenuClick = (event) => {
+      const handler = this.settingHandlers.find((handler) => handler.canHandle(event.detail));
+      if (handler) {
+        handler.execute(event.detail, this.extensionContext, this.tableData);
+        if (event.detail[0] === TableSettingType.CAPTION) {
+          this.updateTableSettingCaption();
+        }
+      }
+      if (event.detail[0] === TableSettingType.TABLE_PROPERTIES ||
+        event.detail[0] === TableSettingType.CELL_PROPERTIES) {
+        void this.popoverRef.hide();
+        void this.tableDynamicPopover.show(event.detail[0]);
+      }
+    };
+    /**
+     * Handles the popover show event to sync the selected table cells to the table setting component.
+     */
+    this.handleTableSettingPopoverShow = () => {
+      this.syncSelectedCells();
+      this.popoverShow = true;
+    };
+  }
+  /**
+   * Injects the RTE extension context.
+   *
+   * @param {RTETableExtensionContext} context - The RTE extension context.
+   */
+  injectRTEExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Render the popover host and inject the table-setting component with refs wired up.
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {RTETableBlock} renderData - The table block to render.
+   * @param {TableDynamicPopoverRenderer} tableDynamicPopover - Renderer used to show
+   *  the secondary table popover (for example, table-properties-specific settings).
+   * @returns {VegaRTERenderResult} The rendered popover structure.
+   */
+  render(h, renderData, tableDynamicPopover) {
+    this.tableData = renderData;
+    this.tableDynamicPopover = tableDynamicPopover;
+    return h('vega-popover', {
+      trigger: 'click',
+      isScreenPosition: true,
+      class: 'rte-table-setting-popover',
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (popover) => {
+        this.popoverRef = popover;
+        if (this.popoverRef) {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverShow, this.handleTableSettingPopoverShow);
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => (this.popoverShow = false));
+        }
+      },
+    }, [
+      h('div', { slot: 'popover' }, [
+        h('vega-rich-text-table-setting', {
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          ref: (el) => {
+            this.tableSettingRef = el;
+          },
+          selectedCells: this.getTableSelectedCells(),
+          onVegaClick: this.handleSettingMenuClick,
+        }),
+      ]),
+    ]);
+  }
+  /**
+   * Updates the table setting component caption state to match the given table data.
+   */
+  updateTableSettingCaption() {
+    const hasCaption = this.tableData.hasCaption();
+    if (this.tableSettingRef && this.tableSettingRef.hasCaption !== hasCaption) {
+      this.tableSettingRef.hasCaption = hasCaption;
+    }
+  }
+  /**
+   * Collects and returns the currently selected table cells.
+   *
+   * @returns {RTETableCellBlock[]} The array of currently selected table cell blocks.
+   */
+  getTableSelectedCells() {
+    let selectedCells = [];
+    if (this.extensionContext && this.extensionContext.tableSelection) {
+      const { tableSelection } = this.extensionContext;
+      selectedCells = tableSelection.getSelectedCells();
+    }
+    return selectedCells;
+  }
+}
+
+const CONTENT_CLASS_MAP = {
+  [TableSettingType.TABLE_PROPERTIES]: 'rte-table-properties-popover',
+  [TableSettingType.CELL_PROPERTIES]: 'rte-cell-properties-popover',
+};
+/**
+ * Renderer for a generic, dynamically positioned popover used within table-related extensions.
+ *
+ * - The popover target is based on the current cursor/selection position.
+ * - The popover content is rendered dynamic content.
+ */
+class TableDynamicPopoverRenderer {
+  /**
+   * Shows the popover. Before showing, it will refresh the target so
+   * that the popover is positioned relative to the latest cursor position.
+   *
+   * @param {string} type - The table setting type determining which
+   *  content variant to display (for example, table properties or cell properties).
+   */
+  async show(type) {
+    let target = this.getTableRef();
+    const cells = this.extensionContext.tableSelection.getSelectedCells();
+    if (type !== TableSettingType.TABLE_PROPERTIES && cells.length === 1) {
+      target = stateEntityRenderingRegistry.getDOMByEntity(cells[0]);
+    }
+    this.updateContent(type);
+    remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), target);
+    await this.popoverRef.show();
+  }
+  /**
+   * hide the popover.
+   */
+  async hide() {
+    await this.popoverRef.hide();
+  }
+  /**
+   * Injects the RTE extension context.
+   *
+   * @param {RTETableExtensionContext} context - The RTE extension context.
+   */
+  injectRTEExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Renders a vega-popover whose target and content are provided dynamically by callers.
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {() => HTMLElement} getTableRef - Current table DOM reference
+   * @returns {VegaRTERenderResult} The rendered popover host.
+   */
+  render(h, getTableRef) {
+    this.getTableRef = getTableRef;
+    return h('vega-popover', {
+      trigger: 'click',
+      isScreenPosition: true,
+      class: 'rte-table-dynamic-popover',
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (popover) => {
+        this.popoverRef = popover;
+      },
+    }, [
+      h('div', {
+        slot: 'popover',
+        class: 'rte-table-dynamic-popover-content',
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        ref: (ref) => (this.contentRef = ref),
+      }, [
+        h('div', {
+          class: CONTENT_CLASS_MAP[TableSettingType.TABLE_PROPERTIES],
+        }, 'table-properties'),
+        h('div', {
+          class: CONTENT_CLASS_MAP[TableSettingType.CELL_PROPERTIES],
+        }, 'cell-properties'),
+      ]),
+    ]);
+  }
+  /**
+   * Updates the visibility of the pre-rendered content blocks based on type.
+   *
+   * @param {string} type - The table setting type determining which content variant should be visible.
+   */
+  updateContent(type) {
+    if (type !== this.currentType) {
+      this.currentType = type;
+      this.contentRef.childNodes.forEach((child) => {
+        if (child.classList.contains(CONTENT_CLASS_MAP[this.currentType])) {
+          child.style.display = 'block';
+        }
+        else {
+          child.style.display = 'none';
+        }
+      });
+    }
+  }
+}
+
+/**
+ * Renderer for the RTETableBlock.
+ */
+class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
+  constructor() {
+    super(...arguments);
+    this.extensionContext = null;
+  }
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData, rteContext) {
+    const tableSettingPopoverRenderer = new TableSettingPopoverRenderer();
+    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer();
+    if (this.extensionContext) {
+      tableSettingPopoverRenderer.injectRTEExtensionContext(this.extensionContext);
+      tableDynamicPopoverRenderer.injectRTEExtensionContext(this.extensionContext);
+    }
+    let tableRef;
+    const table = this.renderTable(h, renderData);
+    const tableSettingPopover = tableSettingPopoverRenderer.render(h, renderData, tableDynamicPopoverRenderer);
+    const tableDynamicPopover = tableDynamicPopoverRenderer.render(h, () => tableRef);
+    const tableAnnotation = renderData.getAnnotationByType(RTETableExtensionAnnotationTypeEnum.TABLE);
+    const children = rteContext.editable
+      ? [
+        h('vega-rich-text-table-selection-widget', {
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          onVegaRemove: (e) => {
+            e.stopPropagation();
+            this.handleTableRemove(renderData);
+          },
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          onClick: (event) => tableSettingPopoverRenderer.handleTableClick(event, tableRef),
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          onMouseLeave: () => {
+            tableSettingPopoverRenderer.syncSelectedCells();
+          },
+        }, [
+          h('vega-box', {
+            class: 'v-rte--extension-table-popover-trigger',
+            // eslint-disable-next-line jsdoc/require-jsdoc
+            ref: (ref) => (tableRef = ref),
+          }, [table, tableSettingPopover, tableDynamicPopover]),
+        ]),
+      ]
+      : [table];
+    const result = h('div', {
+      class: 'v-rte--extension-table-container',
+      style: Object.assign({}, (tableAnnotation && tableAnnotation.renderAlignmentStyle())),
+    }, children);
+    /**
+     * The getter for the children container.
+     *
+     * @returns {VegaRTERenderResult} - The children container render result.
+     */
+    result.childrenContainerGetter = () => table;
+    return result;
+  }
+  /**
+   * @inheritDoc
+   */
+  injectRTEScopeStyles() {
+    return tableBlockStylesCss;
+  }
+  /**
+   * Injects the RTE extension context.
+   *
+   * @param {RTETableExtensionContext} context - The RTE extension context.
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Renders the table element.
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {RTETableBlock} renderData - The table block to render.
+   * @returns {VegaRTERenderResult} - The rendered table element.
+   */
+  renderTable(h, renderData) {
+    var _a;
+    return h('table', Object.assign(Object.assign({ key: renderData.id }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(), class: [RTETableBlockRenderer.EXTENSION_TABLE_CLASS, renderData.getClasses()].join(' '), 
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (ref) => {
+        this.useRef(renderData)(ref);
+      } }));
+  }
+  /**
+   * Handles the removal of the table block.
+   *
+   * @param {RTETableBlock} renderData - The table block to remove.
+   */
+  handleTableRemove(renderData) {
+    renderData.parent.apply(new DeleteTableBlockAction(renderData));
+  }
+}
+RTETableBlockRenderer.EXTENSION_TABLE_CLASS = 'v-rte--extension-table';
+
+/**
+ * Renders a logic control block in the rich text editor.
+ */
+class RTETableHeadRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('thead', {
+      key: renderData.id,
+      ref: this.useRef(renderData),
+    });
+  }
+}
+
+/**
+ * Renders a logic control block in the rich text editor.
+ */
+class RTETableRowBlockRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('tr', {
+      key: renderData.id,
+      ref: this.useRef(renderData),
+    });
+  }
+}
+
+/**
+ * Renders a table cell block in the rich text editor.
+ */
+class RTETableCellRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData, rteContext) {
+    return this.renderByCellType(h, renderData, rteContext, 'td');
+  }
+  /**
+   * Injects the extension context
+   *
+   * @param {RTETableExtensionContext} context - extension context
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Renders the table cell based on its type (td or th).
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {RTETableCellBlock} renderData - The table cell block to render.
+   * @param {RTERenderContext} rteContext - The rte editor context.
+   * @param {'td' | 'th'} elementType - The type of table cell element ('td' or 'th').
+   * @returns {VegaRTERenderResult} - The rendered table cell element.
+   */
+  renderByCellType(h, renderData, rteContext, elementType) {
+    var _a;
+    return h(elementType, Object.assign(Object.assign(Object.assign({ key: renderData.id, ref: this.useRef(renderData) }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(rteContext), class: renderData.getClasses() }), (rteContext.editable ? this.onSelectionListeners(renderData) : undefined)));
+  }
+  /**
+   * Returns the mouse event listeners for selection handling.
+   *
+   * @param {RTETableCellBlock} renderData - The table cell block to render.
+   * @returns {RTETableSelectionListenersType} - The mouse event listeners.
+   */
+  onSelectionListeners(renderData) {
+    return {
+      /**
+       * Handles the mouse down event to focus a cell.
+       *
+       * @param {MouseEvent} event - The mouse event.
+       */
+      onMouseDown: (event) => {
+        const targetParentTable = findParent(event.target, 'table');
+        const currentTable = findParent(event.currentTarget, 'table');
+        const inCurrentTable = currentTable === targetParentTable;
+        const cellRef = event.target.closest('td, th');
+        if (inCurrentTable && cellRef) {
+          this.extensionContext.tableSelection.focusCell(cellRef);
+        }
+      },
+      /**
+       * Handles the mouse move event to start selection.
+       *
+       * @param {MouseEvent} event - The mouse event.
+       */
+      onMouseMove: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        this.extensionContext.tableSelection.dragOver(renderData);
+      },
+      /**
+       * Handles the mouse up event to end selection.
+       */
+      onMouseUp: () => {
+        this.extensionContext.tableSelection.endDrag();
+      },
+    };
+  }
+}
+
+/**
+ * Renders a table body block in the rich text editor.
+ */
+class RTETableBodyRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('tbody', {
+      key: renderData.id,
+      ref: this.useRef(renderData),
+    });
+  }
+}
+
+/**
+ * Renders a head cell block in the rich text editor.
+ */
+class RTETableHeadCellRenderer extends RTETableCellRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData, rteContext) {
+    return super.renderByCellType(h, renderData, rteContext, 'th');
+  }
+}
+
+const INSERT_TABLE_BLOCK = 'INSERT_TABLE_BLOCK';
+/**
+ * Action to insert a table block into the rich text editor.
+ */
+class InsertTableBlockAction extends ModifyContentAction {
+  constructor(rowCount, columnCount) {
+    super();
+    this.type = INSERT_TABLE_BLOCK;
+    this.rowCount = rowCount;
+    this.columnCount = columnCount;
+  }
+}
+
+const tableIcon = {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M48 264V160H232V264H48zm0 48H232V432H64c-8.8 0-16-7.2-16-16V312zM280 432V312H464V416c0 8.8-7.2 16-16 16H280zM464 264H280V160H464V264zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>`,
+};
+
+/**
+ * Function toolbar button renderer class.
+ */
+class RTETableToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
+  constructor() {
+    super(...arguments);
+    this.hoveredRows = 1;
+    this.hoveredCols = 1;
+  }
+  /**
+   * Injects the extension context
+   *
+   * @param {RTETableExtensionContext} context - extension context
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * @inheritDoc
+   */
+  render(h, editorContext) {
+    return this.renderTablePicker(h, super.renderButton(h, editorContext, {
+      showArrowIcon: true,
+      icon: 'rte-table',
+    }));
+  }
+  /**
+   * Overrides the isDisabled method to determine if the button should be disabled.
+   *
+   * @returns {boolean} - true if the button should be disabled, false otherwise.
+   */
+  isDisabled() {
+    const { host, getSelectedNodes } = this.extensionContext;
+    const focusNode = getSelectedNodes()[0];
+    let enableInsert = true;
+    if (focusNode) {
+      enableInsert =
+        ActionHandleStrategyRegistry.canHandle(INSERT_TABLE_BLOCK, focusNode.parent) &&
+          ActionHandleStrategyRegistry.canHandle(ModifyContentActionType.INSERT_CHILDREN_AFTER, focusNode.parent.parent);
+    }
+    return host.disabled || !enableInsert;
+  }
+  /**
+   * @inheritDoc
+   */
+  handleButtonClick() {
+  }
+  /* istanbul ignore next */
+  /**
+   * @inheritDoc
+   */
+  handleDropdownClick() {
+  }
+  /**
+   * Renders the table size picker popover.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @param {VegaRTERenderResult} children - The children elements to render inside the popover.
+   * @returns {VegaRTERenderResult} - The render result for the table size picker popover.
+   */
+  renderTablePicker(h, children) {
+    return h('vega-popover', {
+      trigger: 'click',
+      alignment: 'start',
+      placement: 'bottom',
+      showArrow: false,
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (ref) => {
+        if (ref) {
+          this.tablePickerPopoverRef = ref;
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaPopoverShow, () => {
+            this.resetPicker();
+          });
+        }
+      },
+    }, [
+      h('div', { slot: 'popover' }, [this.generatePickerStyles(h), this.generateTableSizeGrid(h)]),
+      h('div', { slot: 'popover-content' }, children),
+    ]);
+  }
+  /**
+   * Generates the table size picker grid.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @returns {VegaRTERenderResult} - The render result for the table size picker.
+   */
+  generateTableSizeGrid(h) {
+    const rows = 10;
+    const cols = 10;
+    const gridCells = [];
+    for (let r = 1; r <= rows; r++) {
+      for (let c = 1; c <= cols; c++) {
+        gridCells.push(h('button', {
+          'class': `rte-table-picker__cell`,
+          'data-row': r,
+          'data-col': c,
+          'onMouseenter': this.handlePickerCellHover.bind(this, r, c),
+          'onClick': this.handlePickerClick.bind(this, r, c),
+        }, []));
+      }
+    }
+    return h('div', { class: 'rte-table-picker' }, [
+      h('div', {
+        class: 'rte-table-picker__grid',
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        ref: (ref) => {
+          if (ref) {
+            this.tablePickerGridRef = ref;
+          }
+        },
+        style: {
+          gridTemplateColumns: `repeat(${cols}, 16px)`,
+          gridTemplateRows: `repeat(${rows}, 16px)`,
+        },
+      }, gridCells),
+      h('div', {
+        class: 'rte-table-picker__hint',
+      }, h('vega-hint', {
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        ref: (ref) => {
+          if (ref) {
+            this.selectedHintRef = ref;
+          }
+        },
+      }, [`${this.hoveredRows} × ${this.hoveredCols}`])),
+    ]);
+  }
+  /**
+   * Generates the styles for the table size picker.
+   *
+   * @param {VegaRTECreateElementFunction} h - Create element function.
+   * @returns {VegaRTERenderResult} - The render result for the styles.
+   */
+  generatePickerStyles(h) {
+    return h('style', {}, [
+      // eslint-disable-next-line spellcheck/spell-checker
+      `
+.rte-table-picker__grid { display: grid; gap: 2px; }
+.rte-table-picker__cell {
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  background-color: transparent;
+  cursor: pointer;
+}
+.rte-table-picker__cell:hover {
+  background-color: #cae1fc;
+}
+.rte-table-picker__cell.active {
+  background-color: #cae1fc;
+}
+.rte-table-picker__hint {
+	text-align: center;
+}
+      `,
+    ]);
+  }
+  /**
+   * Creates a table block with the specified number of rows and columns.
+   *
+   * @param {number} row - The number of rows for the table.
+   * @param {number} column - The number of columns for the table.
+   */
+  createTable(row, column) {
+    const { host, getSelectedNodes } = this.extensionContext;
+    const focusNode = getSelectedNodes()[0];
+    const action = new InsertTableBlockAction(row, column);
+    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));
+    }
+  }
+  /**
+   * Handles the click event on a picker cell.
+   *
+   * @param {number} r - The number of rows selected.
+   * @param {number} c - The number of columns selected.
+   */
+  handlePickerClick(r, c) {
+    this.createTable(r, c);
+    void this.tablePickerPopoverRef.hide();
+  }
+  /**
+   * Handles the hover event on a picker cell.
+   *
+   * @param {number} r - The number of rows being hovered over.
+   * @param {number} c - The number of columns being hovered over.
+   */
+  handlePickerCellHover(r, c) {
+    this.hoveredRows = r;
+    this.hoveredCols = c;
+    Array.from(this.tablePickerGridRef.children).forEach((cell) => {
+      const rIndex = Number(cell.dataset.row);
+      const cIndex = Number(cell.dataset.col);
+      if (rIndex <= this.hoveredRows && cIndex <= this.hoveredCols) {
+        cell.classList.add('active');
+      }
+      else {
+        cell.classList.remove('active');
+      }
+    });
+    this.selectedHintRef.textContent = `${this.hoveredRows} × ${this.hoveredCols}`;
+  }
+  /**
+   * Resets the table picker to its initial state.
+   */
+  resetPicker() {
+    this.handlePickerCellHover(1, 1);
+  }
+}
+(() => {
+  VegaInternalIconManager.register({ 'rte-table': tableIcon });
+})();
+
+/**
+ * Strategy to handle the insertion of a block into the rich text editor.
+ */
+class InsertTableBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const tableBlock = this.createTableBlock(action.rowCount, action.columnCount);
+    const emptyParagraph = super.createNewParagraph('');
+    const referenceBlock = this.getReferenceBlock(target);
+    if (referenceBlock) {
+      referenceBlock.parent.apply(new InsertChildrenAfterAction(referenceBlock, tableBlock, emptyParagraph));
+    }
+    else {
+      target.apply(new AppendChildrenAction([tableBlock, emptyParagraph]));
+    }
+    action.nextFocusNode = tableBlock.getFirstNode();
+  }
+  /**
+   * Create a table block with the specified number of rows and columns.
+   *
+   * @param {number} row - The number of rows in the table.
+   * @param {number} column - The number of columns in the table.
+   * @returns {RTETableBlock} The created table block.
+   */
+  createTableBlock(row, column) {
+    const normalizedRowCount = Math.max(row, 1);
+    const normalizedColumnCount = Math.max(column, 1);
+    return RTETableBlock.from({
+      id: generateUUID(),
+      type: 'table-block',
+      children: [generateTableBody(normalizedRowCount, normalizedColumnCount)],
+    });
+  }
+  /**
+   * We need to get the correct block if the current target is a block element to avoid nesting blocks.
+   *
+   * @param {RTEBlock} currentTarget - The current target block or content.
+   * @returns {Nullable<RTEBlock>} The reference block.
+   */
+  getReferenceBlock(currentTarget) {
+    if (!(currentTarget instanceof VegaRTEContent)) {
+      return currentTarget;
+    }
+  }
+}
+
+/**
+ * Interceptor to prevent deletion of a table cell if it is the cell with empty content.
+ */
+class PreventCellContentDeleteInterceptor extends ActionHandlerInterceptor {
+  /**
+   * Prevent deletion if the target block is the only child of a table cell and is empty.
+   *
+   * @param {DeleteBlockContentAction} _action - the action to be intercepted
+   * @param {RTETextBlock} target - the target block
+   * @returns {boolean} - true if the deletion should be intercepted, false otherwise
+   */
+  canIntercept(_action, target) {
+    const cell = target.parent;
+    return cell instanceof RTETableCellBlock && cell.children.length === 1 && !target.isNotEmpty();
+  }
+  /**
+   * @inheritDoc
+   */
+  intercept() {
+  }
+}
+
+/**
+ * Strategy to handle the deletion of a table block from the parent.
+ */
+class DeleteTableBlockStrategy extends ActionHandleStrategy {
+  /**
+   * Deletes the specified table block and updates the cursor position.
+   *
+   * @param {DeleteTableBlockAction} action - The action containing the table block to delete.
+   */
+  handleAction(action) {
+    const tableBlock = action.tableBlock;
+    const parent = tableBlock.parent;
+    const root = super.getRootContent(tableBlock);
+    const newParagraph = super.createNewParagraph('');
+    parent.apply(new InsertChildrenAfterAction(tableBlock, newParagraph));
+    parent.apply(new RemoveChildrenAction(tableBlock));
+    if (root) {
+      root.apply(new UpdateCursorPositionAction(newParagraph.getLastNode()));
+    }
+  }
+}
+
+/**
+ * Interceptor to prevent removal of all children from a cell, ensuring at least one child remains.
+ */
+class PreventCellChildrenRemoveInterceptor extends ActionHandlerInterceptor {
+  /**
+   * Prevent removal if the target cell would be left empty after the action.
+   *
+   * @param {RemoveChildrenAction} action - the action to be intercepted
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} target - the target cell block
+   * @returns {boolean} - true if the removal should be intercepted, false otherwise
+   */
+  canIntercept(action, target) {
+    return action.entityToBeRemoved && target.children.length === 1;
+  }
+  /**
+   * Add a new empty text node to the cell to prevent it from removal.
+   *
+   * @param {ActionHandlerExecution} _execution - the original execution function
+   * @param {RemoveChildrenAction} action - the action to be intercepted
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} target - the target cell block
+   */
+  intercept(_execution, action, target) {
+    if (!(action.entityToBeRemoved instanceof RTETextBlock)) {
+      const newParagraph = RTETextBlock.from({
+        id: generateUUID(),
+        type: 'paragraph',
+        nodes: [{ id: generateUUID(), type: 'text', text: '' }],
+      });
+      target.children = [];
+      target.apply(new AppendChildrenAction([newParagraph]));
+      return;
+    }
+    action.entityToBeRemoved.apply(new AppendChildrenAction([
+      new RTETextNode(generateUUID(), '', action.entityToBeRemoved),
+    ]));
+  }
+}
+
+/**
+ * Strategy class for handling the insertion of a new row into a table.
+ */
+class InsertTableRowStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { insertDirection, selectedRows } = action;
+    // The reference block will control where to insert the new row
+    let refBlock = insertDirection === InsertTableRowDirection.ABOVE
+      ? selectedRows[0]
+      : selectedRows[selectedRows.length - 1];
+    // The row need to be inserted is a header row
+    if (this.shouldInsertHeaderRow(refBlock, insertDirection)) {
+      const headerBlock = RTETableRowBlock.from({
+        id: generateUUID(),
+        type: 'table-row',
+        children: refBlock.children.map((item) => {
+          return this.getDefaultCellBlockTemplate(item.type);
+        }),
+      });
+      if (insertDirection === InsertTableRowDirection.ABOVE) {
+        refBlock.parent.apply(new InsertChildrenBeforeAction(refBlock, headerBlock));
+      }
+      else {
+        refBlock.parent.apply(new InsertChildrenAfterAction(refBlock, headerBlock));
+      }
+    }
+    else {
+      let direction = insertDirection;
+      let tableBody = target.children.find((block) => block instanceof RTETableBodyBlock);
+      // Should insert into body if reference block is in head row and body exists
+      if (refBlock.parent instanceof RTETableHeadBlock && tableBody) {
+        refBlock = tableBody.children[0];
+        direction = InsertTableRowDirection.ABOVE;
+      }
+      const refBlockIsHeaderRow = refBlock.parent instanceof RTETableHeadBlock;
+      const rowBlock = RTETableRowBlock.from({
+        id: generateUUID(),
+        type: 'table-row',
+        children: refBlock.children.map((item) => {
+          return this.getDefaultCellBlockTemplate(refBlockIsHeaderRow ? 'table-cell' : item.type);
+        }),
+      });
+      if (!tableBody) {
+        tableBody = RTETableBodyBlock.from({
+          id: generateUUID(),
+          type: 'table-body',
+          children: [],
+        });
+        tableBody.apply(new AppendChildrenAction([rowBlock]));
+        target.apply(new AppendChildrenAction([tableBody]));
+      }
+      else {
+        if (direction === InsertTableRowDirection.ABOVE) {
+          tableBody.apply(new InsertChildrenBeforeAction(refBlock, rowBlock));
+        }
+        else {
+          tableBody.apply(new InsertChildrenAfterAction(refBlock, rowBlock));
+        }
+      }
+    }
+  }
+  /**
+   * Checks if a header row should be inserted based on the selected rows and position.
+   *
+   * @param {RTETableRowBlock} refBlock - The reference table row block.
+   * @param {InsertTableRowDirection} direction - The direction to insert the new row (above or below).
+   * @returns {boolean} True if a header row should be inserted, false otherwise.
+   */
+  shouldInsertHeaderRow(refBlock, direction) {
+    if (direction === InsertTableRowDirection.ABOVE) {
+      return refBlock.parent instanceof RTETableHeadBlock;
+    }
+    else {
+      const parentBlock = refBlock.parent;
+      return (parentBlock instanceof RTETableHeadBlock &&
+        parentBlock.children[parentBlock.children.length - 1] !== refBlock);
+    }
+  }
+  /**
+   * Get the default cell block template.
+   *
+   * @param {string} cellType - The type of the cell block.
+   * @returns {VegaRTETableCellBlock | VegaRTETableHeadCellBlock} The default cell block template.
+   */
+  getDefaultCellBlockTemplate(cellType) {
+    const id = generateUUID();
+    return {
+      id,
+      type: cellType,
+      children: [
+        {
+          id: `${id}-p`,
+          type: 'paragraph',
+          nodes: [
+            {
+              id: `${id}-p-t`,
+              type: 'text',
+              text: '',
+            },
+          ],
+        },
+      ],
+    };
+  }
+}
+
+const TABLE_CAPTION_PLACEHOLDER_TEXT = 'Enter table caption';
+/**
+ * Renderer for the optional table caption node.
+ */
+class RTETableCaptionRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData) {
+    return h('caption', {
+      'key': renderData.id,
+      'ref': this.useRef(renderData),
+      'style': renderData.getStyles(),
+      'class': [renderData.getClasses(), renderData.isNotEmpty() ? null : 'showPlaceholder']
+        .filter(isNonNullable)
+        .join(' '),
+      'data-placeholder': TABLE_CAPTION_PLACEHOLDER_TEXT,
+    });
+  }
+}
+
+/**
+ * Strategy class for handling the deletion of table rows.
+ */
+class DeleteTableRowStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { rowsToBeRemoved } = action;
+    const futureFocusRow = this.getFutureFocusRow(rowsToBeRemoved[0], rowsToBeRemoved[rowsToBeRemoved.length - 1], target);
+    rowsToBeRemoved.forEach((row) => {
+      this.removeRow(row);
+    });
+    if (futureFocusRow) {
+      const root = this.getRootContent(target);
+      if (root) {
+        const focusNode = futureFocusRow.getLastNode();
+        root.apply(new UpdateCursorPositionAction(focusNode, focusNode.getRangeEndOffset()));
+      }
+    }
+  }
+  /**
+   * Removes the specified row from its parent table section.
+   * // TODO: Add handling for when selected row has or in merge column.
+   *
+   * @param {RTETableRowBlock} rowToBeRemoved The row to be removed.
+   */
+  removeRow(rowToBeRemoved) {
+    rowToBeRemoved.parent.apply(new RemoveChildrenAction(rowToBeRemoved));
+  }
+  /**
+   * Get the future focus row after deletion.
+   *
+   * @param {RTETableRowBlock} startRow - The first row to be deleted.
+   * @param {RTETableRowBlock} endRow - The last row to be deleted.
+   * @param {RTETableBlock} table - The table containing the rows.
+   * @returns {Nullable<RTETableRowBlock>} The row to be focused after deletion.
+   */
+  getFutureFocusRow(startRow, endRow, table) {
+    const allRows = table.children
+      .filter((item) => item instanceof RTETableHeadBlock || item instanceof RTETableBodyBlock)
+      .flatMap((block) => block.children);
+    const startIndex = allRows.indexOf(startRow);
+    const endIndex = allRows.indexOf(endRow);
+    if (allRows[startIndex - 1]) {
+      return allRows[startIndex - 1];
+    }
+    else if (allRows[endIndex + 1]) {
+      return allRows[endIndex + 1];
+    }
+  }
+}
+
+/**
+ * Table selection helper used for mouse drag selection of cells.
+ */
+class RTETableSelection {
+  constructor() {
+    /**
+     *  Indicates whether the user is currently performing a drag selection.
+     */
+    this.dragging = false;
+    /**
+     * Anchor cell where the drag selection started.
+     */
+    this.anchorCell = null;
+    /**
+     * Collection of currently selected cells.
+     */
+    this.selectedCells = new Set();
+    this.syncRTESelectionWithDebounce = debounce(this.syncRTESelection, 100, this);
+    this.handleSelectionChangeWithDebounce = debounce(this.handleSelectionChange, 10, this);
+    /**
+     * Recursively filter and collect selected table cell blocks within the given node.
+     *
+     * @param {Range} range - The current selection range.
+     * @param {Node} node - The current node to check for selection.
+     * @returns {RTETableCellBlock[]} A list of selected table cell blocks.
+     */
+    this.filterSelectedCell = (range, node) => {
+      const selectedCells = new Set();
+      if (range.intersectsNode(node)) {
+        if (node.nodeType === Node.TEXT_NODE) {
+          const focusedNodeDto = stateEntityRenderingRegistry.getEntityByDOM(node.parentElement);
+          if (focusedNodeDto) {
+            const cell = getParentBlockByType(focusedNodeDto.parent, RTETableCellBlock);
+            if (cell) {
+              selectedCells.add(cell);
+              return Array.from(selectedCells);
+            }
+          }
+        }
+        node.childNodes.forEach((child) => this.filterSelectedCell(range, child).forEach((cell) => {
+          selectedCells.add(cell);
+        }));
+      }
+      return Array.from(selectedCells);
+    };
+    /**
+     * Update the styles of the selected cells.
+     *
+     * @param {RTETableCellBlock} cell - The cell to update style for.
+     * @param {number} total - The total number of selected cells.
+     */
+    this.updateSelectedStyles = (cell, total) => {
+      const selectedClass = total === 1 ? 'v-rte-table-cell-focused' : 'v-rte-table-cell-selected';
+      const cellRef = stateEntityRenderingRegistry.getDOMByEntity(cell);
+      if (cellRef) {
+        cellRef.classList.add(selectedClass);
+      }
+    };
+    /**
+     * Handles the document mouse up event to finish drag selection.
+     */
+    this.handleDocMouseUp = () => {
+      this.endDrag();
+      const safeDocument = tryGetDocument();
+      if (safeDocument) {
+        safeDocument.removeEventListener('mouseup', this.handleDocMouseUp);
+      }
+    };
+    /**
+     * Resets the table selection when clicking outside the table.
+     */
+    this.handleContentClick = () => {
+      this.clearSelection();
+      const editorContent = 
+      // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+      this.context.host.shadowRoot.querySelector('.rich-text-editor-container');
+      if (editorContent) {
+        editorContent.removeEventListener('mousedown', this.handleContentClick, true);
+      }
+    };
+  }
+  /**
+   * Compute all cells inside the rectangle defined by the start and end cells.
+   *
+   * Note: this only performs the calculation and does not modify the internal `selectedCells` set,
+   * so callers can decide how to apply the result.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} anchor - Drag start cell (anchor cell).
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} focus - Current drag focus cell.
+   * @returns {(RTETableCellBlock | RTETableHeadCellBlock)[]} All cells in the rectangular selection area.
+   */
+  static computeRectRange(anchor, focus) {
+    // Collect all row blocks (from both head and body) under the same table,
+    // then compute the rectangle over this flattened row list.
+    const anchorRow = anchor.parent;
+    const focusRow = focus.parent;
+    const anchorSection = anchorRow.parent;
+    const focusSection = focusRow.parent;
+    const anchorTable = anchorSection.parent;
+    const focusTable = focusSection.parent;
+    // If they are not in the same table at all, just return empty.
+    if (anchorTable !== focusTable) {
+      return [];
+    }
+    // Flatten head rows (if any) + body rows into a single ordered list.
+    const allRows = [];
+    const tableChildren = anchorTable.children;
+    tableChildren.forEach((section) => {
+      section.children.forEach((row) => allRows.push(row));
+    });
+    const anchorRowIndex = allRows.indexOf(anchorRow);
+    const focusRowIndex = allRows.indexOf(focusRow);
+    const startRow = Math.min(anchorRowIndex, focusRowIndex);
+    const endRow = Math.max(anchorRowIndex, focusRowIndex);
+    const anchorColIndex = anchorRow.children.indexOf(anchor);
+    const focusColIndex = focusRow.children.indexOf(focus);
+    const startCol = Math.min(anchorColIndex, focusColIndex);
+    const endCol = Math.max(anchorColIndex, focusColIndex);
+    const result = [];
+    for (let r = startRow; r <= endRow; r++) {
+      const row = allRows[r];
+      for (let c = startCol; c <= endCol; c++) {
+        const cell = row.children[c];
+        if (cell) {
+          result.push(cell);
+        }
+      }
+    }
+    return result;
+  }
+  /**
+   * Clean up event listeners.
+   */
+  destroy() {
+    this.removeSelectionChangeListener();
+  }
+  /**
+   * Inject the extension context and set up selection change listener.
+   *
+   * @param {RTEExtensionContext} context - The extension context.
+   */
+  init(context) {
+    this.context = context;
+    this.addSelectionChangeListener();
+  }
+  /**
+   * Set the selected cells to the given list, replacing any existing selection.
+   *
+   * @param {RTETableCellBlock} cells - The cells to select.
+   */
+  setSelectedCells(cells) {
+    this.updateSelectedCells(cells);
+  }
+  /**
+   * Get all currently selected cells.
+   *
+   * @returns {(RTETableCellBlock | RTETableHeadCellBlock)[]} A flat list of selected cells.
+   */
+  getSelectedCells() {
+    return Array.from(this.selectedCells);
+  }
+  /**
+   * Handle mouse down on a cell: start drag selection from the given cell.
+   *
+   * @param {HTMLElement} cellRef - The cell where the drag starts.
+   */
+  focusCell(cellRef) {
+    const cellBlock = stateEntityRenderingRegistry.getEntityByDOM(cellRef);
+    if (cellBlock) {
+      this.anchorCell = cellBlock;
+      this.setSelectedCells([cellBlock]);
+      this.addListeners();
+    }
+  }
+  /**
+   * Handle drag over a cell (typically called on `mouseenter` while dragging).
+   * Maintains a rectangular selection between the anchor cell and the current cell.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} cell - The cell currently under the drag.
+   */
+  dragOver(cell) {
+    if (!this.anchorCell) {
+      return;
+    }
+    // Always compute the rectangle strictly from the original anchorCell
+    // (the cell where startDrag was first called) to the current cell.
+    const rectCells = RTETableSelection.computeRectRange(this.anchorCell, cell);
+    if (rectCells.length > 1) {
+      this.startDrag();
+    }
+    if (this.dragging) {
+      this.preventTextSelection(rectCells);
+      this.updateSelectedCells(rectCells, { debounceSync: true });
+    }
+  }
+  /**
+   * Handle mouse up: stop drag selection.
+   */
+  endDrag() {
+    this.dragging = false;
+    // Reset anchor after drag ends so the next drag can start from a new cell.
+    this.anchorCell = null;
+  }
+  /**
+   * Clear the current selection state without changing the drag flag.
+   */
+  clearSelection() {
+    this.selectedCells.forEach((cell) => {
+      const cellRef = stateEntityRenderingRegistry.getDOMByEntity(cell);
+      if (cellRef) {
+        cellRef.classList.remove('v-rte-table-cell-selected', 'v-rte-table-cell-focused');
+      }
+    });
+    this.selectedCells.clear();
+  }
+  /**
+   * Add a selectionchange listener to the document to handle cell click selection.
+   */
+  addSelectionChangeListener() {
+    const safeDocument = tryGetDocument();
+    if (safeDocument) {
+      safeDocument.addEventListener('selectionchange', this.handleSelectionChangeWithDebounce);
+    }
+  }
+  /**
+   * Remove the selectionchange listener from the document.
+   */
+  removeSelectionChangeListener() {
+    const safeDocument = tryGetDocument();
+    if (safeDocument) {
+      safeDocument.removeEventListener('selectionchange', this.handleSelectionChangeWithDebounce);
+    }
+  }
+  /**
+   * Handle selection change events from the document for the cell click selection.
+   */
+  handleSelectionChange() {
+    if (this.dragging) {
+      this.syncRTESelectionWithDebounce();
+      return;
+    }
+    const selection = this.context.getSelection();
+    if (selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const commonAncestorContainer = range.commonAncestorContainer;
+      const rangeInTable = !!findParent(commonAncestorContainer, `table.${RTETableBlockRenderer.EXTENSION_TABLE_CLASS}`);
+      if (rangeInTable) {
+        const selectedCells = this.filterSelectedCell(range, commonAncestorContainer);
+        this.setSelectedCells(selectedCells);
+      }
+    }
+  }
+  /**
+   * Mark the beginning of a drag operation.
+   */
+  startDrag() {
+    this.dragging = true;
+  }
+  /**
+   * Add the given cells to the current selection set.
+   *
+   * @param {RTETableCellBlock[]} cells - The cells to add to the selection.
+   * @param {{ debounceSync?: boolean }} [options] - Options for updating selection.
+   * @param {boolean} [options.debounceSync] - Whether to debounce the RTE selection sync.
+   */
+  updateSelectedCells(cells, { debounceSync } = {}) {
+    this.clearSelection();
+    cells.forEach((cell) => {
+      this.selectedCells.add(cell);
+      this.updateSelectedStyles(cell, cells.length);
+    });
+    if (debounceSync) {
+      this.syncRTESelectionWithDebounce();
+    }
+    else {
+      this.syncRTESelection();
+    }
+  }
+  /**
+   * Synchronizes the rich text editor selection with the selected table cells.
+   */
+  syncRTESelection() {
+    const cells = Array.from(this.selectedCells);
+    const nodes = cells
+      .flatMap((cell) => {
+      return cell.children.flatMap((block) => {
+        return block.children.flatMap((node) => {
+          // TODO: Nested table deletion will track in https://gethired.atlassian.net/browse/VD-7860
+          if (node instanceof RTENode) {
+            return node;
+          }
+        });
+      });
+    })
+      .filter(isNonNullable);
+    if (cells.length > 1) {
+      this.context.setSelectedNodes(nodes, {
+        startNode: nodes[0],
+        endNode: nodes[nodes.length - 1],
+        startOffset: 0,
+        endOffset: nodes[nodes.length - 1].getRangeEndOffset(),
+      });
+    }
+  }
+  /**
+   * Prevents text selection during drag operations.
+   *
+   * @param {RTETableCellBlock[]} selectedCells - The currently selected table cells.
+   */
+  preventTextSelection(selectedCells) {
+    const selection = this.context.getSelection();
+    selection.removeAllRanges();
+    if (selectedCells.length > 0) {
+      const startContainer = stateEntityRenderingRegistry.getDOMByEntity(selectedCells[0]);
+      if (startContainer) {
+        const newRange = new Range();
+        newRange.setStart(startContainer, 0);
+        newRange.setEnd(startContainer, 0);
+        selection.addRange(newRange);
+      }
+    }
+  }
+  /**
+   * Adds a mouse up listener to the document to finish drag selection.
+   *
+   */
+  addListeners() {
+    const safeDocument = tryGetDocument();
+    if (safeDocument) {
+      safeDocument.addEventListener('mouseup', this.handleDocMouseUp);
+    }
+    const editorContent = 
+    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+    this.context.host.shadowRoot.querySelector('.rich-text-editor-container');
+    if (editorContent) {
+      editorContent.addEventListener('mousedown', this.handleContentClick, true);
+    }
+  }
+}
+
+/**
+ * Strategy class for handling converting selected rows to header rows or reverting them back to normal rows.
+ */
+class ToggleHeaderRowStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { selectedRows } = action;
+    const headerRows = [];
+    const bodyRows = [];
+    for (const row of selectedRows) {
+      if (row.parent instanceof RTETableBodyBlock) {
+        bodyRows.push(row);
+      }
+      else {
+        headerRows.push(row);
+      }
+    }
+    if (bodyRows.length > 0) {
+      this.convertToHeaderRows(bodyRows, target);
+    }
+    else {
+      this.revertToBodyRows(headerRows, target);
+    }
+    const root = this.getRootContent(target);
+    if (root) {
+      const focusNode = selectedRows[0].getFirstNode();
+      focusNode && root.apply(new UpdateCursorPositionAction(focusNode, 0));
+    }
+  }
+  /**
+   * Converts normal rows to header rows.
+   *
+   * @param {RTETableRowBlock[]} rows - The table row blocks to convert.
+   * @param {RTETableBlock} table - The table block containing the rows.
+   */
+  convertToHeaderRows(rows, table) {
+    let tableHead = table.children.find((block) => block instanceof RTETableHeadBlock);
+    const tableBody = rows[0].parent;
+    if (!tableHead) {
+      tableHead = RTETableHeadBlock.from({
+        id: generateUUID(),
+        type: 'table-head',
+        children: [],
+      });
+      table.apply(new InsertChildrenBeforeAction(tableBody, tableHead));
+    }
+    const endIndex = tableBody.children.indexOf(rows[rows.length - 1]);
+    const shouldConvertRows = tableBody.children.slice(0, endIndex + 1);
+    for (let i = 0; i < shouldConvertRows.length; i++) {
+      const rowBlock = shouldConvertRows[i];
+      rowBlock.children = rowBlock.children.map((cell) => this.convertTdToTh(cell));
+      tableBody.apply(new RemoveChildrenAction(rowBlock));
+    }
+    tableHead.apply(new AppendChildrenAction(shouldConvertRows));
+  }
+  /**
+   * Converts header rows back to normal rows.
+   *
+   * @param {RTETableRowBlock[]} rows - The table row blocks to convert.
+   * @param {RTETableBlock} table - The table block containing the rows.
+   */
+  revertToBodyRows(rows, table) {
+    let tableBody = table.children.find((block) => block instanceof RTETableBodyBlock);
+    const tableHead = rows[0].parent;
+    if (!tableBody) {
+      tableBody = RTETableBodyBlock.from({
+        id: generateUUID(),
+        type: 'table-body',
+        children: [],
+      });
+      table.apply(new InsertChildrenAfterAction(tableHead, tableBody));
+    }
+    const firstBodyRow = tableBody.children[0];
+    const startIndex = tableHead.children.indexOf(rows[0]);
+    const shouldConvertRows = tableHead.children.slice(startIndex);
+    for (let i = 0; i < shouldConvertRows.length; i++) {
+      const rowBlock = shouldConvertRows[i];
+      tableHead.apply(new RemoveChildrenAction(rowBlock));
+      rowBlock.children = this.convertThToTd(rowBlock, firstBodyRow);
+      if (firstBodyRow) {
+        tableBody.apply(new InsertChildrenBeforeAction(firstBodyRow, rowBlock));
+      }
+    }
+    if (!firstBodyRow) {
+      tableBody.apply(new AppendChildrenAction(shouldConvertRows));
+    }
+  }
+  /**
+   * Converts a table data cell to a table header cell.
+   *
+   * @param {RTETableHeadCellBlock} cell - The table cell block to convert.
+   * @returns {RTETableHeadCellBlock} The converted table header cell block.
+   */
+  convertTdToTh(cell) {
+    if (cell instanceof RTETableHeadCellBlock) {
+      return cell;
+    }
+    const headCell = RTETableHeadCellBlock.from(cell.toJSON());
+    headCell.parent = cell.parent;
+    return headCell;
+  }
+  /**
+   * Converts table header cells to table body cells.
+   *
+   * @param {RTETableRowBlock} row - The table row block containing the cells.
+   * @param {Nullable<RTETableRowBlock>} referenceRow - The reference row for comparison.
+   * @returns {RTETableCellBlock[]} The converted table body cell blocks.
+   */
+  convertThToTd(row, referenceRow) {
+    return row.children.map((cell, index) => {
+      let bodyCell = cell;
+      if (!referenceRow || referenceRow.children[index].type !== cell.type) {
+        const cellJSON = cell.toJSON();
+        bodyCell = RTETableCellBlock.from(cellJSON);
+      }
+      bodyCell.parent = row;
+      return bodyCell;
+    });
+  }
+}
+
+/**
+ * Strategy to handle the insertion of a table column into the RTETable.
+ */
+class InsertTableColumnStrategy extends TableColumnStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const insertDirection = action.insertDirection;
+    const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellInsertRange);
+    const allTableRows = getAllTableRows(target);
+    allTableRows.forEach((row) => {
+      if (insertDirection === InsertTableColumnDirection.LEFT) {
+        const newCell = this.generateTableCell(row.children[startCellIndex]);
+        row.apply(new InsertChildrenBeforeAction(row.children[startCellIndex], newCell));
+      }
+      else {
+        const newCell = this.generateTableCell(row.children[endCellIndex + 1] || row.children[endCellIndex]);
+        row.apply(new InsertChildrenAfterAction(row.children[endCellIndex], newCell));
+      }
+    });
+  }
+  /**
+   * Generate a new table cell based on the original cell type.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} originalCell The original table cell block to base the new cell on.
+   * @returns {RTETableCellBlock | RTETableHeadCellBlock} The newly generated table cell block.
+   */
+  generateTableCell(originalCell) {
+    if (originalCell instanceof RTETableHeadCellBlock) {
+      return RTETableHeadCellBlock.from(getDefaultCellBlockTemplate(originalCell.type));
+    }
+    return RTETableCellBlock.from(getDefaultCellBlockTemplate(originalCell.type));
+  }
+}
+
+/**
+ * Strategy to handle the deletion of table column from the parent.
+ */
+class DeleteTableColumnStrategy extends TableColumnStrategy {
+  /**
+   * Deletes the specified table column and updates the cursor position.
+   *
+   * @param {DeleteTableColumnAction} action - The action containing the table column to delete.
+   * @param {RTETableBlock} target - The target table block from which the column will be deleted.
+   */
+  handleAction(action, target) {
+    const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellDeleteRange);
+    const allTableRows = getAllTableRows(target);
+    // Find the next focusable cell before deletion
+    const nextFocusableCell = this.findNextFocusableCell(action.tableCellDeleteRange, [startCellIndex, endCellIndex]);
+    allTableRows.forEach((row) => {
+      this.deleteCellsInRow(row, startCellIndex, endCellIndex);
+    });
+    const root = this.getRootContent(target);
+    const nextFocusNode = getFirstNode(nextFocusableCell);
+    if (root && nextFocusNode) {
+      root.apply(new UpdateCursorPositionAction(nextFocusNode));
+    }
+  }
+  /**
+   * Find the next focusable cell either after the deleted range or before it.
+   *
+   * @param {RTETableCellBlock[]} tableCellBlockDeleteRange - The range of table cell blocks to be deleted.
+   * @param {number[]} indexRange - The start and end indices of the cells to be deleted.
+   * @returns {Nullable<RTETableCellBlock | RTETableHeadCellBlock>} The next focusable cell.
+   */
+  findNextFocusableCell(tableCellBlockDeleteRange, indexRange) {
+    const cellAfterEndOfRange = tableCellBlockDeleteRange[tableCellBlockDeleteRange.length - 1].parent.children[indexRange[indexRange.length - 1] + 1];
+    const cellBeforeStartOfRange = tableCellBlockDeleteRange[0].parent.children[indexRange[0] - 1];
+    return cellAfterEndOfRange !== null && cellAfterEndOfRange !== void 0 ? cellAfterEndOfRange : cellBeforeStartOfRange;
+  }
+  /**
+   * Deletes cells in a given row from start index to end index.
+   *
+   * @param {RTETableRowBlock} row - The table row block.
+   * @param {number} startCellIndex - The start index of the cell to delete.
+   * @param {number} endCellIndex - The end index of the cell to delete.
+   */
+  deleteCellsInRow(row, startCellIndex, endCellIndex) {
+    const needDeleteCells = [];
+    for (let index = startCellIndex; index <= endCellIndex; index++) {
+      needDeleteCells.push(row.children[index]);
+    }
+    needDeleteCells.forEach((cell) => {
+      row.apply(new RemoveChildrenAction(cell));
+    });
+  }
+}
+
+/**
+ * Strategy to handle the selection of a table column.
+ */
+class SelectTableColumnStrategy extends TableColumnStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const [startCellIndex, endCellIndex] = this.getBoundaryCellIndexOfRow(action.tableCellSelectRange);
+    const allTableRows = getAllTableRows(target);
+    const allNeedSelectedCells = [];
+    allTableRows.forEach((row) => {
+      for (let cellIndex = startCellIndex; cellIndex <= endCellIndex; cellIndex++) {
+        const cellToSelect = row.children[cellIndex];
+        allNeedSelectedCells.push(cellToSelect);
+      }
+    });
+    action.selectCellCallback(allNeedSelectedCells);
+  }
+}
+
+/**
+ * Interceptor to prevent insertion of non-cell blocks into a table row.
+ */
+class PreventRowInsertInterceptor extends ActionHandlerInterceptor {
+  /**
+   * Prevent insertion if any of the children to be inserted is not a table cell block.
+   *
+   * @param {InsertChildrenBeforeAction} action - the action to be intercepted
+   * @returns {boolean} - true if the insertion should be intercepted, false otherwise
+   */
+  canIntercept(action) {
+    return action.childrenToBeInserted.some((item) => !(item instanceof RTETableCellBlock));
+  }
+  /**
+   * @inheritDoc
+   */
+  intercept() {
+  }
+}
+
+/**
+ * Function extension class for Vega Rich Text Editor.
+ */
+class VegaRTETableExtension extends VegaRTEExtension {
+  constructor() {
+    super();
+    this.toolbarButtonRenderer = new RTETableToolbarButtonRenderer();
+    this.tableBlockRenderer = new RTETableBlockRenderer();
+    this.tableRowBlockRenderer = new RTETableRowBlockRenderer();
+    this.tableCellRenderer = new RTETableCellRenderer();
+    this.tableHeadCellRenderer = new RTETableHeadCellRenderer();
+    this.tableSelection = new RTETableSelection();
+    this.registerToolbarButtonRenderer('table', this.toolbarButtonRenderer);
+    this.registerBlockBasicStrategies(RTETableBlock.name);
+    this.registerBlockBasicStrategies(RTETableHeadBlock.name);
+    this.registerBlockBasicStrategies(RTETableHeadCellBlock.name);
+    this.registerBlockBasicStrategies(RTETableRowBlock.name);
+    this.registerBlockBasicStrategies(RTETableCellBlock.name);
+    this.registerBlockBasicStrategies(RTETableBodyBlock.name);
+    this.registerRenderer('table-block', this.tableBlockRenderer);
+    this.registerRenderer('table-head', new RTETableHeadRenderer());
+    this.registerRenderer('table-head-cell', this.tableHeadCellRenderer);
+    this.registerRenderer('table-row', this.tableRowBlockRenderer);
+    this.registerRenderer('table-cell', this.tableCellRenderer);
+    this.registerRenderer('table-body', new RTETableBodyRenderer());
+    this.registerRenderer('table-caption', new RTETableCaptionRenderer());
+    this.registerNode('table-block', RTETableBlock);
+    this.registerNode('table-head', RTETableHeadBlock);
+    this.registerNode('table-head-cell', RTETableHeadCellBlock);
+    this.registerNode('table-row', RTETableRowBlock);
+    this.registerNode('table-cell', RTETableCellBlock);
+    this.registerNode('table-body', RTETableBodyBlock);
+    this.registerNode('table-caption', RTETableCaptionBlock);
+  }
+  /**
+   * Initializes the extension with the given context
+   *
+   * @param {RTEExtensionContext} context - extension context
+   */
+  initialExtension(context) {
+    super.initialExtension(context);
+    this.tableSelection.init(context);
+    const tableExtensionContext = Object.assign(Object.assign({}, context), { tableSelection: this.tableSelection });
+    this.toolbarButtonRenderer.injectExtensionContext(tableExtensionContext);
+    this.tableBlockRenderer.injectExtensionContext(tableExtensionContext);
+    this.tableCellRenderer.injectExtensionContext(tableExtensionContext);
+    this.tableHeadCellRenderer.injectExtensionContext(tableExtensionContext);
+  }
+  /**
+   * @inheritDoc
+   */
+  destroyExtension() {
+    this.tableSelection.destroy();
+  }
+}
+(() => {
+  const insertTableBlockStrategy = new InsertTableBlockStrategy();
+  const deleteTableBlockStrategy = new DeleteTableBlockStrategy();
+  VegaRTEExtension.registerActionHandleStrategy(VegaRTEContent.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(VegaRTEContent.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETableCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETableHeadCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEImageBlock.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, INSERT_TABLE_ROW, new InsertTableRowStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, DELETE_TABLE_ROW, new DeleteTableRowStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, TOGGLE_HEADER_ROW, new ToggleHeaderRowStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, INSERT_TABLE_COLUMN, new InsertTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, DELETE_TABLE_COLUMN, new DeleteTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, TOGGLE_HEADER_TABLE_COLUMN, new ToggleHeaderTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, SELECT_TABLE_COLUMN, new SelectTableColumnStrategy());
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETextBlock.name, ModifyContentActionType.DELETE_BLOCK_CONTENT, new PreventCellContentDeleteInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETableRowBlock.name, ModifyContentActionType.INSERT_CHILDREN_BEFORE, new PreventRowInsertInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETableCellBlock.name, ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETableHeadCellBlock.name, ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
+})();
+
+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, VegaRTETableExtension as i, VegaRTEToolbarButtonRenderer as j, VegaRTEExtension as k, VegaRTEExtensionRenderer as l, RTETokenNode as m, RTETokenNodeRenderer as n, InternalVegaZIndexManager$1 as o };