@heartlandone/vega 2.84.0 → 2.86.0

package/dist/cjs/{token-extension-39f2b886.js → token-extension-d7d2ead6.js}

@@ -7,25 +7,25 @@ const createPublicApiRuntimeMetricsSlimmer = require('./create-public-api-runtim
 const internalVegaZIndexManager = require('./internal-vega-z-index-manager-f03ddb37.js');
 const dynamicSlimmer = require('./dynamic-slimmer-f31fdfd7.js');
 const pageResizeObserverSlimmer = require('./page-resize-observer-slimmer-273d62ef.js');
-const internalVegaEventManager = require('./internal-vega-event-manager-6b74b3af.js');
+const internalVegaEventManager = require('./internal-vega-event-manager-7e0d966d.js');
 const internalTranslationController = require('./internal-translation-controller-8360a89c.js');
-const contentState = require('./content-state-89fafb3b.js');
-const codeBlock = require('./code-block-6da521e6.js');
+const contentState = require('./content-state-efd3b1a7.js');
+const codeBlock = require('./code-block-c6c70464.js');
 const typeGuard = require('./type-guard-2e97fc56.js');
 const dtoRendererManager = require('./dto-renderer-manager-7eb5c5ce.js');
 const baseRenderer = require('./base-renderer-0a3b62b7.js');
 const internalIconManager = require('./internal-icon-manager-c989189a.js');
 const vegaNonceManager = require('./vega-nonce-manager-df69d3ed.js');
 const domNodeSubjectObserverFactory = require('./dom-node-subject-observer-factory-9110cb94.js');
-const vegaEventId = require('./vega-event-id-c08ce3d3.js');
-const splitCellOperation = require('./split-cell-operation-532fb9f0.js');
-const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
+const vegaEventId = require('./vega-event-id-d9994eb3.js');
+const splitCellOperation = require('./split-cell-operation-6a59c9b0.js');
+const changeManager = require('./change-manager-a297e4d2.js');
 const vegaInternalEventId = require('./vega-internal-event-id-87014e4f.js');
+const remoteInvocationRegistry = require('./remote-invocation-registry-fc22fdd0.js');
 const darkModeStyleController = require('./dark-mode-style-controller-bd765afb.js');
 const tryGetDocument = require('./try-get-document-c0ebd39a.js');
 const pixel = require('./pixel-98f2a10c.js');
 const object = require('./object-b53e9416.js');
-const changeManager = require('./change-manager-a297e4d2.js');
 const timer = require('./timer-5f33058b.js');
 
 const VegaLoaderRuntimeMetricsPayloadDefinition = [
@@ -1487,6 +1487,8 @@ class VegaRTEToolbarButtonRenderer {
   }
   /**
    * Renders a common toolbar button with optional icon, label, and arrow icon.
+   * When a tooltip is provided via `buttonProps.tooltip`, the button is wrapped
+   * in a `vega-tooltip` element, matching the behavior of default toolbar buttons.
    *
    * @param {VegaRTECreateElementFunction} h - Create element function.
    * @param {VegaRTEToolbarRenderContext} editorContext - The render context for the editor.
@@ -1494,9 +1496,9 @@ class VegaRTEToolbarButtonRenderer {
    * @returns {VegaRTERenderResult} - The render result for the button.
    */
   renderButton(h, editorContext, buttonProps) {
-    const { icon, label, showArrowIcon } = buttonProps;
+    const { icon, label, showArrowIcon, tooltip } = buttonProps;
     const isDisabled = this.isDisabled(editorContext);
-    return h('vega-rich-text-editor-toolbar-button', {
+    const button = h('vega-rich-text-editor-toolbar-button', {
       disabled: isDisabled,
       icon: icon,
       hidden: this.isHidden(editorContext),
@@ -1517,6 +1519,10 @@ class VegaRTEToolbarButtonRenderer {
         })
         : null,
     ].filter(typeGuard.isNonNullable));
+    if (tooltip === null || tooltip === void 0 ? void 0 : tooltip.text) {
+      return h('vega-tooltip', { text: tooltip.text, placement: ['bottom', 'top'] }, [button]);
+    }
+    return button;
   }
   /**
    * Renders the button label.
@@ -1620,7 +1626,11 @@ class RTETokenToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
    */
   render(createElement, editorContext) {
     return this.renderDropdown(createElement, editorContext, {}, [
-      this.renderButton(createElement, editorContext, { label: 'Tokens', showArrowIcon: true }),
+      this.renderButton(createElement, editorContext, {
+        label: 'Tokens',
+        showArrowIcon: true,
+        tooltip: { text: 'Insert token' },
+      }),
       this.renderDropdownListTemplate(createElement, this.tokenList),
     ]);
   }
@@ -1861,6 +1871,7 @@ class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
       this.renderButton(createElement, editorContext, {
         label: this.getLanguageLabelByKey(this.selectedLanguage),
         showArrowIcon: true,
+        tooltip: { text: 'Select language' },
       }),
     ]);
   }
@@ -2395,6 +2406,7 @@ class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
       this.renderButton(h, editorContext, {
         label: 'Functions',
         showArrowIcon: true,
+        tooltip: { text: 'Insert function' },
       }),
       this.renderDropdownListTemplate(h, FunctionToolbarButtonRenderer.FUNCTION_LIST),
     ]);
@@ -3095,162 +3107,6 @@ class CaptionOperationEventHandler extends splitCellOperation.SettingEventHandle
   }
 }
 
-/**
- * Base renderer for table-related popovers, providing common functionalities such as accessing the table extension context.
- */
-class TablePopoverBaseRenderer {
-  constructor(renderContext) {
-    this.renderContext = renderContext;
-  }
-  /**
-   * Retrieves the table extension context associated with the current render context.
-   *
-   * @returns {Nullable<RTETableExtensionContext>} The table extension context if available, otherwise null.
-   */
-  getTableExtensionContext() {
-    return this.renderContext
-      ? RTEExtensionContextManager$1.getExtensionContext(this.renderContext.host)
-      : null;
-  }
-}
-
-/**
- * Centralizes the popover rendering and interaction logic for table settings.
- */
-class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
-  constructor() {
-    super(...arguments);
-    this.settingHandlers = [
-      new splitCellOperation.RowOperationEventHandler(),
-      new CaptionOperationEventHandler(),
-      new splitCellOperation.ColumnOperationEventHandler(),
-      new splitCellOperation.MergeCellsOperationEventHandler(),
-      new splitCellOperation.SplitCellOperationEventHandler(),
-    ];
-    /**
-     * 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('table');
-      if (trigger !== ownTrigger) {
-        void this.popoverRef.hide();
-        void this.tableDynamicPopover.hide();
-        return;
-      }
-      void this.tableDynamicPopover.hide();
-      if (!this.popoverShow) {
-        remoteInvocationRegistry.remoteInvocationRegistry.call(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.popoverRef, vegaInternalEventId.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) {
-        const extensionContext = this.getTableExtensionContext();
-        extensionContext && handler.execute(event.detail, extensionContext, this.tableData);
-        if (event.detail[0] === splitCellOperation.TableSettingType.CAPTION) {
-          this.updateTableSettingCaption();
-        }
-      }
-      if (event.detail[0] === splitCellOperation.TableSettingType.TABLE || event.detail[0] === splitCellOperation.TableSettingType.CELL) {
-        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;
-    };
-  }
-  /**
-   * 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 {() => HTMLElement} getTableRef - Current table DOM reference
-   * @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, getTableRef, 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.DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, vegaEventId.VegaPopoverShow, this.handleTableSettingPopoverShow);
-          domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, vegaEventId.VegaPopoverHide, () => (this.popoverShow = false));
-        }
-      },
-    }, [
-      h('div', { slot: 'popover' }, [
-        h('vega-rich-text-table-setting', {
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          ref: (ref) => {
-            this.tableSettingRef = ref;
-            if (ref) {
-              ref.target = getTableRef();
-            }
-          },
-          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 = [];
-    const extensionContext = this.getTableExtensionContext();
-    if (extensionContext && extensionContext.tableSelection) {
-      const { tableSelection } = extensionContext;
-      selectedCells = tableSelection.getSelectedCells();
-    }
-    return selectedCells;
-  }
-}
-
 /**
  * Event handler for row operations in a table.
  */
@@ -3617,6 +3473,25 @@ class CellPropertiesCancelEventHandler extends CellPropertiesEventHandler {
   }
 }
 
+/**
+ * Base renderer for table-related popovers, providing common functionalities such as accessing the table extension context.
+ */
+class TablePopoverBaseRenderer {
+  constructor(renderContext) {
+    this.renderContext = renderContext;
+  }
+  /**
+   * Retrieves the table extension context associated with the current render context.
+   *
+   * @returns {Nullable<RTETableExtensionContext>} The table extension context if available, otherwise null.
+   */
+  getTableExtensionContext() {
+    return this.renderContext
+      ? RTEExtensionContextManager$1.getExtensionContext(this.renderContext.host)
+      : null;
+  }
+}
+
 /**
  * Renderer for a generic, dynamically positioned popover used within table-related extensions.
  *
@@ -3626,7 +3501,6 @@ class CellPropertiesCancelEventHandler extends CellPropertiesEventHandler {
 class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
   constructor(colors, renderContext) {
     super(renderContext);
-    this.tableColorSchema = [];
     this.popoverCloseType = 'none'; // 'save' | 'cancel' | 'change' | 'none'
     this.tablePropertiesHandlerMap = {
       save: new TablePropertiesSaveEventHandler(),
@@ -3654,7 +3528,7 @@ class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
         this.tablePropertiesHandlerMap[eventKey].handle(extensionContext, this.currentTableBlock, e.detail, this.currentFocusNode);
       }
       // Update popover position to follow the target after styles change
-      if (eventKey === 'change' && this.popoverRef) {
+      if (eventKey === 'change') {
         void this.popoverRef.show(true);
       }
     };
@@ -3674,7 +3548,7 @@ class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
         this.cellPropertiesHandlerMap[eventKey].handle(extensionContext, e.detail, this.currentFocusNode);
       }
       // Update popover position to follow the target after styles change
-      if (eventKey === 'change' && this.popoverRef) {
+      if (eventKey === 'change') {
         void this.popoverRef.show(true);
       }
     };
@@ -3726,55 +3600,58 @@ class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
     await this.popoverRef.hide();
   }
   /**
-   * Renders a vega-popover whose target and content are provided dynamically by callers.
+   * Re-targets the shared popovers to the given table.
    *
-   * @param {VegaRTECreateElementFunction} h - The create element function.
-   * @param {() => HTMLElement} getTableRef - Current table DOM reference
-   * @param {RTETableBlock} renderData - Current table block being rendered.
-   * @returns {VegaRTERenderResult} The rendered popover host.
+   * @param {RTETableBlock} tableBlock - The clicked table's block data.
+   * @param {() => HTMLElement} getTableRef - Getter for the clicked table's DOM element.
    */
-  render(h, getTableRef, renderData) {
+  reTarget(tableBlock, getTableRef) {
     this.getTableRef = getTableRef;
-    this.currentTableBlock = renderData;
-    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;
-        domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, vegaEventId.VegaPopoverHide, () => {
-          const extensionContext = this.getTableExtensionContext();
-          if (this.popoverCloseType === 'change' && extensionContext) {
-            extensionContext.flushValue(extensionContext.host.value);
-          }
-        });
-      },
-    }, [
-      h('div', {
-        slot: 'popover',
-        class: 'rte-table-dynamic-popover-content',
-      }, [
-        h('vega-rich-text-table-properties', {
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          ref: (el) => (this.tablePropertiesFormRef = el),
-          colors: this.tableColorSchema,
-          type: splitCellOperation.TableSettingType.TABLE,
-          onVegaCancel: this.handleTablePropertiesUpdate,
-          onVegaChange: this.handleTablePropertiesUpdate,
-          onVegaSave: this.handleTablePropertiesUpdate,
-        }),
-        h('vega-rich-text-table-properties', {
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          ref: (el) => (this.cellPropertiesFormRef = el),
-          colors: this.tableColorSchema,
-          type: splitCellOperation.TableSettingType.CELL,
-          onVegaCancel: this.handleCellPropertiesUpdate,
-          onVegaChange: this.handleCellPropertiesUpdate,
-          onVegaSave: this.handleCellPropertiesUpdate,
-        }),
-      ]),
-    ]);
+    this.currentTableBlock = tableBlock;
+  }
+  /**
+   * Builds the popover DOM and appends it to the given container.
+   *
+   * @returns {Nullable<HTMLElement>} The constructed popover element.
+   */
+  render() {
+    const safeDocument = tryGetDocument.tryGetDocument();
+    if (safeDocument) {
+      const popover = safeDocument.createElement('vega-popover');
+      popover.trigger = 'click';
+      popover.isScreenPosition = true;
+      popover.className = 'rte-table-dynamic-popover';
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, vegaEventId.VegaPopoverHide, () => {
+        const extensionContext = this.getTableExtensionContext();
+        if (this.popoverCloseType === 'change' && extensionContext) {
+          extensionContext.flushValue(extensionContext.host.value);
+        }
+      });
+      const slotDiv = safeDocument.createElement('div');
+      slotDiv.setAttribute('slot', 'popover');
+      slotDiv.className = 'rte-table-dynamic-popover-content';
+      const tablePropsForm = safeDocument.createElement('vega-rich-text-table-properties');
+      tablePropsForm.colors = this.tableColorSchema;
+      tablePropsForm.type = splitCellOperation.TableSettingType.TABLE;
+      tablePropsForm.setAttribute('type', splitCellOperation.TableSettingType.TABLE);
+      tablePropsForm.addEventListener('vegaCancel', this.handleTablePropertiesUpdate);
+      tablePropsForm.addEventListener('vegaChange', this.handleTablePropertiesUpdate);
+      tablePropsForm.addEventListener('vegaSave', this.handleTablePropertiesUpdate);
+      const cellPropsForm = safeDocument.createElement('vega-rich-text-table-properties');
+      cellPropsForm.colors = this.tableColorSchema;
+      cellPropsForm.type = splitCellOperation.TableSettingType.CELL;
+      cellPropsForm.setAttribute('type', splitCellOperation.TableSettingType.CELL);
+      cellPropsForm.addEventListener('vegaCancel', this.handleCellPropertiesUpdate);
+      cellPropsForm.addEventListener('vegaChange', this.handleCellPropertiesUpdate);
+      cellPropsForm.addEventListener('vegaSave', this.handleCellPropertiesUpdate);
+      slotDiv.appendChild(tablePropsForm);
+      slotDiv.appendChild(cellPropsForm);
+      popover.appendChild(slotDiv);
+      this.popoverRef = popover;
+      this.tablePropertiesFormRef = tablePropsForm;
+      this.cellPropertiesFormRef = cellPropsForm;
+      return popover;
+    }
   }
   /**
    * Updates the visibility of the pre-rendered content blocks based on type.
@@ -3784,13 +3661,13 @@ class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
   updateContent(type) {
     this.popoverCloseType = 'none';
     const extensionContext = this.getTableExtensionContext();
-    if (this.tablePropertiesFormRef && type === 'TABLE') {
+    if (type === 'TABLE') {
       this.tablePropertiesFormRef.classList.remove('vega-hidden');
       this.cellPropertiesFormRef.classList.add('vega-hidden');
       this.tablePropertiesFormRef.defaultValue =
         TablePropertiesEventHandler.generateTablePropertiesForm(this.currentTableBlock);
     }
-    else if (this.cellPropertiesFormRef && type === 'CELL') {
+    else if (type === 'CELL') {
       this.cellPropertiesFormRef.classList.remove('vega-hidden');
       this.tablePropertiesFormRef.classList.add('vega-hidden');
       if (extensionContext) {
@@ -3863,6 +3740,153 @@ class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
   }
 }
 
+/**
+ * Shared popover renderer for table settings.
+ */
+class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
+  constructor(renderContext) {
+    super(renderContext);
+    this.settingHandlers = [
+      new splitCellOperation.RowOperationEventHandler(),
+      new CaptionOperationEventHandler(),
+      new splitCellOperation.ColumnOperationEventHandler(),
+      new splitCellOperation.MergeCellsOperationEventHandler(),
+      new splitCellOperation.SplitCellOperationEventHandler(),
+    ];
+    /**
+     * Re-targets and shows the table setting popover for the clicked table.
+     *
+     * @param {MouseEvent} event - The MouseEvent that triggered the click.
+     * @param {RTETableBlock} tableBlock - The clicked table's block data.
+     * @param {() => HTMLElement} getTableRef - Getter for the clicked table's DOM element.
+     */
+    this.handleTableClick = (event, tableBlock, getTableRef) => {
+      const target = event.target;
+      const ownTrigger = target.closest('table');
+      if (ownTrigger !== getTableRef()) {
+        return;
+      }
+      // Prevent the click from bubbling to ancestor tables. When this is a nested
+      // table click, the ancestor table still has the popover's stale click
+      // listener attached (from when it was the popover's target), which would
+      // toggle the popover off immediately after we show it.
+      event.stopPropagation();
+      this.reTarget(tableBlock, getTableRef);
+      void this.tableDynamicPopover.hide();
+      remoteInvocationRegistry.remoteInvocationRegistry.call(domNodeSubjectObserverFactory.domNodeSubjectFactory.getSubject(this.popoverRef, vegaInternalEventId.VegaInternalPopoverUpdateTarget), ownTrigger);
+      void this.popoverRef.show(true);
+    };
+    /**
+     * Sync the selected cells from the table selection to the table setting component.
+     */
+    this.syncSelectedCells = () => {
+      if (this.tableSettingRef) {
+        this.tableSettingRef.selectedCells = this.getTableSelectedCells();
+      }
+    };
+    /**
+     * Handles 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) {
+        const extensionContext = this.getTableExtensionContext();
+        extensionContext && handler.execute(event.detail, extensionContext, this.tableBlock);
+        if (event.detail[0] === splitCellOperation.TableSettingType.CAPTION) {
+          this.updateTableSettingCaption();
+        }
+      }
+      if (event.detail[0] === splitCellOperation.TableSettingType.TABLE || event.detail[0] === splitCellOperation.TableSettingType.CELL) {
+        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.tableDynamicPopover = new TableDynamicPopoverRenderer(splitCellOperation.RTETableColorManager.getTableColors(), renderContext);
+  }
+  /**
+   * Destroys the dynamic popover renderer and removes the container from the DOM.
+   */
+  destroy() {
+    this.tableDynamicPopover.destroy();
+    if (this.popoverContainer) {
+      this.popoverContainer.remove();
+    }
+  }
+  /**
+   * Builds the popover DOM and appends it to the RTE host. Idempotent: subsequent calls are no-ops.
+   */
+  render() {
+    const safeDocument = tryGetDocument.tryGetDocument();
+    if (safeDocument && this.renderContext) {
+      this.popoverContainer = safeDocument.createElement('div');
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      this.renderContext.host.appendChild(this.popoverContainer);
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      const tableCellPopover = this.tableDynamicPopover.render();
+      const popover = safeDocument.createElement('vega-popover');
+      popover.trigger = 'click';
+      popover.isScreenPosition = true;
+      popover.className = 'rte-table-setting-popover';
+      domNodeSubjectObserverFactory.DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, vegaEventId.VegaPopoverShow, this.handleTableSettingPopoverShow);
+      const slotDiv = safeDocument.createElement('div');
+      slotDiv.setAttribute('slot', 'popover');
+      const tableSetting = safeDocument.createElement('vega-rich-text-table-setting');
+      tableSetting.addEventListener('vegaClick', this.handleSettingMenuClick);
+      slotDiv.appendChild(tableSetting);
+      popover.appendChild(slotDiv);
+      this.popoverContainer.appendChild(popover);
+      this.popoverContainer.appendChild(tableCellPopover);
+      this.popoverRef = popover;
+      this.tableSettingRef = tableSetting;
+    }
+  }
+  /**
+   * Updates the table setting component caption state to match the current table data.
+   */
+  updateTableSettingCaption() {
+    const hasCaption = this.tableBlock.hasCaption();
+    if (this.tableSettingRef && this.tableSettingRef.hasCaption !== hasCaption) {
+      this.tableSettingRef.hasCaption = hasCaption;
+    }
+  }
+  /**
+   * Re-targets the shared popovers to the given table.
+   *
+   * @param {RTETableBlock} tableBlock - The clicked table's block data.
+   * @param {() => HTMLElement} getTableRef - Getter for the clicked table's DOM element.
+   */
+  reTarget(tableBlock, getTableRef) {
+    if (this.tableSettingRef) {
+      this.tableBlock = tableBlock;
+      this.tableSettingRef.target = getTableRef();
+      this.tableSettingRef.selectedCells = this.getTableSelectedCells();
+      this.tableDynamicPopover.reTarget(tableBlock, getTableRef);
+    }
+  }
+  /**
+   * Collects and returns the currently selected table cells.
+   *
+   * @returns {RTETableCellBlock[]} The array of currently selected table cell blocks.
+   */
+  getTableSelectedCells() {
+    let selectedCells = [];
+    const extensionContext = this.getTableExtensionContext();
+    if (extensionContext && extensionContext.tableSelection) {
+      const { tableSelection } = extensionContext;
+      selectedCells = tableSelection.getSelectedCells();
+    }
+    return selectedCells;
+  }
+}
+
 /**
  * Renderer for the RTETableBlock.
  */
@@ -3871,12 +3895,9 @@ class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
    * @inheritDoc
    */
   doRender(h, renderData, rteContext) {
-    const tableSettingPopoverRenderer = new TableSettingPopoverRenderer(rteContext);
-    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(splitCellOperation.RTETableColorManager.getTableColors(), rteContext);
     let tableRef;
     const table = this.renderTable(h, renderData, (ref) => (tableRef = ref));
-    const tableSettingPopover = tableSettingPopoverRenderer.render(h, renderData, () => tableRef, tableDynamicPopoverRenderer);
-    const tableDynamicPopover = tableDynamicPopoverRenderer.render(h, () => tableRef, renderData);
+    this.renderTableToolbar(rteContext);
     const tableAnnotation = renderData.getAnnotationByType(splitCellOperation.RTETableExtensionAnnotationTypeEnum.TABLE);
     const children = rteContext.editable
       ? [
@@ -3887,17 +3908,23 @@ class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
             this.handleTableRemove(renderData, tableRef);
           },
           // eslint-disable-next-line jsdoc/require-jsdoc
-          onClick: (event) => tableSettingPopoverRenderer.handleTableClick(event, tableRef),
+          onClick: (event) => {
+            if (this.tableToolbar) {
+              this.tableToolbar.handleTableClick(event, renderData, () => tableRef);
+            }
+          },
           // eslint-disable-next-line jsdoc/require-jsdoc
           onMouseLeave: () => {
-            tableSettingPopoverRenderer.syncSelectedCells();
+            if (this.tableToolbar) {
+              this.tableToolbar.syncSelectedCells();
+            }
           },
         }, [
           // Add an extra div as slot container, to make sure the cursor can move to before/end of the table.
           h('div', {
             contentEditable: true,
             ref: this.useRef(renderData),
-          }, [table, tableSettingPopover, tableDynamicPopover]),
+          }, [table]),
         ]),
       ]
       : [table];
@@ -3919,6 +3946,12 @@ class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
     result.childrenContainerGetter = () => table;
     return result;
   }
+  /**
+   * Destroys the table toolbar popover.
+   */
+  destroy() {
+    this.destroyTableToolbar();
+  }
   /**
    * @inheritDoc
    */
@@ -3968,6 +4001,29 @@ class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
       }
     }
   }
+  /**
+   * Renders the table setting popover toolbar if the context is editable.
+   *
+   * @param {RTERenderContext} rteContext - The rendering context of the rich text editor.
+   */
+  renderTableToolbar(rteContext) {
+    if (!rteContext.editable) {
+      this.destroyTableToolbar();
+      return;
+    }
+    if (!this.tableToolbar) {
+      this.tableToolbar = new TableSettingPopoverRenderer(rteContext);
+      this.tableToolbar.render();
+    }
+  }
+  /**
+   * Destroys the table setting popover toolbar if it exists.
+   */
+  destroyTableToolbar() {
+    var _a;
+    (_a = this.tableToolbar) === null || _a === void 0 ? void 0 : _a.destroy();
+    this.tableToolbar = null;
+  }
 }
 
 /**
@@ -4301,6 +4357,7 @@ class RTETableToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
     return createTablePopoverRenderer.render(h, super.renderButton(h, editorContext, {
       showArrowIcon: true,
       icon: 'rte-table',
+      tooltip: { text: 'Insert table' },
     }));
   }
   /**
@@ -7481,6 +7538,7 @@ class VegaRTETableExtension extends VegaRTEExtension {
    * @inheritDoc
    */
   destroyExtension() {
+    this.tableBlockRenderer.destroy();
     this.tableSelection.destroy();
   }
 }