@heartlandone/vega 2.77.1 → 2.79.0

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

@@ -0,0 +1,176 @@
+import { RemoveChildrenAction } from '../../../dto/actions/remove-child-action';
+import { getAllTableRows, getFirstNode, buildTableGrid, buildCellStartColumnMap, findCellBlockById, getCellSpan, getTableColumnCount, setSpanAttributes, } from '../utils/utils';
+import { UpdateCursorPositionAction } from '../../../dto/actions/update-cursor-position-action';
+import { TableColumnStrategy } from './table-column-strategy.abstract';
+/**
+ * Strategy to handle the deletion of table column from the parent.
+ */
+export class DeleteTableColumnStrategy extends TableColumnStrategy {
+  /**
+   * Deletes the specified table column and updates the cursor position.
+   *
+   * @param {DeleteTableColumnAction} action - The action containing the table column to delete.
+   * @param {RTETableBlock} target - The target table block from which the column will be deleted.
+   */
+  handleAction(action, target) {
+    const allTableRows = getAllTableRows(target);
+    const tableGrid = buildTableGrid(allTableRows);
+    const [startCellCol, endCellCol] = this.getBoundaryCellColumnRange(action.tableCellDeleteRange, allTableRows, tableGrid);
+    const anchorCell = action.tableCellDeleteRange[action.tableCellDeleteRange.length - 1];
+    const anchorRow = anchorCell.parent;
+    const anchorRowIndex = Math.max(allTableRows.indexOf(anchorRow), 0);
+    const { coveredCellIds, coveredCells, adjustmentCellInfo } = this.getDeleteCellsInfo(allTableRows, startCellCol, endCellCol, tableGrid);
+    const nextFocusableCell = this.findNextFocusableCell(allTableRows, tableGrid, startCellCol, endCellCol, coveredCellIds, anchorRowIndex);
+    this.deleteCells(coveredCells, adjustmentCellInfo, target);
+    const root = this.getRootContent(target);
+    const nextFocusNode = getFirstNode(nextFocusableCell);
+    if (root && nextFocusNode) {
+      root.apply(new UpdateCursorPositionAction(nextFocusNode));
+    }
+  }
+  /**
+   * Analyze overlap between each cell and the delete range in a single pass.
+   * Returns fully covered cells (to delete) and partially covered cells (to adjust).
+   *
+   * @param {RTETableRowBlock[]} allRows - All rows in the table.
+   * @param {number} startCol - Start logical column to delete (inclusive).
+   * @param {number} endCol - End logical column to delete (inclusive).
+   * @param {string[][]} tableGrid - The 2D grid representation of the table.
+   * @returns {DeleteCellInfo} Overlap analysis for deletion and span adjustments.
+   */
+  getDeleteCellsInfo(allRows, startCol, endCol, tableGrid) {
+    const coveredCells = [];
+    const coveredCellIds = new Set();
+    const adjustmentCellInfo = [];
+    const cellStartColMap = buildCellStartColumnMap(tableGrid);
+    allRows.forEach((row) => {
+      row.children.forEach((cell) => {
+        const cellStartCol = cellStartColMap.get(cell.id);
+        if (cellStartCol === undefined) {
+          return;
+        }
+        const { colSpan, rowSpan } = getCellSpan(cell);
+        const overlap = this.getColumnOverlapCount(cellStartCol, colSpan, startCol, endCol);
+        if (overlap <= 0) {
+          return;
+        }
+        if (overlap === colSpan) {
+          coveredCells.push(cell);
+          coveredCellIds.add(cell.id);
+          return;
+        }
+        const nextColSpan = Math.max(1, colSpan - overlap);
+        adjustmentCellInfo.push({ cell, nextColSpan, rowSpan });
+      });
+    });
+    return { coveredCells, coveredCellIds, adjustmentCellInfo };
+  }
+  /**
+   * Find the next focusable cell based on logical column position.
+   *
+   * @param {RTETableRowBlock[]} allTableRows - All table rows.
+   * @param {string[][]} tableGrid - The 2D grid representation.
+   * @param {number} startLogicalCol - Start of delete range.
+   * @param {number} endLogicalCol - End of delete range.
+   * @param {Set<string>} cellIdsToDelete - delete cell ids
+   * @param {number} anchorRowIndex - the anchor row index
+   * @returns {Nullable<RTETableCellBlock | RTETableHeadCellBlock>} The next focusable cell.
+   */
+  findNextFocusableCell(allTableRows, tableGrid, startLogicalCol, endLogicalCol, cellIdsToDelete, anchorRowIndex) {
+    for (let offset = 0; offset < allTableRows.length; offset++) {
+      const rowIndex = (anchorRowIndex + offset) % allTableRows.length;
+      const gridRow = tableGrid[rowIndex];
+      const candidateCellId = this.findFocusableCellIdInGridRow(gridRow, startLogicalCol, endLogicalCol, cellIdsToDelete);
+      if (!candidateCellId) {
+        continue;
+      }
+      const candidateCell = findCellBlockById(allTableRows, candidateCellId);
+      if (candidateCell) {
+        return candidateCell;
+      }
+    }
+    return null;
+  }
+  /**
+   * Find the next focusable cell ID in a grid row, skipping deleted cells.
+   *
+   * @param {string[]} gridRow - The grid row array.
+   * @param {number} startCol - Start logical column.
+   * @param {number} endCol - End logical column.
+   * @param {Set<string>} cellIdsToDelete - Set of cell IDs to skip.
+   * @returns {Nullable<string>} The next focusable cell ID, or null if none found.
+   */
+  findFocusableCellIdInGridRow(gridRow, startCol, endCol, cellIdsToDelete) {
+    // Prefer the first cell strictly to the right of the deleted range.
+    for (let col = endCol + 1; col < gridRow.length; col++) {
+      const cellId = gridRow[col];
+      if (cellId && !cellIdsToDelete.has(cellId)) {
+        return cellId;
+      }
+    }
+    // Fallback to the closest cell to the left of the deleted range.
+    for (let col = startCol - 1; col >= 0; col--) {
+      const cellId = gridRow[col];
+      if (cellId && !cellIdsToDelete.has(cellId)) {
+        return cellId;
+      }
+    }
+    return null;
+  }
+  /**
+   * Deletes cells by adjusting partial cells and removing fully covered cells.
+   *
+   * @param {(RTETableCellBlock | RTETableHeadCellBlock)[]} coveredCells - Cells that should be fully removed.
+   * @param {AdjustmentCellInfo[]} partialAdjustments - Cells that need colspan reduction.
+   * @param {RTETableBlock} table - The table block.
+   */
+  deleteCells(coveredCells, partialAdjustments, table) {
+    coveredCells.forEach((cell) => {
+      cell.parent.apply(new RemoveChildrenAction(cell));
+    });
+    const adjustedCellIds = new Set();
+    partialAdjustments.forEach(({ cell, nextColSpan, rowSpan }) => {
+      adjustedCellIds.add(cell.id);
+      setSpanAttributes(cell, nextColSpan, rowSpan, table);
+    });
+    this.normalizeRemainingCellSpans(table, adjustedCellIds);
+  }
+  /**
+   * Re-apply span attributes after deletion so remaining cells are normalized
+   * against the new table width. When colspan equals table column count, don't set rowspan.
+   *
+   * @param {RTETableBlock} table - The table block.
+   * @param {Set<string>} skipCellIds - The table skip cell`s id.
+   */
+  normalizeRemainingCellSpans(table, skipCellIds) {
+    const remainingRows = getAllTableRows(table);
+    remainingRows.forEach((row) => {
+      row.children.forEach((cell) => {
+        const { colSpan, rowSpan } = getCellSpan(cell);
+        if (skipCellIds.has(cell.id)) {
+          const tableColumnCount = getTableColumnCount(table);
+          const needsFinalNormalization = rowSpan > 1 && colSpan === tableColumnCount;
+          if (!needsFinalNormalization) {
+            return;
+          }
+        }
+        setSpanAttributes(cell, colSpan, rowSpan, table);
+      });
+    });
+  }
+  /**
+   * Get overlap count of two logical column ranges.
+   *
+   * @param {number} cellStartCol - Logical start column of the cell.
+   * @param {number} cellColSpan - Colspan value of the cell.
+   * @param {number} deleteStartCol - Start logical column of delete range.
+   * @param {number} deleteEndCol - End logical column of delete range.
+   * @returns {number} The number of overlapping logical columns.
+   */
+  getColumnOverlapCount(cellStartCol, cellColSpan, deleteStartCol, deleteEndCol) {
+    const cellEndCol = cellStartCol + cellColSpan - 1;
+    const overlapStart = Math.max(cellStartCol, deleteStartCol);
+    const overlapEnd = Math.min(cellEndCol, deleteEndCol);
+    return overlapStart <= overlapEnd ? overlapEnd - overlapStart + 1 : 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;
+  }
+}