@heartlandone/vega 2.84.0 → 2.86.0

package/dist/esm/{token-extension-d3a46c04.js → token-extension-728c0678.js}

@@ -5,25 +5,25 @@ import { I as InjectVegaTelemetrySlimmer, c as createPublicAPIRuntimeMetricsSlim
 import { I as InternalVegaZIndexManager } from './internal-vega-z-index-manager-7d2b54c3.js';
 import { c as createDynamicSlimmer } from './dynamic-slimmer-90b8af32.js';
 import { P as PageResizeObserverSlimmer } from './page-resize-observer-slimmer-e24d36c5.js';
-import { i as internalVegaEventManager } from './internal-vega-event-manager-bed71930.js';
+import { i as internalVegaEventManager } from './internal-vega-event-manager-7cdf3c28.js';
 import { V as VegaInternalTranslation } from './internal-translation-controller-d7dee4a0.js';
-import { R as RTEDTOActionStrategyManager, E as ElementToDTOClassStrategyManager, h as htmlElementToAnnotationGenerator, U as UpdateCursorPositionAction, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, a as ElementToDTOStrategy, I as InsertNewParagraphAction, b as RTEImageBlock, c as InsertChildrenBeforeStrategy, P as PasteContentStrategy, A as AnnotationGeneratorStrategyAbstract, d as RTEListItemBlock } from './content-state-e676bdf0.js';
-import { s as stateEntityRenderingRegistry, A as ActionHandleStrategyRegistry, a as ActionHandlerInterceptorRegistry, R as RTEFilterStylesStrategyRegistry, b as RTEDTOClassManager, M as ModifyContentAction, c as RTETextNode, d as RTEBlock, e as RTETextBlock, f as RTEAnnotationStyle, g as ActionHandleStrategy, I as InsertChildrenAfterAction, h as AppendChildrenAction, i as RTENode, j as InsertChildrenBeforeAction, k as InternalAnnotationTypeEnum, l as ModifyContentActionType, B as BlockAnnotation, m as AnnotationAction, n as RemoveChildrenAction, C as CommonAnnotationTypeEnum, o as CustomAttributeAnnotation, p as RTEFilterStylesStrategy } from './code-block-65c8804b.js';
+import { R as RTEDTOActionStrategyManager, E as ElementToDTOClassStrategyManager, h as htmlElementToAnnotationGenerator, U as UpdateCursorPositionAction, V as VegaRTEContent, B as BlockToRTEBlockStrategyAbstract, a as ElementToDTOStrategy, I as InsertNewParagraphAction, b as RTEImageBlock, c as InsertChildrenBeforeStrategy, P as PasteContentStrategy, A as AnnotationGeneratorStrategyAbstract, d as RTEListItemBlock } from './content-state-afeb700d.js';
+import { s as stateEntityRenderingRegistry, A as ActionHandleStrategyRegistry, a as ActionHandlerInterceptorRegistry, R as RTEFilterStylesStrategyRegistry, b as RTEDTOClassManager, M as ModifyContentAction, c as RTETextNode, d as RTEBlock, e as RTETextBlock, f as RTEAnnotationStyle, g as ActionHandleStrategy, I as InsertChildrenAfterAction, h as AppendChildrenAction, i as RTENode, j as InsertChildrenBeforeAction, k as InternalAnnotationTypeEnum, l as ModifyContentActionType, B as BlockAnnotation, m as AnnotationAction, n as RemoveChildrenAction, C as CommonAnnotationTypeEnum, o as CustomAttributeAnnotation, p as RTEFilterStylesStrategy } from './code-block-10be3916.js';
 import { i as isNonNullable } from './type-guard-adc244fd.js';
 import { R as RTEDTORendererManager } from './dto-renderer-manager-abc7eb5f.js';
 import { V as VegaRTEBaseRenderer } from './base-renderer-101f6d04.js';
 import { V as VegaInternalIconManager } from './internal-icon-manager-bd80b3bb.js';
 import { v as vegaNonceManager } from './vega-nonce-manager-497e5eb5.js';
 import { D as DomNodeSubjectObserverFactory, d as domNodeSubjectFactory } from './dom-node-subject-observer-factory-aca0116e.js';
-import { V as VegaDropdownClick, a as VegaClick, b as VegaPopoverShow, c as VegaPopoverHide } from './vega-event-id-5841d1d3.js';
-import { R as RTETableExtensionAnnotationTypeEnum, a as RTE_TABLE_HEAD_DEFAULT_BACKGROUND_COLOR, S as SettingEventHandler, T as TableSettingType, b as RowOperationEventHandler, C as ColumnOperationEventHandler, M as MergeCellsOperationEventHandler, c as SplitCellOperationEventHandler, d as RTETableAnnotation, e as RTETableCellAnnotation, f as RTETableHeadCellBlock, g as RTETableColorManager, h as RTETableBlock, i as generateTableBody, j as RTETableCellBlock, k as RTETableHeadBlock, l as RTETableBodyBlock, m as getParentBlockByType, n as RTETableHeadCellAnnotation, o as TableColumnStrategy, p as getAllTableRows, q as buildTableGrid, s as setSpanAttributes, r as findCellBlockById, t as getDefaultCellBlockTemplate, I as InsertTableColumnDirection, u as buildCellStartColumnMap, v as getTableColumnCount, w as getFirstNode, x as getCellSpan, y as createNewCell, z as MergeCellsOperationType, A as RTETableRowBlock, B as getActualColumnPosition, D as InsertTableRowDirection, E as RTE_TABLE_DEFAULT_COLORS, F as INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION, G as INSERT_TABLE_ROW_INTO_SAME_SECTION, H as DELETE_TABLE_ROW, J as TOGGLE_HEADER_ROW, K as INSERT_TABLE_COLUMN, L as DELETE_TABLE_COLUMN, N as TOGGLE_HEADER_TABLE_COLUMN, O as ToggleHeaderTableColumnStrategy, P as SPLIT_TABLE_CELL, Q as REPLACE_TABLE_CELL, U as SPLIT_CELL_HORIZONTALLY, W as SPLIT_CELL_VERTICALLY, X as SELECT_TABLE_COLUMN, Y as MERGE_CELLS } from './split-cell-operation-2e700c5c.js';
+import { V as VegaDropdownClick, a as VegaClick, b as VegaPopoverHide, c as VegaPopoverShow } from './vega-event-id-a6ccca66.js';
+import { R as RTETableExtensionAnnotationTypeEnum, a as RTE_TABLE_HEAD_DEFAULT_BACKGROUND_COLOR, S as SettingEventHandler, T as TableSettingType, b as RTETableAnnotation, c as RTETableCellAnnotation, d as RTETableHeadCellBlock, e as RowOperationEventHandler, C as ColumnOperationEventHandler, M as MergeCellsOperationEventHandler, f as SplitCellOperationEventHandler, g as RTETableColorManager, h as RTETableBlock, i as generateTableBody, j as RTETableCellBlock, k as RTETableHeadBlock, l as RTETableBodyBlock, m as getParentBlockByType, n as RTETableHeadCellAnnotation, o as TableColumnStrategy, p as getAllTableRows, q as buildTableGrid, s as setSpanAttributes, r as findCellBlockById, t as getDefaultCellBlockTemplate, I as InsertTableColumnDirection, u as buildCellStartColumnMap, v as getTableColumnCount, w as getFirstNode, x as getCellSpan, y as createNewCell, z as MergeCellsOperationType, A as RTETableRowBlock, B as getActualColumnPosition, D as InsertTableRowDirection, E as RTE_TABLE_DEFAULT_COLORS, F as INSERT_TABLE_ROW_INTO_DIFFERENT_SECTION, G as INSERT_TABLE_ROW_INTO_SAME_SECTION, H as DELETE_TABLE_ROW, J as TOGGLE_HEADER_ROW, K as INSERT_TABLE_COLUMN, L as DELETE_TABLE_COLUMN, N as TOGGLE_HEADER_TABLE_COLUMN, O as ToggleHeaderTableColumnStrategy, P as SPLIT_TABLE_CELL, Q as REPLACE_TABLE_CELL, U as SPLIT_CELL_HORIZONTALLY, W as SPLIT_CELL_VERTICALLY, X as SELECT_TABLE_COLUMN, Y as MERGE_CELLS } from './split-cell-operation-90c30861.js';
+import { C as ChangeManager } from './change-manager-6a7eb88c.js';
+import { V as VegaInternalRTEExtensionTableCellsSelectionAnchor, a as VegaInternalPopoverUpdateTarget, b as VegaInternalRTEExtensionTableCellSelectionChange } from './vega-internal-event-id-db974a0d.js';
 import { r as remoteInvocationRegistry } from './remote-invocation-registry-d69245c2.js';
-import { V as VegaInternalPopoverUpdateTarget, a as VegaInternalRTEExtensionTableCellsSelectionAnchor, b as VegaInternalRTEExtensionTableCellSelectionChange } from './vega-internal-event-id-194bac82.js';
 import { V as VegaInternalThemeManager } from './dark-mode-style-controller-e9a6b097.js';
 import { t as tryGetDocument } from './try-get-document-bef0f526.js';
 import { p as parseToPixelString } from './pixel-f32c07ce.js';
 import { c as cleanObject } from './object-0c277f57.js';
-import { C as ChangeManager } from './change-manager-6a7eb88c.js';
 import { d as debounce } from './timer-9321173b.js';
 
 const VegaLoaderRuntimeMetricsPayloadDefinition = [
@@ -1485,6 +1485,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.
@@ -1492,9 +1494,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),
@@ -1515,6 +1517,10 @@ class VegaRTEToolbarButtonRenderer {
         })
         : null,
     ].filter(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.
@@ -1618,7 +1624,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),
     ]);
   }
@@ -1859,6 +1869,7 @@ class RTELanguageToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
       this.renderButton(createElement, editorContext, {
         label: this.getLanguageLabelByKey(this.selectedLanguage),
         showArrowIcon: true,
+        tooltip: { text: 'Select language' },
       }),
     ]);
   }
@@ -2393,6 +2404,7 @@ class FunctionToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
       this.renderButton(h, editorContext, {
         label: 'Functions',
         showArrowIcon: true,
+        tooltip: { text: 'Insert function' },
       }),
       this.renderDropdownListTemplate(h, FunctionToolbarButtonRenderer.FUNCTION_LIST),
     ]);
@@ -3093,162 +3105,6 @@ class CaptionOperationEventHandler extends SettingEventHandler {
   }
 }
 
-/**
- * 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 RowOperationEventHandler(),
-      new CaptionOperationEventHandler(),
-      new ColumnOperationEventHandler(),
-      new MergeCellsOperationEventHandler(),
-      new 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.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) {
-        const extensionContext = this.getTableExtensionContext();
-        extensionContext && handler.execute(event.detail, extensionContext, this.tableData);
-        if (event.detail[0] === TableSettingType.CAPTION) {
-          this.updateTableSettingCaption();
-        }
-      }
-      if (event.detail[0] === TableSettingType.TABLE || event.detail[0] === 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.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: (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.
  */
@@ -3615,6 +3471,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.
  *
@@ -3624,7 +3499,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(),
@@ -3652,7 +3526,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);
       }
     };
@@ -3672,7 +3546,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);
       }
     };
@@ -3724,55 +3598,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.addUniqueObserverToNode(popover, 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: 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: 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();
+    if (safeDocument) {
+      const popover = safeDocument.createElement('vega-popover');
+      popover.trigger = 'click';
+      popover.isScreenPosition = true;
+      popover.className = 'rte-table-dynamic-popover';
+      DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, 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 = TableSettingType.TABLE;
+      tablePropsForm.setAttribute('type', 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 = TableSettingType.CELL;
+      cellPropsForm.setAttribute('type', 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.
@@ -3782,13 +3659,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) {
@@ -3861,6 +3738,153 @@ class TableDynamicPopoverRenderer extends TablePopoverBaseRenderer {
   }
 }
 
+/**
+ * Shared popover renderer for table settings.
+ */
+class TableSettingPopoverRenderer extends TablePopoverBaseRenderer {
+  constructor(renderContext) {
+    super(renderContext);
+    this.settingHandlers = [
+      new RowOperationEventHandler(),
+      new CaptionOperationEventHandler(),
+      new ColumnOperationEventHandler(),
+      new MergeCellsOperationEventHandler(),
+      new 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.call(domNodeSubjectFactory.getSubject(this.popoverRef, 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] === TableSettingType.CAPTION) {
+          this.updateTableSettingCaption();
+        }
+      }
+      if (event.detail[0] === TableSettingType.TABLE || event.detail[0] === 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(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();
+    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.addUniqueObserverToNode(popover, 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.
  */
@@ -3869,12 +3893,9 @@ class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
    * @inheritDoc
    */
   doRender(h, renderData, rteContext) {
-    const tableSettingPopoverRenderer = new TableSettingPopoverRenderer(rteContext);
-    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(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(RTETableExtensionAnnotationTypeEnum.TABLE);
     const children = rteContext.editable
       ? [
@@ -3885,17 +3906,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];
@@ -3917,6 +3944,12 @@ class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
     result.childrenContainerGetter = () => table;
     return result;
   }
+  /**
+   * Destroys the table toolbar popover.
+   */
+  destroy() {
+    this.destroyTableToolbar();
+  }
   /**
    * @inheritDoc
    */
@@ -3966,6 +3999,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;
+  }
 }
 
 /**
@@ -4299,6 +4355,7 @@ class RTETableToolbarButtonRenderer extends VegaRTEToolbarButtonRenderer {
     return createTablePopoverRenderer.render(h, super.renderButton(h, editorContext, {
       showArrowIcon: true,
       icon: 'rte-table',
+      tooltip: { text: 'Insert table' },
     }));
   }
   /**
@@ -7479,6 +7536,7 @@ class VegaRTETableExtension extends VegaRTEExtension {
    * @inheritDoc
    */
   destroyExtension() {
+    this.tableBlockRenderer.destroy();
     this.tableSelection.destroy();
   }
 }