@heartlandone/vega 2.78.0 → 2.79.0

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/delete-table-row-strategy.js

@@ -0,0 +1,154 @@
+import { RemoveChildrenAction } from '../../../dto/actions/remove-child-action';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { RTETableBodyBlock } from '../dto/table-body-block';
+import { RTETableHeadBlock } from '../dto/table-head-block';
+import { TableRowCommonUtilitiesStrategy } from './table-row-strategy.abstract';
+/**
+ * Strategy class for handling the deletion of table rows.
+ */
+export class DeleteTableRowStrategy extends TableRowCommonUtilitiesStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { rowsToBeRemoved } = action;
+    const futureFocusRow = this.getFutureFocusRow(rowsToBeRemoved[0], rowsToBeRemoved[rowsToBeRemoved.length - 1], target);
+    const rowsBySection = this.splitRowsBySection(rowsToBeRemoved);
+    this.removeRows(rowsBySection[0]);
+    this.removeRows(rowsBySection[1]);
+    if (futureFocusRow) {
+      const root = this.getRootContent(target);
+      if (root) {
+        const focusNode = futureFocusRow.getLastNode();
+        root.apply(new UpdateCursorPositionAction(focusNode, focusNode.getRangeEndOffset()));
+      }
+    }
+  }
+  /**
+   * Removes the specified rows from their parent table section.
+   * Handles rowspan adjustments when deleting rows that contain or are part of merged cells.
+   *
+   * Scenarios handled:
+   * 1. If all rows in a section are being removed, the entire section is removed.
+   * 2. If a cell with rowspan > 1 starts before the deleted rows and spans into them,
+   *    the rowspan is adjusted to exclude the deleted rows.
+   * 3. If a cell with rowspan > 1 starts in the first deleted row and spans beyond,
+   *    the cell is moved to the next remaining row with adjusted rowspan.
+   * 4. If a cell with rowspan is entirely within the deleted rows, it's removed with the rows.
+   *
+   * @param {RTETableRowBlock[]} rowsToBeRemoved - The rows to be removed.
+   */
+  removeRows(rowsToBeRemoved) {
+    if (rowsToBeRemoved.length === 0)
+      return;
+    const parentSection = rowsToBeRemoved[0].parent;
+    const allRows = parentSection.children;
+    const removalIndices = this.buildSelectedIndices(rowsToBeRemoved, allRows);
+    if (removalIndices.size > 0) {
+      // If removing all rows from the section, remove the entire section
+      if (allRows.length === rowsToBeRemoved.length) {
+        parentSection.parent.apply(new RemoveChildrenAction(parentSection));
+        return;
+      }
+      const firstRemovalIndex = Math.min(...removalIndices);
+      const lastRemovalIndex = Math.max(...removalIndices);
+      // Handle rowspan adjustments and cell movements
+      const rowCellStartCols = this.getRowCellStartCols(allRows);
+      const cellsToMove = this.collectCellsToMove(allRows, rowCellStartCols, removalIndices, firstRemovalIndex, lastRemovalIndex);
+      this.insertMovedCells(cellsToMove, allRows, rowCellStartCols);
+      // Finally, remove the rows
+      rowsToBeRemoved.forEach((row) => {
+        row.parent.apply(new RemoveChildrenAction(row));
+      });
+    }
+  }
+  /**
+   * Collect cells that need to be moved to the next remaining row.
+   *
+   * @param {RTETableRowBlock[]} allRows - All rows in the section.
+   * @param {number[][]} rowCellStartCols - Logical start columns per row.
+   * @param {Set<number>} removalIndices - Indices of rows to remove.
+   * @param {number} firstRemovalIndex - First row index to remove.
+   * @param {number} lastRemovalIndex - Last row index to remove.
+   * @returns {Map<number, CellToMove[]>} Map of target row index to cells to move.
+   */
+  collectCellsToMove(allRows, rowCellStartCols, removalIndices, firstRemovalIndex, lastRemovalIndex) {
+    const cellsToMove = new Map();
+    const rowCount = allRows.length;
+    for (let rowIndex = 0; rowIndex < rowCount; rowIndex++) {
+      const row = allRows[rowIndex];
+      const cellCount = row.children.length;
+      for (let cellIndex = 0; cellIndex < cellCount; cellIndex++) {
+        const cell = row.children[cellIndex];
+        const cellRowSpan = cell.rowSpan;
+        // Skip cells without rowspan
+        if (cellRowSpan <= TableRowCommonUtilitiesStrategy.DEFAULT_CELLSPAN)
+          continue;
+        const cellEndIndex = rowIndex + cellRowSpan - 1;
+        // If the cell's row span does not intersect with the removal range, skip it
+        if (!this.intersectsRemovalRange(rowIndex, cellEndIndex, firstRemovalIndex, lastRemovalIndex)) {
+          continue;
+        }
+        const removedRowsCount = this.countRemovedRows(rowIndex, cellEndIndex, removalIndices);
+        const newRowSpan = cellRowSpan - removedRowsCount;
+        // Scenario 1: Cell starts before deletion range and spans into it, we just need to update the rowspan
+        if (rowIndex < firstRemovalIndex && cellEndIndex >= firstRemovalIndex) {
+          this.updateCellSpan(cell, 'rowspan', newRowSpan);
+          continue;
+        }
+        // Scenario 2: Cell starts in deleted row and spans beyond, we need to move it to the next remaining row and update rowspan
+        if (rowIndex >= firstRemovalIndex && cellEndIndex > lastRemovalIndex) {
+          const targetRowIndex = lastRemovalIndex + 1;
+          if (targetRowIndex < rowCount && !removalIndices.has(targetRowIndex)) {
+            const logicalStartCol = rowCellStartCols[rowIndex][cellIndex];
+            if (!cellsToMove.has(targetRowIndex)) {
+              cellsToMove.set(targetRowIndex, []);
+            }
+            cellsToMove.get(targetRowIndex).push({
+              cell: this.cloneCellWithRowSpan(cell, newRowSpan),
+              newRowSpan,
+              cellIndex,
+              logicalStartCol,
+            });
+          }
+        }
+      }
+    }
+    return cellsToMove;
+  }
+  /**
+   * Clones a table cell with a new rowspan value.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} cell - The cell to clone.
+   * @param {number} newRowSpan - The new rowspan value for the cloned cell.
+   * @returns {RTETableCellBlock | RTETableHeadCellBlock} The cloned cell with updated rowspan.
+   */
+  cloneCellWithRowSpan(cell, newRowSpan) {
+    // Clone the cell (parent will be updated when inserted)
+    const clonedCell = cell.clone(cell.parent);
+    // Update the rowspan of the cloned cell
+    this.updateCellSpan(clonedCell, 'rowspan', newRowSpan);
+    return clonedCell;
+  }
+  /**
+   * Get the future focus row after deletion.
+   *
+   * @param {RTETableRowBlock} startRow - The first row to be deleted.
+   * @param {RTETableRowBlock} endRow - The last row to be deleted.
+   * @param {RTETableBlock} table - The table containing the rows.
+   * @returns {Nullable<RTETableRowBlock>} The row to be focused after deletion.
+   */
+  getFutureFocusRow(startRow, endRow, table) {
+    const allRows = table.children
+      .filter((item) => item instanceof RTETableHeadBlock || item instanceof RTETableBodyBlock)
+      .flatMap((block) => block.children);
+    const startIndex = allRows.indexOf(startRow);
+    const endIndex = allRows.indexOf(endRow);
+    if (allRows[startIndex - 1]) {
+      return allRows[startIndex - 1];
+    }
+    else if (allRows[endIndex + 1]) {
+      return allRows[endIndex + 1];
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/insert-table-block-strategy.js

@@ -0,0 +1,54 @@
+import { AppendChildrenAction } from '../../../dto/actions/append-child-nodes-action';
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { generateUUID } from '../../../../../utils/misc';
+import { VegaRTEContent } from '../../../dto/content-state';
+import { RTETableBlock } from '../dto/table-block';
+import { generateTableBody } from '../utils/utils';
+/**
+ * Strategy to handle the insertion of a block into the rich text editor.
+ */
+export class InsertTableBlockStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const tableBlock = this.createTableBlock(action.rowCount, action.columnCount);
+    const emptyParagraph = super.createNewParagraph('');
+    const referenceBlock = this.getReferenceBlock(target);
+    if (referenceBlock) {
+      referenceBlock.parent.apply(new InsertChildrenAfterAction(referenceBlock, tableBlock, emptyParagraph));
+    }
+    else {
+      target.apply(new AppendChildrenAction([tableBlock, emptyParagraph]));
+    }
+    action.nextFocusNode = tableBlock.getFirstNode();
+  }
+  /**
+   * Create a table block with the specified number of rows and columns.
+   *
+   * @param {number} row - The number of rows in the table.
+   * @param {number} column - The number of columns in the table.
+   * @returns {RTETableBlock} The created table block.
+   */
+  createTableBlock(row, column) {
+    const normalizedRowCount = Math.max(row, 1);
+    const normalizedColumnCount = Math.max(column, 1);
+    return RTETableBlock.from({
+      id: generateUUID(),
+      type: 'table-block',
+      children: [generateTableBody(normalizedRowCount, normalizedColumnCount)],
+    });
+  }
+  /**
+   * We need to get the correct block if the current target is a block element to avoid nesting blocks.
+   *
+   * @param {RTEBlock} currentTarget - The current target block or content.
+   * @returns {Nullable<RTEBlock>} The reference block.
+   */
+  getReferenceBlock(currentTarget) {
+    if (!(currentTarget instanceof VegaRTEContent)) {
+      return currentTarget;
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/insert-table-column-strategy.js

@@ -0,0 +1,163 @@
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { RTETableCellBlock } from '../dto/table-cell-block';
+import { InsertTableColumnDirection } from '../actions/insert-table-column-action';
+import { InsertChildrenBeforeAction } from '../../../dto/actions/insert-children-before-block';
+import { getAllTableRows, getDefaultCellBlockTemplate, buildTableGrid, findCellBlockById, setSpanAttributes, } from '../utils/utils';
+import { RTETableHeadCellBlock } from '../dto/table-head-cell-block';
+import { TableColumnStrategy } from './table-column-strategy.abstract';
+/**
+ * Strategy to handle the insertion of a table column into the RTETable.
+ */
+export class InsertTableColumnStrategy extends TableColumnStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { insertDirection, tableCellInsertRange } = action;
+    const selectedCellIds = new Set(tableCellInsertRange.map((cell) => cell.id));
+    const allTableRows = getAllTableRows(target);
+    const tableGrid = buildTableGrid(allTableRows);
+    const [startCellCol, endCellCol] = this.getBoundaryCellColumnRange(tableCellInsertRange, allTableRows, tableGrid);
+    const targetLogicalCol = insertDirection === InsertTableColumnDirection.LEFT ? startCellCol : endCellCol + 1;
+    const hasSelectedCellInsideTargetCol = this.hasSelectedCellInsideTargetColumn(allTableRows, tableGrid, targetLogicalCol, selectedCellIds);
+    const skipInsertRowIndices = new Set();
+    allTableRows.forEach((row, rowIndex) => {
+      if (skipInsertRowIndices.has(rowIndex)) {
+        return;
+      }
+      const expandableCell = this.findExpandableCell(row, rowIndex, targetLogicalCol, tableGrid, insertDirection, selectedCellIds, hasSelectedCellInsideTargetCol);
+      if (expandableCell) {
+        const originalRowSpan = expandableCell.rowSpan;
+        setSpanAttributes(expandableCell, expandableCell.colSpan + 1, expandableCell.rowSpan, target, true);
+        if (originalRowSpan > 1) {
+          for (let offset = 1; offset < originalRowSpan; offset++) {
+            skipInsertRowIndices.add(rowIndex + offset);
+          }
+        }
+        return;
+      }
+      const insertPosition = this.findInsertPosition(row, rowIndex, targetLogicalCol, tableGrid, allTableRows);
+      if (insertPosition) {
+        const newCell = this.generateTableCell(insertPosition.templateCell);
+        if (insertPosition.before) {
+          row.apply(new InsertChildrenBeforeAction(insertPosition.anchorCell, newCell));
+        }
+        else {
+          row.apply(new InsertChildrenAfterAction(insertPosition.anchorCell, newCell));
+        }
+      }
+    });
+  }
+  /**
+   * Find a spanning cell that should absorb the inserted logical column by increasing colspan.
+   *
+   * @param {RTETableRowBlock} row - The row to check.
+   * @param {number} rowIndex - The row index in the grid.
+   * @param {number} targetCol - The target logical column.
+   * @param {string[][]} tableGrid - The table grid.
+   * @param {InsertTableColumnDirection} insertDirection - Insert direction.
+   * @param {Set<string>} selectedCellIds - The set of selected cell IDs.
+   * @param {boolean} hasSelectedCellInsideTargetCol - Whether any selected merged cell covers the target column internally.
+   * @returns {Nullable<RTETableCellBlock | RTETableHeadCellBlock>} Expandable cell or null.
+   */
+  findExpandableCell(row, rowIndex, targetCol, tableGrid, insertDirection, selectedCellIds, hasSelectedCellInsideTargetCol) {
+    const gridRow = tableGrid[rowIndex];
+    const selectedCellCountInRow = row.children.reduce((count, cell) => count + (selectedCellIds.has(cell.id) ? 1 : 0), 0);
+    for (const cell of row.children) {
+      const cellStartCol = gridRow.indexOf(cell.id);
+      const cellEndColExclusive = cellStartCol + cell.colSpan;
+      const isRightBoundaryOfCell = targetCol === cellEndColExclusive;
+      const spansToSectionEnd = rowIndex + cell.rowSpan >= tableGrid.length;
+      const isSelectedCell = selectedCellIds.has(cell.id);
+      const isInsideCell = targetCol > cellStartCol && targetCol < cellEndColExclusive;
+      const shouldExpand = insertDirection === InsertTableColumnDirection.LEFT
+        ? isInsideCell
+        : (isInsideCell && !(isSelectedCell && spansToSectionEnd)) ||
+          (isRightBoundaryOfCell &&
+            cell.colSpan > 1 &&
+            isSelectedCell &&
+            !spansToSectionEnd &&
+            selectedCellCountInRow === 1 &&
+            !hasSelectedCellInsideTargetCol);
+      if (shouldExpand) {
+        return cell;
+      }
+    }
+    return null;
+  }
+  /**
+   * Check whether any selected merged cell covers the target column internally.
+   *
+   * @param {RTETableRowBlock[]} allRows - All table rows.
+   * @param {string[][]} tableGrid - The 2D grid representation of the table.
+   * @param {number} targetCol - The target logical column.
+   * @param {Set<string>} selectedCellIds - The set of selected cell IDs.
+   * @returns {boolean} True if any selected cell internally covers the target column.
+   */
+  hasSelectedCellInsideTargetColumn(allRows, tableGrid, targetCol, selectedCellIds) {
+    for (let rowIndex = 0; rowIndex < allRows.length; rowIndex++) {
+      const row = allRows[rowIndex];
+      const gridRow = tableGrid[rowIndex];
+      for (const cell of row.children) {
+        if (!selectedCellIds.has(cell.id)) {
+          continue;
+        }
+        const cellStartCol = gridRow.indexOf(cell.id);
+        const cellEndColExclusive = cellStartCol + cell.colSpan;
+        if (targetCol > cellStartCol && targetCol < cellEndColExclusive) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  /**
+   * Find the correct cell and position to insert a new cell in a row.
+   *
+   * @param {RTETableRowBlock} row - The row to insert into.
+   * @param {number} rowIndex - The index of the row.
+   * @param {number} targetCol - The target logical column position.
+   * @param {string[][]} tableGrid - The 2D grid representation of the table.
+   * @param {RTETableRowBlock[]} allRows - All table rows.
+   * @returns {InsertPosition | null} The insert position or null.
+   */
+  findInsertPosition(row, rowIndex, targetCol, tableGrid, allRows) {
+    const gridRow = tableGrid[rowIndex];
+    let gridCell = row.children[0];
+    if (targetCol >= 0 && targetCol < gridRow.length) {
+      const cellId = gridRow[targetCol];
+      const foundCell = findCellBlockById(allRows, cellId);
+      if (foundCell) {
+        gridCell = foundCell;
+      }
+    }
+    let currentCol = 0;
+    for (let i = 0; i < row.children.length; i++) {
+      const cell = row.children[i];
+      while (currentCol < gridRow.length && gridRow[currentCol] !== cell.id) {
+        currentCol++;
+      }
+      if (currentCol >= targetCol) {
+        return { anchorCell: cell, templateCell: gridCell, before: true };
+      }
+      const cellEndCol = currentCol + cell.colSpan;
+      if (cellEndCol > targetCol || i === row.children.length - 1) {
+        return { anchorCell: cell, templateCell: gridCell, before: false };
+      }
+      currentCol = cellEndCol;
+    }
+    return null;
+  }
+  /**
+   * Generate a new table cell based on the original cell type.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} originalCell The original table cell block to base the new cell on.
+   * @returns {RTETableCellBlock | RTETableHeadCellBlock} The newly generated table cell block.
+   */
+  generateTableCell(originalCell) {
+    if (originalCell instanceof RTETableHeadCellBlock) {
+      return RTETableHeadCellBlock.from(getDefaultCellBlockTemplate(originalCell.type));
+    }
+    return RTETableCellBlock.from(getDefaultCellBlockTemplate(originalCell.type));
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/insert-table-row-into-different-section-strategy.js

@@ -0,0 +1,83 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { AppendChildrenAction } from '../../../dto/actions/append-child-nodes-action';
+import { InsertChildrenBeforeAction } from '../../../dto/actions/insert-children-before-block';
+import { RTETableBodyBlock } from '../dto/table-body-block';
+import { RTETableRowBlock } from '../dto/table-row-block';
+import { TableRowCommonUtilitiesStrategy } from './table-row-strategy.abstract';
+/**
+ * Strategy class for handling the insertion of a new row into a table.
+ * The reference row is head row and the insert direction is below, so the new row will be inserted into the body section.
+ */
+export class InsertTableRowIntoDifferentSectionStrategy extends TableRowCommonUtilitiesStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, target) {
+    const { selectedRows } = action;
+    const refBlock = selectedRows[selectedRows.length - 1];
+    let tableBody = target.children.find((block) => block instanceof RTETableBodyBlock);
+    const rowBlockJSON = {
+      id: generateUUID(),
+      type: 'table-row',
+      children: [],
+    };
+    let headCellLength = 0;
+    let firstBodyRow = null;
+    if (!tableBody) {
+      tableBody = RTETableBodyBlock.from({
+        id: generateUUID(),
+        type: 'table-body',
+        children: [],
+      });
+      target.apply(new AppendChildrenAction([tableBody]));
+    }
+    else {
+      firstBodyRow = tableBody.children[0];
+      headCellLength = this.getHeadCellLength(firstBodyRow);
+    }
+    const allHeaderRows = refBlock.parent.children;
+    const rowCellMaxCount = this.getRowsMaxCellCount(allHeaderRows);
+    const refRowCellCount = this.getRowsMaxCellCount([refBlock]);
+    // If the reference row has less cells than the max cell count in the section, we need to add new cell to make it up to the max count.
+    if (refRowCellCount < rowCellMaxCount) {
+      const rowIndex = allHeaderRows.indexOf(refBlock);
+      const rowStartCols = this.getRowCellStartCols(allHeaderRows);
+      const rowCellMap = new Map();
+      for (let i = 0; i < rowCellMaxCount; i++) {
+        const cellType = i < headCellLength ? 'table-head-cell' : 'table-cell';
+        const { cell } = this.getTheStartSpanCell(allHeaderRows, rowStartCols, rowIndex, i);
+        if (cell) {
+          const colSpan = cell.colSpan;
+          rowCellMap.set(i, this.getDefaultCellBlockTemplate(cellType, colSpan));
+          i += colSpan - 1;
+        }
+      }
+      rowBlockJSON.children = this.getSortedValuesByNumericKey(rowCellMap);
+    }
+    else {
+      rowBlockJSON.children = this.createTableCells(refBlock, headCellLength);
+    }
+    const insertAction = firstBodyRow
+      ? new InsertChildrenBeforeAction(firstBodyRow, RTETableRowBlock.from(rowBlockJSON))
+      : new AppendChildrenAction([RTETableRowBlock.from(rowBlockJSON)]);
+    tableBody.apply(insertAction);
+  }
+  /**
+   * Create table cells based on reference row and head cell length.
+   *
+   * @param {RTETableRowBlock} refRow - The reference table row block.
+   * @param {number} headCellLength - The length of the head cells.
+   * @returns {VegaRTETableCellBlock[]} An array of table cell blocks.
+   */
+  createTableCells(refRow, headCellLength) {
+    const cells = [];
+    let currentHeadCellLength = 0;
+    for (const cell of refRow.children) {
+      const isHeadCell = currentHeadCellLength < headCellLength;
+      const cellType = isHeadCell ? 'table-head-cell' : 'table-cell';
+      cells.push(this.getDefaultCellBlockTemplate(cellType, cell.colSpan));
+      currentHeadCellLength += cell.colSpan;
+    }
+    return cells;
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/insert-table-row-into-same-section-strategy.js

@@ -0,0 +1,55 @@
+import { generateUUID } from '../../../../../utils/misc';
+import { InsertChildrenAfterAction } from '../../../dto/actions/insert-children-after-block';
+import { InsertChildrenBeforeAction } from '../../../dto/actions/insert-children-before-block';
+import { InsertTableRowDirection, } from '../actions/insert-table-row-into-same-section-action';
+import { RTETableRowBlock } from '../dto/table-row-block';
+import { TableRowCommonUtilitiesStrategy } from './table-row-strategy.abstract';
+/**
+ * Strategy class for handling the insertion of a new row into a table.
+ * The new row will be inserted in the same section (header or body) as the reference row based on the insert direction and the position of the selected rows.
+ */
+export class InsertTableRowIntoSameSectionStrategy extends TableRowCommonUtilitiesStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action) {
+    const { insertDirection, selectedRows } = action;
+    // The reference block will control where to insert the new row
+    const refBlock = insertDirection === InsertTableRowDirection.ABOVE
+      ? selectedRows[0]
+      : selectedRows[selectedRows.length - 1];
+    const rowBlockJSON = {
+      id: generateUUID(),
+      type: 'table-row',
+      children: [],
+    };
+    const allRows = refBlock.parent.children;
+    const rowCellMaxCount = this.getRowsMaxCellCount(allRows);
+    const currentRowIndex = allRows.indexOf(refBlock);
+    const rowStartCols = this.getRowCellStartCols(allRows);
+    const rowCellMap = new Map();
+    for (let i = 0; i < rowCellMaxCount; i++) {
+      const { cell, rowIndex } = this.getTheStartSpanCell(allRows, rowStartCols, currentRowIndex, i);
+      if (cell) {
+        const { colSpan, rowSpan } = cell;
+        const shouldIncreaseRowSpan = insertDirection === InsertTableRowDirection.ABOVE
+          ? rowIndex !== currentRowIndex
+          : rowIndex + rowSpan > currentRowIndex + 1;
+        // If the new row is inserted in the middle of the row span, we need to increase the row span of the cell; otherwise, we can just add a new cell.
+        if (shouldIncreaseRowSpan) {
+          this.updateCellSpan(cell, 'rowspan', rowSpan + 1);
+          i += colSpan - 1;
+          continue;
+        }
+        rowCellMap.set(i, this.getDefaultCellBlockTemplate(cell.type, colSpan));
+        i += colSpan - 1;
+      }
+    }
+    rowBlockJSON.children = this.getSortedValuesByNumericKey(rowCellMap);
+    const newRow = RTETableRowBlock.from(rowBlockJSON);
+    const insertAction = insertDirection === InsertTableRowDirection.ABOVE
+      ? new InsertChildrenBeforeAction(refBlock, newRow)
+      : new InsertChildrenAfterAction(refBlock, newRow);
+    refBlock.parent.apply(insertAction);
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/merge-cells-strategy.js

@@ -0,0 +1,120 @@
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { RemoveChildrenAction } from '../../../dto/actions/remove-child-action';
+import { getFirstNode, getCellSpan, buildTableGrid, setSpanAttributes } from '../utils/utils';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { MergeCellsOperationType } from '../setting-event-handlers/merge-cells-operation';
+/**
+ * Strategy to handle the merging of table cells.
+ */
+export class MergeCellsStrategy extends ActionHandleStrategy {
+  /**
+   * Handles the merge cells action.
+   *
+   * @param {MergeCellsAction} action - The action containing merge details.
+   * @param {RTETableBlock} target - The target table block.
+   */
+  handleAction(action, target) {
+    const { targetCell, mergeCells, colSpan, rowSpan, direction } = action;
+    this.mergeContentToTargetCell(targetCell, mergeCells);
+    setSpanAttributes(targetCell, colSpan, rowSpan, target);
+    this.deleteOtherSelectedCells(mergeCells, targetCell);
+    if (direction !== MergeCellsOperationType.MERGE_CELL_LEFT &&
+      direction !== MergeCellsOperationType.MERGE_CELL_RIGHT &&
+      rowSpan > 1) {
+      this.clearRowSpanIfUniformAcrossRow(targetCell, target, rowSpan);
+    }
+    const root = this.getRootContent(target);
+    const nextFocusNode = getFirstNode(targetCell);
+    if (root && nextFocusNode) {
+      root.apply(new UpdateCursorPositionAction(nextFocusNode));
+    }
+  }
+  /**
+   * Merge content from all selected cells to the target cell.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} targetCell - The target cell.
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - All selected cells.
+   */
+  mergeContentToTargetCell(targetCell, selectedCells) {
+    const allChildren = selectedCells.flatMap((cell) => cell.children);
+    const valueCells = allChildren.filter((child) => child.isNotEmpty());
+    const allChildrenBlocks = valueCells.length > 0 ? valueCells : [allChildren[0]];
+    targetCell.children = allChildrenBlocks.map((childBlock) => childBlock.clone(targetCell));
+  }
+  /**
+   * Delete all selected cells except the target cell.
+   *
+   * @param {RTETableCellBlock[] | RTETableHeadCellBlock[]} selectedCells - All selected cells.
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} targetCell - The target cell (should not be deleted).
+   */
+  deleteOtherSelectedCells(selectedCells, targetCell) {
+    selectedCells.forEach((cell) => {
+      if (cell !== targetCell) {
+        const row = cell.parent;
+        row.apply(new RemoveChildrenAction(cell));
+      }
+    });
+  }
+  /**
+   * Remove rowSpan from all cells in the target row when every cell shares the same rowSpan.
+   * This avoids keeping stale row spans after a merge operation that no longer spans rows.
+   *
+   * @param {RTETableCellBlock | RTETableHeadCellBlock} targetCell - The target cell to set attributes on.
+   * @param {RTETableBlock} table - The table block.
+   * @param {number} targetCellRowSpan - The target cell rowSpan.
+   */
+  clearRowSpanIfUniformAcrossRow(targetCell, table, targetCellRowSpan) {
+    const targetRow = targetCell.parent;
+    const allRows = targetRow.parent.children;
+    const grid = buildTableGrid(allRows);
+    const rowIndexes = [];
+    for (let r = 0; r < grid.length; r++) {
+      if (grid[r].includes(targetCell.id)) {
+        rowIndexes.push(r);
+      }
+    }
+    if (rowIndexes.length > 1) {
+      const windowStart = rowIndexes[0];
+      const windowEnd = windowStart + targetCellRowSpan - 1;
+      const uniformIds = new Set();
+      let minRowSpan = Number.POSITIVE_INFINITY;
+      for (let c = 0; c < grid[0].length; c++) {
+        let firstId = grid[windowStart][c];
+        let count = 1;
+        let isRowSpan = false;
+        for (let r = windowStart + 1; r <= windowEnd; r++) {
+          if (grid[r][c] === firstId) {
+            count++;
+            continue;
+          }
+          if (count > 1) {
+            isRowSpan = true;
+            minRowSpan = Math.min(minRowSpan, count);
+            uniformIds.add(firstId);
+          }
+          count = 1;
+          firstId = grid[r][c];
+        }
+        if (count < 2 && !isRowSpan) {
+          uniformIds.clear();
+          break;
+        }
+        if (count > 1) {
+          minRowSpan = Math.min(minRowSpan, count);
+          uniformIds.add(firstId);
+        }
+      }
+      if (uniformIds.size > 0) {
+        allRows.forEach((row) => {
+          row.children.forEach((cell) => {
+            if (uniformIds.has(cell.id)) {
+              const { rowSpan, colSpan } = getCellSpan(cell);
+              const reducedRowSpan = rowSpan - minRowSpan + 1;
+              setSpanAttributes(cell, colSpan, reducedRowSpan, table);
+            }
+          });
+        });
+      }
+    }
+  }
+}

package/dist/collection/components/vega-rich-text-editor/extensions/table/action-handler-strategies/replace-table-cell-strategy.js

@@ -0,0 +1,21 @@
+import { ActionHandleStrategy } from '../../../dto/action-handle-strategies/action-handle-strategy.abstract';
+import { InsertChildrenBeforeAction } from '../../../dto/actions/insert-children-before-block';
+import { RemoveChildrenAction } from '../../../dto/actions/remove-child-action';
+import { RTETableCellBlock } from '../dto/table-cell-block';
+import { RTETableHeadCellBlock } from '../dto/table-head-cell-block';
+/**
+ * Strategy to replace a fully overlapped table cell.
+ */
+export class ReplaceTableCellStrategy extends ActionHandleStrategy {
+  /**
+   * @inheritDoc
+   */
+  handleAction(action, row) {
+    const { cell, targetCellType } = action.payload;
+    const newCell = targetCellType === 'table-head-cell'
+      ? RTETableHeadCellBlock.from(cell.toJSON())
+      : RTETableCellBlock.from(cell.toJSON());
+    row.apply(new InsertChildrenBeforeAction(cell, newCell));
+    row.apply(new RemoveChildrenAction(cell));
+  }
+}