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

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

@@ -0,0 +1,132 @@
+import { DeleteTableRowAction } from '../actions/delete-table-row-action';
+import { InsertTableRowAction, InsertTableRowDirection } from '../actions/insert-table-row-action';
+import { ToggleHeaderRowAction } from '../actions/toggle-header-row-action';
+import { RTETableBlock } from '../dto/table-block';
+import { RTETableRowBlock } from '../dto/table-row-block';
+import { getParentBlockByType } from '../utils/utils';
+import { SettingEventHandler, TableSettingType } from './setting-event-handler.abstract';
+export var RowOperationType;
+(function (RowOperationType) {
+  RowOperationType["HEADER_ROW"] = "HEADER_ROW";
+  RowOperationType["ADD_ROW_ABOVE"] = "ADD_ROW_ABOVE";
+  RowOperationType["ADD_ROW_BELOW"] = "ADD_ROW_BELOW";
+  RowOperationType["DELETE_ROW"] = "DELETE_ROW";
+  RowOperationType["SELECT_ROW"] = "SELECT_ROW";
+})(RowOperationType || (RowOperationType = {}));
+/**
+ * Event handler for row operations in a table.
+ */
+export class RowOperationEventHandler extends SettingEventHandler {
+  /**
+   * @inheritDoc
+   */
+  canHandle(action) {
+    return action[0] === TableSettingType.ROW;
+  }
+  /**
+   * @inheritDoc
+   */
+  execute(action, extensionContext) {
+    const operation = action[1];
+    switch (operation) {
+      case RowOperationType.ADD_ROW_ABOVE:
+      case RowOperationType.ADD_ROW_BELOW:
+        this.handleInsertRow(operation, extensionContext);
+        break;
+      case RowOperationType.DELETE_ROW:
+        this.handleDeleteRow(extensionContext);
+        break;
+      case RowOperationType.HEADER_ROW:
+        this.handleToggleHeader(extensionContext);
+        break;
+      case RowOperationType.SELECT_ROW:
+        this.handleSelectRow(extensionContext);
+        break;
+      default:
+        break;
+    }
+  }
+  /**
+   * Adds a new row to the table at the specified position.
+   *
+   * @param {RowOperationType} direction - The position to insert the new row (above or below).
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleInsertRow(direction, extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length > 0) {
+      const action = new InsertTableRowAction(direction === RowOperationType.ADD_ROW_ABOVE
+        ? InsertTableRowDirection.ABOVE
+        : InsertTableRowDirection.BELOW, selectedRows);
+      this.applyActionToTable(selectedRows[0], action);
+    }
+  }
+  /**
+   * Deletes the selected row(s) from the table.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleDeleteRow(extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length) {
+      const action = new DeleteTableRowAction(selectedRows);
+      this.applyActionToTable(selectedRows[0], action);
+    }
+  }
+  /**
+   * Converts selected rows to header rows or reverts them back to normal rows.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleToggleHeader(extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length > 0) {
+      const action = new ToggleHeaderRowAction(selectedRows);
+      this.applyActionToTable(selectedRows[0], action);
+    }
+  }
+  /**
+   * Selects the focus row(s) in the table.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   */
+  handleSelectRow(extensionContext) {
+    const selectedRows = this.getAllSelectedRows(extensionContext);
+    if (selectedRows.length > 0 && extensionContext && extensionContext.tableSelection) {
+      const allCells = selectedRows.flatMap((row) => row.children);
+      extensionContext.tableSelection.setSelectedCells(allCells);
+    }
+  }
+  /**
+   * Get all selected table rows.
+   *
+   * @param {RTETableExtensionContext} extensionContext - The extension context.
+   * @returns {RTETableRowBlock[]} The selected table row blocks.
+   */
+  getAllSelectedRows(extensionContext) {
+    const selectedRows = new Set();
+    if (extensionContext && extensionContext.tableSelection) {
+      const { tableSelection } = extensionContext;
+      const selectedCells = tableSelection.getSelectedCells();
+      selectedCells.forEach((cell) => {
+        const rowBlock = getParentBlockByType(cell, RTETableRowBlock);
+        if (rowBlock) {
+          selectedRows.add(rowBlock);
+        }
+      });
+    }
+    return Array.from(selectedRows);
+  }
+  /**
+   * Applies the given action to the table containing the reference block.
+   *
+   * @param {RTEBlock} refBlock - The reference block within the table.
+   * @param {ModifyContentAction} action - The action to apply to the table.
+   */
+  applyActionToTable(refBlock, action) {
+    const table = getParentBlockByType(refBlock, RTETableBlock);
+    if (table) {
+      table.apply(action);
+    }
+  }
+}

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

@@ -0,0 +1,44 @@
+import { VegaRTEContent } from '../../../dto/content-state';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+export var TableSettingType;
+(function (TableSettingType) {
+  TableSettingType["ROW"] = "ROW";
+  TableSettingType["CAPTION"] = "CAPTION";
+  TableSettingType["COLUMN"] = "COLUMN";
+  TableSettingType["MERGE_CELLS"] = "MERGE_CELLS";
+  TableSettingType["TABLE_PROPERTIES"] = "TABLE_PROPERTIES";
+  TableSettingType["CELL_PROPERTIES"] = "CELL_PROPERTIES";
+})(TableSettingType || (TableSettingType = {}));
+/**
+ * Abstract class for setting event handlers.
+ */
+export class SettingEventHandler {
+  /**
+   * 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) {
+    const rootContent = this.findRootContent(block);
+    if (focusNode && rootContent) {
+      const offset = focusNode.getRangeEndOffset();
+      rootContent.apply(new UpdateCursorPositionAction(focusNode, offset));
+    }
+  }
+  /**
+   * Walks up the parent chain to locate the nearest VegaRTEContent root.
+   *
+   * @param {RTETableBlock} block - Table block used as the starting point.
+   * @returns {Nullable<VegaRTEContent>} Content root containing the table, if found.
+   */
+  findRootContent(block) {
+    let currentParent = block.parent;
+    while (currentParent) {
+      if (currentParent instanceof VegaRTEContent) {
+        return currentParent;
+      }
+      currentParent = currentParent.parent;
+    }
+  }
+}

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

@@ -0,0 +1,118 @@
+import { VegaRTEExtension } from '../extension.abstract';
+import { RTETableBlock } from './dto/table-block';
+import { RTETableBlockRenderer } from './renderers/table-renderer';
+import { RTETableHeadRenderer } from './renderers/table-head-renderer';
+import { RTETableRowBlockRenderer } from './renderers/table-row-renderer';
+import { RTETableCellRenderer } from './renderers/table-cell-renderer';
+import { RTETableBodyRenderer } from './renderers/table-body-renderer';
+import { RTETableHeadBlock } from './dto/table-head-block';
+import { RTETableRowBlock } from './dto/table-row-block';
+import { RTETableCellBlock } from './dto/table-cell-block';
+import { RTETableBodyBlock } from './dto/table-body-block';
+import { RTETableHeadCellBlock } from './dto/table-head-cell-block';
+import { RTETableHeadCellRenderer } from './renderers/table-head-cell-renderer';
+import { RTETableToolbarButtonRenderer } from './table-toolbar-button-renderer';
+import { InsertTableBlockStrategy } from './action-handler-strategies/insert-table-block-strategy';
+import { VegaRTEContent } from '../../dto/content-state';
+import { INSERT_TABLE_BLOCK } from './actions/insert-table-block-action';
+import { RTETextBlock } from '../../dto/blocks/text-block';
+import { RTEImageBlock } from '../../dto/blocks/image-block';
+import { PreventCellContentDeleteInterceptor } from './action-handler-interceptors/prevent-cell-content-delete-interceptor';
+import { ModifyContentActionType } from '../../dto/actions/modify-content-action.abstract';
+import { DELETE_TABLE_BLOCK } from './actions/delete-table-block-action';
+import { DeleteTableBlockStrategy } from './action-handler-strategies/delete-table-block-strategy';
+import { PreventCellChildrenRemoveInterceptor } from './action-handler-interceptors/prevent-cell-children-remove-interceptor';
+import { INSERT_TABLE_ROW } from './actions/insert-table-row-action';
+import { InsertTableRowStrategy } from './action-handler-strategies/insert-table-row-strategy';
+import { RTETableCaptionBlock } from './dto/table-caption-block';
+import { RTETableCaptionRenderer } from './renderers/table-caption-renderer';
+import { DELETE_TABLE_ROW } from './actions/delete-table-row-action';
+import { DeleteTableRowStrategy } from './action-handler-strategies/delete-table-row-strategy';
+import { RTETableSelection } from './table-selection';
+import { ToggleHeaderRowStrategy } from './action-handler-strategies/toggle-header-row-strategy';
+import { TOGGLE_HEADER_ROW } from './actions/toggle-header-row-action';
+import { INSERT_TABLE_COLUMN } from './actions/insert-table-column-action';
+import { InsertTableColumnStrategy } from './action-handler-strategies/insert-table-column-strategy';
+import { DELETE_TABLE_COLUMN } from './actions/delete-table-column-action';
+import { DeleteTableColumnStrategy } from './action-handler-strategies/delete-table-column-strategy';
+import { TOGGLE_HEADER_TABLE_COLUMN } from './actions/toggle-header-table-column-action';
+import { ToggleHeaderTableColumnStrategy } from './action-handler-strategies/toggle-header-table-column-strategy';
+import { SELECT_TABLE_COLUMN } from './actions/select-table-column-action';
+import { SelectTableColumnStrategy } from './action-handler-strategies/select-table-column-strategy';
+import { PreventRowInsertInterceptor } from './action-handler-interceptors/prevent-row-insert-interceptor';
+/**
+ * Function extension class for Vega Rich Text Editor.
+ */
+export class VegaRTETableExtension extends VegaRTEExtension {
+  constructor() {
+    super();
+    this.toolbarButtonRenderer = new RTETableToolbarButtonRenderer();
+    this.tableBlockRenderer = new RTETableBlockRenderer();
+    this.tableRowBlockRenderer = new RTETableRowBlockRenderer();
+    this.tableCellRenderer = new RTETableCellRenderer();
+    this.tableHeadCellRenderer = new RTETableHeadCellRenderer();
+    this.tableSelection = new RTETableSelection();
+    this.registerToolbarButtonRenderer('table', this.toolbarButtonRenderer);
+    this.registerBlockBasicStrategies(RTETableBlock.name);
+    this.registerBlockBasicStrategies(RTETableHeadBlock.name);
+    this.registerBlockBasicStrategies(RTETableHeadCellBlock.name);
+    this.registerBlockBasicStrategies(RTETableRowBlock.name);
+    this.registerBlockBasicStrategies(RTETableCellBlock.name);
+    this.registerBlockBasicStrategies(RTETableBodyBlock.name);
+    this.registerRenderer('table-block', this.tableBlockRenderer);
+    this.registerRenderer('table-head', new RTETableHeadRenderer());
+    this.registerRenderer('table-head-cell', this.tableHeadCellRenderer);
+    this.registerRenderer('table-row', this.tableRowBlockRenderer);
+    this.registerRenderer('table-cell', this.tableCellRenderer);
+    this.registerRenderer('table-body', new RTETableBodyRenderer());
+    this.registerRenderer('table-caption', new RTETableCaptionRenderer());
+    this.registerNode('table-block', RTETableBlock);
+    this.registerNode('table-head', RTETableHeadBlock);
+    this.registerNode('table-head-cell', RTETableHeadCellBlock);
+    this.registerNode('table-row', RTETableRowBlock);
+    this.registerNode('table-cell', RTETableCellBlock);
+    this.registerNode('table-body', RTETableBodyBlock);
+    this.registerNode('table-caption', RTETableCaptionBlock);
+  }
+  /**
+   * Initializes the extension with the given context
+   *
+   * @param {RTEExtensionContext} context - extension context
+   */
+  initialExtension(context) {
+    super.initialExtension(context);
+    this.tableSelection.init(context);
+    const tableExtensionContext = Object.assign(Object.assign({}, context), { tableSelection: this.tableSelection });
+    this.toolbarButtonRenderer.injectExtensionContext(tableExtensionContext);
+    this.tableBlockRenderer.injectExtensionContext(tableExtensionContext);
+    this.tableCellRenderer.injectExtensionContext(tableExtensionContext);
+    this.tableHeadCellRenderer.injectExtensionContext(tableExtensionContext);
+  }
+  /**
+   * @inheritDoc
+   */
+  destroyExtension() {
+    this.tableSelection.destroy();
+  }
+}
+(() => {
+  const insertTableBlockStrategy = new InsertTableBlockStrategy();
+  const deleteTableBlockStrategy = new DeleteTableBlockStrategy();
+  VegaRTEExtension.registerActionHandleStrategy(VegaRTEContent.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(VegaRTEContent.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETableCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETableHeadCellBlock.name, DELETE_TABLE_BLOCK, deleteTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETextBlock.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTEImageBlock.name, INSERT_TABLE_BLOCK, insertTableBlockStrategy);
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, INSERT_TABLE_ROW, new InsertTableRowStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, DELETE_TABLE_ROW, new DeleteTableRowStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, TOGGLE_HEADER_ROW, new ToggleHeaderRowStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, INSERT_TABLE_COLUMN, new InsertTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, DELETE_TABLE_COLUMN, new DeleteTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, TOGGLE_HEADER_TABLE_COLUMN, new ToggleHeaderTableColumnStrategy());
+  VegaRTEExtension.registerActionHandleStrategy(RTETableBlock.name, SELECT_TABLE_COLUMN, new SelectTableColumnStrategy());
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETextBlock.name, ModifyContentActionType.DELETE_BLOCK_CONTENT, new PreventCellContentDeleteInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETableRowBlock.name, ModifyContentActionType.INSERT_CHILDREN_BEFORE, new PreventRowInsertInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETableCellBlock.name, ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
+  VegaRTEExtension.registerActionHandlerInterceptor(RTETableHeadCellBlock.name, ModifyContentActionType.DELETE_CHILDREN, new PreventCellChildrenRemoveInterceptor());
+})();

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

@@ -0,0 +1,3 @@
+export default {
+  icon: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor" d="M48 264V160H232V264H48zm0 48H232V432H64c-8.8 0-16-7.2-16-16V312zM280 432V312H464V416c0 8.8-7.2 16-16 16H280zM464 264H280V160H464V264zM64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64z"/></svg>`,
+};

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

@@ -0,0 +1,348 @@
+import { RTETableCellBlock } from './dto/table-cell-block';
+import { RTENode } from '../../dto/nodes/node.abstract';
+import stateEntityRenderingRegistry from '../../slimmers/controllers/state-entity-rendering-registry';
+import { debounce } from '../../../../utils/timer';
+import { tryGetDocument } from '../../../../utils/try-get-document';
+import { findParent } from '../../../../utils/ui';
+import { RTETableBlockRenderer } from './renderers/table-renderer';
+import { getParentBlockByType } from './utils/utils';
+import { isNonNullable } from '../../../../types/type-guard';
+/**
+ * Table selection helper used for mouse drag selection of cells.
+ */
+export class RTETableSelection {
+  constructor() {
+    /**
+     *  Indicates whether the user is currently performing a drag selection.
+     */
+    this.dragging = false;
+    /**
+     * Anchor cell where the drag selection started.
+     */
+    this.anchorCell = null;
+    /**
+     * Collection of currently selected cells.
+     */
+    this.selectedCells = new Set();
+    this.syncRTESelectionWithDebounce = debounce(this.syncRTESelection, 100, this);
+    this.handleSelectionChangeWithDebounce = debounce(this.handleSelectionChange, 10, this);
+    /**
+     * Recursively filter and collect selected table cell blocks within the given node.
+     *
+     * @param {Range} range - The current selection range.
+     * @param {Node} node - The current node to check for selection.
+     * @returns {RTETableCellBlock[]} A list of selected table cell blocks.
+     */
+    this.filterSelectedCell = (range, node) => {
+      const selectedCells = new Set();
+      if (range.intersectsNode(node)) {
+        if (node.nodeType === Node.TEXT_NODE) {
+          const focusedNodeDto = stateEntityRenderingRegistry.getEntityByDOM(node.parentElement);
+          if (focusedNodeDto) {
+            const cell = getParentBlockByType(focusedNodeDto.parent, RTETableCellBlock);
+            if (cell) {
+              selectedCells.add(cell);
+              return Array.from(selectedCells);
+            }
+          }
+        }
+        node.childNodes.forEach((child) => this.filterSelectedCell(range, child).forEach((cell) => {
+          selectedCells.add(cell);
+        }));
+      }
+      return Array.from(selectedCells);
+    };
+    /**
+     * Update the styles of the selected cells.
+     *
+     * @param {RTETableCellBlock} cell - The cell to update style for.
+     * @param {number} total - The total number of selected cells.
+     */
+    this.updateSelectedStyles = (cell, total) => {
+      const selectedClass = total === 1 ? 'v-rte-table-cell-focused' : 'v-rte-table-cell-selected';
+      const cellRef = stateEntityRenderingRegistry.getDOMByEntity(cell);
+      if (cellRef) {
+        cellRef.classList.add(selectedClass);
+      }
+    };
+    /**
+     * Handles the document mouse up event to finish drag selection.
+     */
+    this.handleDocMouseUp = () => {
+      this.endDrag();
+      const safeDocument = tryGetDocument();
+      if (safeDocument) {
+        safeDocument.removeEventListener('mouseup', this.handleDocMouseUp);
+      }
+    };
+    /**
+     * Resets the table selection when clicking outside the table.
+     */
+    this.handleContentClick = () => {
+      this.clearSelection();
+      const editorContent = 
+      // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+      this.context.host.shadowRoot.querySelector('.rich-text-editor-container');
+      if (editorContent) {
+        editorContent.removeEventListener('mousedown', this.handleContentClick, true);
+      }
+    };
+  }
+  /**
+   * Compute all cells inside the rectangle defined by the start and end cells.
+   *
+   * Note: this only performs the calculation and does not modify the internal `selectedCells` set,
+   * so callers can decide how to apply the result.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} anchor - Drag start cell (anchor cell).
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} focus - Current drag focus cell.
+   * @returns {(RTETableCellBlock | RTETableHeadCellBlock)[]} All cells in the rectangular selection area.
+   */
+  static computeRectRange(anchor, focus) {
+    // Collect all row blocks (from both head and body) under the same table,
+    // then compute the rectangle over this flattened row list.
+    const anchorRow = anchor.parent;
+    const focusRow = focus.parent;
+    const anchorSection = anchorRow.parent;
+    const focusSection = focusRow.parent;
+    const anchorTable = anchorSection.parent;
+    const focusTable = focusSection.parent;
+    // If they are not in the same table at all, just return empty.
+    if (anchorTable !== focusTable) {
+      return [];
+    }
+    // Flatten head rows (if any) + body rows into a single ordered list.
+    const allRows = [];
+    const tableChildren = anchorTable.children;
+    tableChildren.forEach((section) => {
+      section.children.forEach((row) => allRows.push(row));
+    });
+    const anchorRowIndex = allRows.indexOf(anchorRow);
+    const focusRowIndex = allRows.indexOf(focusRow);
+    const startRow = Math.min(anchorRowIndex, focusRowIndex);
+    const endRow = Math.max(anchorRowIndex, focusRowIndex);
+    const anchorColIndex = anchorRow.children.indexOf(anchor);
+    const focusColIndex = focusRow.children.indexOf(focus);
+    const startCol = Math.min(anchorColIndex, focusColIndex);
+    const endCol = Math.max(anchorColIndex, focusColIndex);
+    const result = [];
+    for (let r = startRow; r <= endRow; r++) {
+      const row = allRows[r];
+      for (let c = startCol; c <= endCol; c++) {
+        const cell = row.children[c];
+        if (cell) {
+          result.push(cell);
+        }
+      }
+    }
+    return result;
+  }
+  /**
+   * Clean up event listeners.
+   */
+  destroy() {
+    this.removeSelectionChangeListener();
+  }
+  /**
+   * Inject the extension context and set up selection change listener.
+   *
+   * @param {RTEExtensionContext} context - The extension context.
+   */
+  init(context) {
+    this.context = context;
+    this.addSelectionChangeListener();
+  }
+  /**
+   * Set the selected cells to the given list, replacing any existing selection.
+   *
+   * @param {RTETableCellBlock} cells - The cells to select.
+   */
+  setSelectedCells(cells) {
+    this.updateSelectedCells(cells);
+  }
+  /**
+   * Get all currently selected cells.
+   *
+   * @returns {(RTETableCellBlock | RTETableHeadCellBlock)[]} A flat list of selected cells.
+   */
+  getSelectedCells() {
+    return Array.from(this.selectedCells);
+  }
+  /**
+   * Handle mouse down on a cell: start drag selection from the given cell.
+   *
+   * @param {HTMLElement} cellRef - The cell where the drag starts.
+   */
+  focusCell(cellRef) {
+    const cellBlock = stateEntityRenderingRegistry.getEntityByDOM(cellRef);
+    if (cellBlock) {
+      this.anchorCell = cellBlock;
+      this.setSelectedCells([cellBlock]);
+      this.addListeners();
+    }
+  }
+  /**
+   * Handle drag over a cell (typically called on `mouseenter` while dragging).
+   * Maintains a rectangular selection between the anchor cell and the current cell.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} cell - The cell currently under the drag.
+   */
+  dragOver(cell) {
+    if (!this.anchorCell) {
+      return;
+    }
+    // Always compute the rectangle strictly from the original anchorCell
+    // (the cell where startDrag was first called) to the current cell.
+    const rectCells = RTETableSelection.computeRectRange(this.anchorCell, cell);
+    if (rectCells.length > 1) {
+      this.startDrag();
+    }
+    if (this.dragging) {
+      this.preventTextSelection(rectCells);
+      this.updateSelectedCells(rectCells, { debounceSync: true });
+    }
+  }
+  /**
+   * Handle mouse up: stop drag selection.
+   */
+  endDrag() {
+    this.dragging = false;
+    // Reset anchor after drag ends so the next drag can start from a new cell.
+    this.anchorCell = null;
+  }
+  /**
+   * Clear the current selection state without changing the drag flag.
+   */
+  clearSelection() {
+    this.selectedCells.forEach((cell) => {
+      const cellRef = stateEntityRenderingRegistry.getDOMByEntity(cell);
+      if (cellRef) {
+        cellRef.classList.remove('v-rte-table-cell-selected', 'v-rte-table-cell-focused');
+      }
+    });
+    this.selectedCells.clear();
+  }
+  /**
+   * Add a selectionchange listener to the document to handle cell click selection.
+   */
+  addSelectionChangeListener() {
+    const safeDocument = tryGetDocument();
+    if (safeDocument) {
+      safeDocument.addEventListener('selectionchange', this.handleSelectionChangeWithDebounce);
+    }
+  }
+  /**
+   * Remove the selectionchange listener from the document.
+   */
+  removeSelectionChangeListener() {
+    const safeDocument = tryGetDocument();
+    if (safeDocument) {
+      safeDocument.removeEventListener('selectionchange', this.handleSelectionChangeWithDebounce);
+    }
+  }
+  /**
+   * Handle selection change events from the document for the cell click selection.
+   */
+  handleSelectionChange() {
+    if (this.dragging) {
+      this.syncRTESelectionWithDebounce();
+      return;
+    }
+    const selection = this.context.getSelection();
+    if (selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const commonAncestorContainer = range.commonAncestorContainer;
+      const rangeInTable = !!findParent(commonAncestorContainer, `table.${RTETableBlockRenderer.EXTENSION_TABLE_CLASS}`);
+      if (rangeInTable) {
+        const selectedCells = this.filterSelectedCell(range, commonAncestorContainer);
+        this.setSelectedCells(selectedCells);
+      }
+    }
+  }
+  /**
+   * Mark the beginning of a drag operation.
+   */
+  startDrag() {
+    this.dragging = true;
+  }
+  /**
+   * Add the given cells to the current selection set.
+   *
+   * @param {RTETableCellBlock[]} cells - The cells to add to the selection.
+   * @param {{ debounceSync?: boolean }} [options] - Options for updating selection.
+   * @param {boolean} [options.debounceSync] - Whether to debounce the RTE selection sync.
+   */
+  updateSelectedCells(cells, { debounceSync } = {}) {
+    this.clearSelection();
+    cells.forEach((cell) => {
+      this.selectedCells.add(cell);
+      this.updateSelectedStyles(cell, cells.length);
+    });
+    if (debounceSync) {
+      this.syncRTESelectionWithDebounce();
+    }
+    else {
+      this.syncRTESelection();
+    }
+  }
+  /**
+   * Synchronizes the rich text editor selection with the selected table cells.
+   */
+  syncRTESelection() {
+    const cells = Array.from(this.selectedCells);
+    const nodes = cells
+      .flatMap((cell) => {
+      return cell.children.flatMap((block) => {
+        return block.children.flatMap((node) => {
+          // TODO: Nested table deletion will track in https://gethired.atlassian.net/browse/VD-7860
+          if (node instanceof RTENode) {
+            return node;
+          }
+        });
+      });
+    })
+      .filter(isNonNullable);
+    if (cells.length > 1) {
+      this.context.setSelectedNodes(nodes, {
+        startNode: nodes[0],
+        endNode: nodes[nodes.length - 1],
+        startOffset: 0,
+        endOffset: nodes[nodes.length - 1].getRangeEndOffset(),
+      });
+    }
+  }
+  /**
+   * Prevents text selection during drag operations.
+   *
+   * @param {RTETableCellBlock[]} selectedCells - The currently selected table cells.
+   */
+  preventTextSelection(selectedCells) {
+    const selection = this.context.getSelection();
+    selection.removeAllRanges();
+    if (selectedCells.length > 0) {
+      const startContainer = stateEntityRenderingRegistry.getDOMByEntity(selectedCells[0]);
+      if (startContainer) {
+        const newRange = new Range();
+        newRange.setStart(startContainer, 0);
+        newRange.setEnd(startContainer, 0);
+        selection.addRange(newRange);
+      }
+    }
+  }
+  /**
+   * Adds a mouse up listener to the document to finish drag selection.
+   *
+   */
+  addListeners() {
+    const safeDocument = tryGetDocument();
+    if (safeDocument) {
+      safeDocument.addEventListener('mouseup', this.handleDocMouseUp);
+    }
+    const editorContent = 
+    // eslint-disable-next-line  @typescript-eslint/no-non-null-assertion
+    this.context.host.shadowRoot.querySelector('.rich-text-editor-container');
+    if (editorContent) {
+      editorContent.addEventListener('mousedown', this.handleContentClick, true);
+    }
+  }
+}