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

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

@@ -0,0 +1,74 @@
+import { VegaRTEExtensionRenderer } from '../../base-extension-renderer';
+import { findParent } from '../../../../../utils/ui';
+/**
+ * Renders a table cell block in the rich text editor.
+ */
+export class RTETableCellRenderer extends VegaRTEExtensionRenderer {
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData, rteContext) {
+    return this.renderByCellType(h, renderData, rteContext, 'td');
+  }
+  /**
+   * Injects the extension context
+   *
+   * @param {RTETableExtensionContext} context - extension context
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Renders the table cell based on its type (td or th).
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {RTETableCellBlock} renderData - The table cell block to render.
+   * @param {RTERenderContext} rteContext - The rte editor context.
+   * @param {'td' | 'th'} elementType - The type of table cell element ('td' or 'th').
+   * @returns {VegaRTERenderResult} - The rendered table cell element.
+   */
+  renderByCellType(h, renderData, rteContext, elementType) {
+    var _a;
+    return h(elementType, Object.assign(Object.assign(Object.assign({ key: renderData.id, ref: this.useRef(renderData) }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(rteContext), class: renderData.getClasses() }), (rteContext.editable ? this.onSelectionListeners(renderData) : undefined)));
+  }
+  /**
+   * Returns the mouse event listeners for selection handling.
+   *
+   * @param {RTETableCellBlock} renderData - The table cell block to render.
+   * @returns {RTETableSelectionListenersType} - The mouse event listeners.
+   */
+  onSelectionListeners(renderData) {
+    return {
+      /**
+       * Handles the mouse down event to focus a cell.
+       *
+       * @param {MouseEvent} event - The mouse event.
+       */
+      onMouseDown: (event) => {
+        const targetParentTable = findParent(event.target, 'table');
+        const currentTable = findParent(event.currentTarget, 'table');
+        const inCurrentTable = currentTable === targetParentTable;
+        const cellRef = event.target.closest('td, th');
+        if (inCurrentTable && cellRef) {
+          this.extensionContext.tableSelection.focusCell(cellRef);
+        }
+      },
+      /**
+       * Handles the mouse move event to start selection.
+       *
+       * @param {MouseEvent} event - The mouse event.
+       */
+      onMouseMove: (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        this.extensionContext.tableSelection.dragOver(renderData);
+      },
+      /**
+       * Handles the mouse up event to end selection.
+       */
+      onMouseUp: () => {
+        this.extensionContext.tableSelection.endDrag();
+      },
+    };
+  }
+}

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

@@ -0,0 +1,99 @@
+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 stateEntityRenderingRegistry from '../../../slimmers/controllers/state-entity-rendering-registry';
+export const CONTENT_CLASS_MAP = {
+  [TableSettingType.TABLE_PROPERTIES]: 'rte-table-properties-popover',
+  [TableSettingType.CELL_PROPERTIES]: 'rte-cell-properties-popover',
+};
+/**
+ * Renderer for a generic, dynamically positioned popover used within table-related extensions.
+ *
+ * - The popover target is based on the current cursor/selection position.
+ * - The popover content is rendered dynamic content.
+ */
+export class TableDynamicPopoverRenderer {
+  /**
+   * Shows the popover. Before showing, it will refresh the target so
+   * that the popover is positioned relative to the latest cursor position.
+   *
+   * @param {string} type - The table setting type determining which
+   *  content variant to display (for example, table properties or cell properties).
+   */
+  async show(type) {
+    let target = this.getTableRef();
+    const cells = this.extensionContext.tableSelection.getSelectedCells();
+    if (type !== TableSettingType.TABLE_PROPERTIES && cells.length === 1) {
+      target = stateEntityRenderingRegistry.getDOMByEntity(cells[0]);
+    }
+    this.updateContent(type);
+    remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), target);
+    await this.popoverRef.show();
+  }
+  /**
+   * hide the popover.
+   */
+  async hide() {
+    await this.popoverRef.hide();
+  }
+  /**
+   * Injects the RTE extension context.
+   *
+   * @param {RTETableExtensionContext} context - The RTE extension context.
+   */
+  injectRTEExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Renders a vega-popover whose target and content are provided dynamically by callers.
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {() => HTMLElement} getTableRef - Current table DOM reference
+   * @returns {VegaRTERenderResult} The rendered popover host.
+   */
+  render(h, getTableRef) {
+    this.getTableRef = getTableRef;
+    return h('vega-popover', {
+      trigger: 'click',
+      isScreenPosition: true,
+      class: 'rte-table-dynamic-popover',
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (popover) => {
+        this.popoverRef = popover;
+      },
+    }, [
+      h('div', {
+        slot: 'popover',
+        class: 'rte-table-dynamic-popover-content',
+        // eslint-disable-next-line jsdoc/require-jsdoc
+        ref: (ref) => (this.contentRef = ref),
+      }, [
+        h('div', {
+          class: CONTENT_CLASS_MAP[TableSettingType.TABLE_PROPERTIES],
+        }, 'table-properties'),
+        h('div', {
+          class: CONTENT_CLASS_MAP[TableSettingType.CELL_PROPERTIES],
+        }, 'cell-properties'),
+      ]),
+    ]);
+  }
+  /**
+   * Updates the visibility of the pre-rendered content blocks based on type.
+   *
+   * @param {string} type - The table setting type determining which content variant should be visible.
+   */
+  updateContent(type) {
+    if (type !== this.currentType) {
+      this.currentType = type;
+      this.contentRef.childNodes.forEach((child) => {
+        if (child.classList.contains(CONTENT_CLASS_MAP[this.currentType])) {
+          child.style.display = 'block';
+        }
+        else {
+          child.style.display = 'none';
+        }
+      });
+    }
+  }
+}

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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,103 @@
+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';
+/**
+ * Renderer for the RTETableBlock.
+ */
+export class RTETableBlockRenderer extends VegaRTEExtensionRenderer {
+  constructor() {
+    super(...arguments);
+    this.extensionContext = null;
+  }
+  /**
+   * @inheritDoc
+   */
+  doRender(h, renderData, rteContext) {
+    const tableSettingPopoverRenderer = new TableSettingPopoverRenderer();
+    const tableDynamicPopoverRenderer = new TableDynamicPopoverRenderer();
+    if (this.extensionContext) {
+      tableSettingPopoverRenderer.injectRTEExtensionContext(this.extensionContext);
+      tableDynamicPopoverRenderer.injectRTEExtensionContext(this.extensionContext);
+    }
+    let tableRef;
+    const table = this.renderTable(h, renderData);
+    const tableSettingPopover = tableSettingPopoverRenderer.render(h, renderData, tableDynamicPopoverRenderer);
+    const tableDynamicPopover = tableDynamicPopoverRenderer.render(h, () => tableRef);
+    const tableAnnotation = renderData.getAnnotationByType(RTETableExtensionAnnotationTypeEnum.TABLE);
+    const children = rteContext.editable
+      ? [
+        h('vega-rich-text-table-selection-widget', {
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          onVegaRemove: (e) => {
+            e.stopPropagation();
+            this.handleTableRemove(renderData);
+          },
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          onClick: (event) => tableSettingPopoverRenderer.handleTableClick(event, tableRef),
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          onMouseLeave: () => {
+            tableSettingPopoverRenderer.syncSelectedCells();
+          },
+        }, [
+          h('vega-box', {
+            class: 'v-rte--extension-table-popover-trigger',
+            // eslint-disable-next-line jsdoc/require-jsdoc
+            ref: (ref) => (tableRef = ref),
+          }, [table, tableSettingPopover, tableDynamicPopover]),
+        ]),
+      ]
+      : [table];
+    const result = h('div', {
+      class: 'v-rte--extension-table-container',
+      style: Object.assign({}, (tableAnnotation && tableAnnotation.renderAlignmentStyle())),
+    }, children);
+    /**
+     * The getter for the children container.
+     *
+     * @returns {VegaRTERenderResult} - The children container render result.
+     */
+    result.childrenContainerGetter = () => table;
+    return result;
+  }
+  /**
+   * @inheritDoc
+   */
+  injectRTEScopeStyles() {
+    return styles;
+  }
+  /**
+   * Injects the RTE extension context.
+   *
+   * @param {RTETableExtensionContext} context - The RTE extension context.
+   */
+  injectExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Renders the table element.
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {RTETableBlock} renderData - The table block to render.
+   * @returns {VegaRTERenderResult} - The rendered table element.
+   */
+  renderTable(h, renderData) {
+    var _a;
+    return h('table', Object.assign(Object.assign({ key: renderData.id }, (_a = renderData.getCustomAttributesAnnotation()) === null || _a === void 0 ? void 0 : _a.render()), { style: renderData.getStyles(), class: [RTETableBlockRenderer.EXTENSION_TABLE_CLASS, renderData.getClasses()].join(' '), 
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (ref) => {
+        this.useRef(renderData)(ref);
+      } }));
+  }
+  /**
+   * Handles the removal of the table block.
+   *
+   * @param {RTETableBlock} renderData - The table block to remove.
+   */
+  handleTableRemove(renderData) {
+    renderData.parent.apply(new DeleteTableBlockAction(renderData));
+  }
+}
+RTETableBlockRenderer.EXTENSION_TABLE_CLASS = 'v-rte--extension-table';

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,145 @@
+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('.v-rte--extension-table-popover-trigger');
+      if (trigger !== ownTrigger) {
+        void this.popoverRef.hide();
+        void this.tableDynamicPopover.hide();
+        return;
+      }
+      void this.tableDynamicPopover.hide();
+      if (!this.popoverShow) {
+        remoteInvocationRegistry.call(domNodeSubjectFactory.getSubject(this.popoverRef, VegaInternalPopoverUpdateTarget), ownTrigger);
+        void this.popoverRef.show();
+      }
+    };
+    /**
+     * Sync the selected cells from the table selection to the table setting component.
+     */
+    this.syncSelectedCells = () => {
+      if (this.tableSettingRef) {
+        const selectedCells = this.getTableSelectedCells();
+        this.tableSettingRef.selectedCells = selectedCells;
+      }
+    };
+    /**
+     * Receive setting menu click events.
+     *
+     * @param {CustomEvent<Array<string>>} event - The custom event emitted from the setting menu.
+     */
+    this.handleSettingMenuClick = (event) => {
+      const handler = this.settingHandlers.find((handler) => handler.canHandle(event.detail));
+      if (handler) {
+        handler.execute(event.detail, this.extensionContext, this.tableData);
+        if (event.detail[0] === TableSettingType.CAPTION) {
+          this.updateTableSettingCaption();
+        }
+      }
+      if (event.detail[0] === TableSettingType.TABLE_PROPERTIES ||
+        event.detail[0] === TableSettingType.CELL_PROPERTIES) {
+        void this.popoverRef.hide();
+        void this.tableDynamicPopover.show(event.detail[0]);
+      }
+    };
+    /**
+     * Handles the popover show event to sync the selected table cells to the table setting component.
+     */
+    this.handleTableSettingPopoverShow = () => {
+      this.syncSelectedCells();
+      this.popoverShow = true;
+    };
+  }
+  /**
+   * Injects the RTE extension context.
+   *
+   * @param {RTETableExtensionContext} context - The RTE extension context.
+   */
+  injectRTEExtensionContext(context) {
+    this.extensionContext = context;
+  }
+  /**
+   * Render the popover host and inject the table-setting component with refs wired up.
+   *
+   * @param {VegaRTECreateElementFunction} h - The create element function.
+   * @param {RTETableBlock} renderData - The table block to render.
+   * @param {TableDynamicPopoverRenderer} tableDynamicPopover - Renderer used to show
+   *  the secondary table popover (for example, table-properties-specific settings).
+   * @returns {VegaRTERenderResult} The rendered popover structure.
+   */
+  render(h, renderData, tableDynamicPopover) {
+    this.tableData = renderData;
+    this.tableDynamicPopover = tableDynamicPopover;
+    return h('vega-popover', {
+      trigger: 'click',
+      isScreenPosition: true,
+      class: 'rte-table-setting-popover',
+      // eslint-disable-next-line jsdoc/require-jsdoc
+      ref: (popover) => {
+        this.popoverRef = popover;
+        if (this.popoverRef) {
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverShow, this.handleTableSettingPopoverShow);
+          DomNodeSubjectObserverFactory.addUniqueObserverToNode(popover, VegaPopoverHide, () => (this.popoverShow = false));
+        }
+      },
+    }, [
+      h('div', { slot: 'popover' }, [
+        h('vega-rich-text-table-setting', {
+          // eslint-disable-next-line jsdoc/require-jsdoc
+          ref: (el) => {
+            this.tableSettingRef = el;
+          },
+          selectedCells: this.getTableSelectedCells(),
+          onVegaClick: this.handleSettingMenuClick,
+        }),
+      ]),
+    ]);
+  }
+  /**
+   * Updates the table setting component caption state to match the given table data.
+   */
+  updateTableSettingCaption() {
+    const hasCaption = this.tableData.hasCaption();
+    if (this.tableSettingRef && this.tableSettingRef.hasCaption !== hasCaption) {
+      this.tableSettingRef.hasCaption = hasCaption;
+    }
+  }
+  /**
+   * Collects and returns the currently selected table cells.
+   *
+   * @returns {RTETableCellBlock[]} The array of currently selected table cell blocks.
+   */
+  getTableSelectedCells() {
+    let selectedCells = [];
+    if (this.extensionContext && this.extensionContext.tableSelection) {
+      const { tableSelection } = this.extensionContext;
+      selectedCells = tableSelection.getSelectedCells();
+    }
+    return selectedCells;
+  }
+}

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

@@ -0,0 +1,78 @@
+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);
+  }
+}

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

@@ -0,0 +1,109 @@
+import { ToggleHeaderTableColumnStrategy } from '../action-handler-strategies/toggle-header-table-column-strategy';
+import { DeleteTableColumnAction } from '../actions/delete-table-column-action';
+import { InsertTableColumnDirection, InsertTableColumnAction } from '../actions/insert-table-column-action';
+import { SelectTableColumnAction } from '../actions/select-table-column-action';
+import { ToggleHeaderTableColumnAction } from '../actions/toggle-header-table-column-action';
+import { RTETableBlock } from '../dto/table-block';
+import { getParentBlockByType } from '../utils/utils';
+import { SettingEventHandler, TableSettingType } from './setting-event-handler.abstract';
+export var ColumnOperationType;
+(function (ColumnOperationType) {
+  ColumnOperationType["HEADER_COLUMN"] = "HEADER_COLUMN";
+  ColumnOperationType["ADD_COLUMN_LEFT"] = "ADD_COLUMN_LEFT";
+  ColumnOperationType["ADD_COLUMN_RIGHT"] = "ADD_COLUMN_RIGHT";
+  ColumnOperationType["DELETE_COLUMN"] = "DELETE_COLUMN";
+  ColumnOperationType["SELECT_COLUMN"] = "SELECT_COLUMN";
+})(ColumnOperationType || (ColumnOperationType = {}));
+/**
+ * Event handler for column operations in a table.
+ */
+export class ColumnOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.COLUMN;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const selectedCells = extensionContext.tableSelection.getSelectedCells();
+    if (!selectedCells || selectedCells.length === 0) {
+      return;
+    }
+    const operation = action[1];
+    switch (operation) {
+      case ColumnOperationType.ADD_COLUMN_LEFT:
+      case ColumnOperationType.ADD_COLUMN_RIGHT:
+        this.handleInsertColumn(operation, selectedCells);
+        break;
+      case ColumnOperationType.DELETE_COLUMN:
+        this.handleDeleteColumn(selectedCells);
+        break;
+      case ColumnOperationType.SELECT_COLUMN:
+        this.handleSelectColumn(selectedCells, extensionContext);
+        break;
+      case ColumnOperationType.HEADER_COLUMN:
+        this.handleToggleHeaderColumn(selectedCells);
+        break;
+      default:
+        break;
+    }
+  }
+  /**
+   * Adds a new column to the table at the specified position.
+   *
+   * @param {ColumnOperationType} direction - The position to insert the new column (left or right).
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+   */
+  handleInsertColumn(direction, selectedCells) {
+    const action = new InsertTableColumnAction(direction === ColumnOperationType.ADD_COLUMN_LEFT
+      ? InsertTableColumnDirection.LEFT
+      : InsertTableColumnDirection.RIGHT, selectedCells);
+    this.applyActionOnTable(action, selectedCells[0]);
+  }
+  /**
+   * Deletes the selected column from the table.
+   *
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+   */
+  handleDeleteColumn(selectedCells) {
+    const action = new DeleteTableColumnAction(selectedCells);
+    this.applyActionOnTable(action, selectedCells[0]);
+  }
+  /**
+   * Selects the entire column in the table.
+   *
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+   * @param {RTETableExtensionContext} extensionContext - The table extension context.
+   */
+  handleSelectColumn(selectedCells, extensionContext) {
+    const action = new SelectTableColumnAction(selectedCells, (allSelectedCells) => {
+      extensionContext.tableSelection.setSelectedCells(allSelectedCells);
+    });
+    this.applyActionOnTable(action, selectedCells[0]);
+  }
+  /**
+   * Toggles the header state of the selected column in the table.
+   *
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - The selected table cells.
+   */
+  handleToggleHeaderColumn(selectedCells) {
+    const headerOn = !ToggleHeaderTableColumnStrategy.isFullHeaderSelection(selectedCells);
+    const action = new ToggleHeaderTableColumnAction(selectedCells, headerOn);
+    this.applyActionOnTable(action, selectedCells[0]);
+  }
+  /**
+   * Apply the specified action on the table containing the selected cell.
+   *
+   * @param {DeleteTableColumnAction | InsertTableColumnAction} action - The action to apply.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} selectedCell - The selected table cell.
+   */
+  applyActionOnTable(action, selectedCell) {
+    const table = getParentBlockByType(selectedCell, RTETableBlock);
+    if (table) {
+      table.apply(action);
+    }
+  }
+}