@heartlandone/vega 2.74.0-RTE-table-preview → 2.74.0

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-dynamic-popover-renderer.js

@@ -1,254 +0,0 @@
-import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
-import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalPopoverUpdateTarget, VegaInternalRTEExtensionTableCellsSelectionAnchor, } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import { tryGetDocument } from '../../../../../utils/try-get-document';
-import { isNonNullable } from '../../../../../types/type-guard';
-import { TableSettingType } from '../setting-event-handlers/setting-event-handler.abstract';
-import stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
-import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { TablePropertiesEventHandler } from '../setting-event-handlers/table-properties';
-import { TablePropertiesCancelEventHandler } from '../setting-event-handlers/table-properties-cancel-event-handler';
-import { TablePropertiesSaveEventHandler } from '../setting-event-handlers/table-properties-save-event-handler';
-import { TablePropertiesChangeEventHandler } from '../setting-event-handlers/table-properties-change-event-handler';
-import { CellPropertiesSaveEventHandler } from '../setting-event-handlers/cell-properties-save-event-handler';
-import { CellPropertiesEventHandler } from '../setting-event-handlers/cell-properties';
-import { CellPropertiesChangeEventHandler } from '../setting-event-handlers/cell-properties-change-event-handler';
-import { CellPropertiesCancelEventHandler } from '../setting-event-handlers/cell-properties-cancel-event-handler';
-import { VegaPopoverHide } from '../../../../../helpers/event-manager/event-id/vega-event-id';
-/**
- * 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.
- */
-export class TableDynamicPopoverRenderer {
-  constructor(colors) {
-    this.tableColorSchema = [];
-    this.popoverCloseType = 'none'; // 'save' | 'cancel' | 'change' | 'none'
-    this.tablePropertiesHandlerMap = {
-      save: new TablePropertiesSaveEventHandler(),
-      cancel: new TablePropertiesCancelEventHandler(),
-      change: new TablePropertiesChangeEventHandler(),
-    };
-    this.cellPropertiesHandlerMap = {
-      save: new CellPropertiesSaveEventHandler(),
-      cancel: new CellPropertiesCancelEventHandler(),
-      change: new CellPropertiesChangeEventHandler(),
-    };
-    /**
-     * Updates the table properties based on the emitted event.
-     *
-     * @param {CustomEvent} e - The custom event containing the update details.
-     */
-    this.handleTablePropertiesUpdate = (e) => {
-      const eventKey = e.type.replace('vega', '').toLowerCase(); // 'save' | 'cancel' | 'change'
-      this.popoverCloseType = eventKey;
-      if (eventKey !== 'change') {
-        void this.hide();
-      }
-      this.tablePropertiesHandlerMap[eventKey].handle(this.extensionContext, this.currentTableBlock, e.detail, this.currentFocusNode);
-      // Update popover position to follow the target after styles change
-      if (eventKey === 'change' && this.popoverRef) {
-        void this.popoverRef.show(true);
-      }
-    };
-    /**
-     * Updates the cell properties based on the emitted event.
-     *
-     * @param {CustomEvent} e - The custom event containing the update details.
-     */
-    this.handleCellPropertiesUpdate = (e) => {
-      const eventKey = e.type.replace('vega', '').toLowerCase(); // 'save' | 'cancel' | 'change'
-      this.popoverCloseType = eventKey;
-      if (eventKey !== 'change') {
-        void this.hide();
-      }
-      this.cellPropertiesHandlerMap[eventKey].handle(this.extensionContext, e.detail, this.currentFocusNode);
-      // Update popover position to follow the target after styles change
-      if (eventKey === 'change' && this.popoverRef) {
-        void this.popoverRef.show(true);
-      }
-    };
-    this.tableColorSchema = colors;
-  }
-  /**
-   * removes the multi-cell selection anchor element from the DOM, if present,
-   * and clears the internal reference.
-   */
-  destroy() {
-    if (this.selectionAnchorRef && this.selectionAnchorRef.parentNode) {
-      DomNodeSubjectObserverFactory.removeUniqueObserverFromNode(this.selectionAnchorRef, VegaInternalRTEExtensionTableCellsSelectionAnchor);
-      this.selectionAnchorRef.parentNode.removeChild(this.selectionAnchorRef);
-      this.selectionAnchorRef = null;
-    }
-  }
-  /**
-   * 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.CELL && cells.length > 1) {
-      const anchor = this.getOrCreateSelectionAnchor(cells, target);
-      if (anchor) {
-        target = anchor;
-      }
-    }
-    else if (type === TableSettingType.CELL && cells.length === 1) {
-      target = stateEntityRenderingRegistry.getDOMByEntity(cells[0]);
-    }
-    this.updateContent(type);
-    this.storeCurrentFocusNode();
-    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
-   * @param {RTETableBlock} renderData - Current table block being rendered.
-   * @returns {VegaRTERenderResult} The rendered popover host.
-   */
-  render(h, getTableRef, renderData) {
-    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, () => {
-          if (this.popoverCloseType === 'change' && this.extensionContext) {
-            this.extensionContext.flushValue(this.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,
-        }),
-      ]),
-    ]);
-  }
-  /**
-   * 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) {
-    this.popoverCloseType = 'none';
-    if (this.tablePropertiesFormRef && 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') {
-      this.cellPropertiesFormRef.classList.remove('vega-hidden');
-      this.tablePropertiesFormRef.classList.add('vega-hidden');
-      this.cellPropertiesFormRef.styleMap = CellPropertiesEventHandler.getStyleCollectionFromCell(this.extensionContext.tableSelection.getSelectedCells());
-      this.cellPropertiesFormRef.defaultValue = CellPropertiesEventHandler.convertStyleMapToFormField(this.cellPropertiesFormRef.styleMap);
-    }
-    // when open the properties dialog
-    // the properties form will set default value
-    // this will trigger selectionchange event
-    // the `rte` selection should be cleared.
-    // Otherwise, it will cause `getSelection` to retrieve incorrect data in the `selectionchange` callback.
-    // For example, in table selection.
-    this.extensionContext.getSelection().removeAllRanges();
-  }
-  /**
-   * Stores the current focus node before properties update action.
-   */
-  storeCurrentFocusNode() {
-    this.extensionContext && (this.currentFocusNode = this.extensionContext.getSelectedNodes()[0]);
-  }
-  /**
-   * Create and position an invisible anchor element whose position and size are identical to the geometry of the current multi-cell selection.
-   * This anchor element will then be used as the target of the popup, so that the popup appears near the entire selection area.
-   *
-   * @param {RTETableCellBlock[]} cells - The currently selected table cells.
-   * @param {Nullable<HTMLElement>} tableRef - The container table element.
-   * @returns {Nullable<HTMLElement>} The positioned anchor element.
-   */
-  getOrCreateSelectionAnchor(cells, tableRef) {
-    const safeDocument = tryGetDocument();
-    if (safeDocument && tableRef) {
-      const container = tableRef.closest('.rich-text-content');
-      const parentRect = container.getBoundingClientRect();
-      let leftViewport = Number.POSITIVE_INFINITY;
-      let rightViewport = Number.NEGATIVE_INFINITY;
-      let topViewport = Number.POSITIVE_INFINITY;
-      let bottomViewport = Number.NEGATIVE_INFINITY;
-      cells
-        .map((cell) => stateEntityRenderingRegistry.getDOMByEntity(cell))
-        .filter(isNonNullable)
-        .forEach((el) => {
-        const elRect = el.getBoundingClientRect();
-        // get the minimum and maximum cell edges to get the bounding rectangle of the whole selection relative to the container.
-        leftViewport = Math.min(leftViewport, elRect.left - parentRect.left);
-        rightViewport = Math.max(rightViewport, elRect.right - parentRect.left);
-        topViewport = Math.min(topViewport, elRect.top - parentRect.top);
-        bottomViewport = Math.max(bottomViewport, elRect.bottom - parentRect.top);
-      });
-      const widthViewport = rightViewport - leftViewport;
-      const heightViewport = bottomViewport - topViewport;
-      this.selectionAnchorRef = container.querySelector('.rte-table-selection-popover-anchor');
-      if (!this.selectionAnchorRef) {
-        this.selectionAnchorRef = safeDocument.createElement('div');
-        this.selectionAnchorRef.className = 'rte-table-selection-popover-anchor';
-        this.selectionAnchorRef.style.position = 'absolute';
-        this.selectionAnchorRef.style.pointerEvents = 'none';
-        container.appendChild(this.selectionAnchorRef);
-        DomNodeSubjectObserverFactory.addUniqueObserverToNode(this.selectionAnchorRef, VegaInternalRTEExtensionTableCellsSelectionAnchor, () => {
-          this.destroy();
-        });
-      }
-      this.selectionAnchorRef.style.left = `${leftViewport}px`;
-      this.selectionAnchorRef.style.top = `${topViewport}px`;
-      this.selectionAnchorRef.style.width = `${widthViewport}px`;
-      this.selectionAnchorRef.style.height = `${heightViewport}px`;
-      return this.selectionAnchorRef;
-    }
-  }
-}

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-head-cell-renderer.js

@@ -1,12 +0,0 @@
-import { RTETableCellRenderer } from './table-cell-renderer';
-/**
- * Renders a head cell block in the rich text editor.
- */
-export class RTETableHeadCellRenderer extends RTETableCellRenderer {
-  /**
-   * @inheritDoc
-   */
-  doRender(h, renderData, rteContext) {
-    return super.renderByCellType(h, renderData, rteContext, 'th');
-  }
-}

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-head-renderer.js

@@ -1,15 +0,0 @@
-import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
-/**
- * Renders a logic control block in the rich text editor.
- */
-export class RTETableHeadRenderer extends VegaRTEExtensionRenderer {
-  /**
-   * @inheritDoc
-   */
-  doRender(h, renderData) {
-    return h('thead', {
-      key: renderData.id,
-      ref: this.useRef(renderData),
-    });
-  }
-}

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-renderer.js

@@ -1,149 +0,0 @@
-import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
-import styles from '../table-block-styles.css';
-import { DeleteTableBlockAction } from '../actions/delete-table-block-action';
-import { TableSettingPopoverRenderer } from './table-setting-popover-renderer';
-import { RTETableExtensionAnnotationTypeEnum } from '../annotations/table-annotation';
-import { TableDynamicPopoverRenderer } from './table-dynamic-popover-renderer';
-import changeManager from '../../../../../helpers/change-manager/change-manager';
-import DomNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalRTEExtensionTableCellsSelectionAnchor } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
-/**
- * Renderer for the RTETableBlock.
- */
-export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
-  constructor() {
-    super(...arguments);
-    this.extensionContext = null;
-    this.popoverRenders = [];
-  }
-  /**
-   * @inheritDoc
-   */
-  doRender(h, renderData, rteContext) {
-    const tableSettingPopoverRenderer = new TableSettingPopoverRenderer();
-    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer(this.tableColorSchema);
-    this.injectExtensionContextToRenderers(this.extensionContext, [
-      tableDynamicPopoverRenderer,
-      tableSettingPopoverRenderer,
-    ]);
-    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);
-    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, tableRef);
-          },
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          onClick: (event) => tableSettingPopoverRenderer.handleTableClick(event, tableRef),
-          // eslint-disable-next-line jsdoc/require-jsdoc
-          onMouseLeave: () => {
-            tableSettingPopoverRenderer.syncSelectedCells();
-          },
-        }, [table, tableSettingPopover, tableDynamicPopover]),
-      ]
-      : [table];
-    const containerStyle = {};
-    if (tableAnnotation) {
-      const tableStyle = tableAnnotation.renderStyle();
-      containerStyle.width = tableStyle.width;
-      containerStyle.margin = tableStyle.margin;
-    }
-    const result = h('div', {
-      class: 'v-rte--extension-table-container',
-      style: Object.assign({}, containerStyle),
-    }, children);
-    /**
-     * The getter for the children container.
-     *
-     * @returns {VegaRTERenderResult} - The children container render result.
-     */
-    result.childrenContainerGetter = () => table;
-    return result;
-  }
-  /**
-   * @inheritDoc
-   */
-  injectRTEScopeStyles() {
-    return styles;
-  }
-  /**
-   * Injects the RTE extension context.
-   *
-   * @param {RTETableExtensionContext} context - The RTE extension context.
-   */
-  injectExtensionContext(context) {
-    this.extensionContext = context;
-    this.injectExtensionContextToRenderers(context, this.popoverRenders);
-  }
-  /**
-   * Updates the table color schema.
-   *
-   * @param {RTETableColorSchema[]} colors - The new table color schema.
-   */
-  updateTableColorSchema(colors) {
-    this.tableColorSchema = colors;
-  }
-  /**
-   * Renders the table element.
-   *
-   * @param {VegaRTECreateElementFunction} h - The create element function.
-   * @param {RTETableBlock} renderData - The table block to render.
-   * @param {(ref: HTMLElement) => HTMLElement} setTableRef - Set table ref to tableRef
-   * @returns {VegaRTERenderResult} - The rendered table element.
-   */
-  renderTable(h, renderData, setTableRef) {
-    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: renderData.getClasses(), 
-      // eslint-disable-next-line jsdoc/require-jsdoc
-      ref: (ref) => {
-        this.useRef(renderData)(ref);
-        setTableRef(ref);
-      } }));
-  }
-  /**
-   * Handles the removal of the table block.
-   *
-   * @param {RTETableBlock} renderData - The table block to remove.
-   * @param {HTMLElement} tableRef - The element that can triggered the table popover open.
-   */
-  handleTableRemove(renderData, tableRef) {
-    renderData.parent.apply(new DeleteTableBlockAction(renderData));
-    this.destroySelectionAnchor(tableRef);
-  }
-  /**
-   * Notifies and clears the multi-cell selection anchor associated with the given table reference.
-   *
-   * @param {HTMLElement} tableRef - The table trigger element used to locate the rich text content container.
-   */
-  destroySelectionAnchor(tableRef) {
-    const container = tableRef.closest('.rich-text-content');
-    if (container) {
-      const selectionAnchorRef = container.querySelector('.rte-table-selection-popover-anchor');
-      if (selectionAnchorRef) {
-        changeManager.notify(DomNodeSubjectFactory.getSubject(selectionAnchorRef, VegaInternalRTEExtensionTableCellsSelectionAnchor), {
-          host: selectionAnchorRef,
-        });
-      }
-    }
-  }
-  /**
-   * Injects the RTE extension context to the given popover renderers.
-   *
-   * @param {Nullable<RTETableExtensionContext>} context - The RTE extension context.
-   * @param {(TableDynamicPopoverRenderer| TableSettingPopoverRenderer)[]} popoverRenderers - The popover renderers.
-   */
-  injectExtensionContextToRenderers(context, popoverRenderers) {
-    this.popoverRenders = popoverRenderers;
-    if (context) {
-      popoverRenderers.forEach((renderer) => {
-        renderer.injectRTEExtensionContext(context);
-      });
-    }
-  }
-}

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-row-renderer.js

@@ -1,15 +0,0 @@
-import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
-/**
- * Renders a logic control block in the rich text editor.
- */
-export class RTETableRowBlockRenderer extends VegaRTEExtensionRenderer {
-  /**
-   * @inheritDoc
-   */
-  doRender(h, renderData) {
-    return h('tr', {
-      key: renderData.id,
-      ref: this.useRef(renderData),
-    });
-  }
-}

package/dist/collection/components/vega-rich-text-editor/extensions/table/renderers/table-setting-popover-renderer.js

@@ -1,148 +0,0 @@
-import remoteInvocationRegistry from '../../../../../helpers/remote-invocation/remote-invocation-registry';
-import domNodeSubjectFactory from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-factory';
-import { VegaInternalPopoverUpdateTarget } from '../../../../../helpers/event-manager/event-id/vega-internal-event-id';
-import { TableSettingType, } from '../setting-event-handlers/setting-event-handler.abstract';
-import { RowOperationEventHandler } from '../setting-event-handlers/row-operation';
-import { CaptionOperationEventHandler } from '../setting-event-handlers/caption-operation';
-import { ColumnOperationEventHandler } from '../setting-event-handlers/column-operation';
-import { DomNodeSubjectObserverFactory } from '../../../../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
-import { VegaPopoverHide, VegaPopoverShow, } from '../../../../../helpers/event-manager/event-id/vega-event-id';
-/**
- * Centralizes the popover rendering and interaction logic for table settings.
- */
-export 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('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) {
-        handler.execute(event.detail, this.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;
-    };
-  }
-  /**
-   * 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 {() => 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 = [];
-    if (this.extensionContext && this.extensionContext.tableSelection) {
-      const { tableSelection } = this.extensionContext;
-      selectedCells = tableSelection.getSelectedCells();
-    }
-    return selectedCells;
-  }
-}

package/dist/collection/components/vega-rich-text-editor/extensions/table/setting-event-handlers/caption-operation.js

@@ -1,78 +0,0 @@
-import { SettingEventHandler, TableSettingType } from './setting-event-handler.abstract';
-import { RTETableCaptionBlock } from '../dto/table-caption-block';
-import { TableCaptionAction } from '../actions/table-caption-action';
-import { generateUUID } from '../../../../../utils/misc';
-/**
- * Event handler for row operations in a table.
- */
-export 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);
-  }
-}