Table Cell Height Collapses When Merging Empty Cells Vertically

[liwenka1]

Description

When merging multiple empty cells vertically (across rows), the merged cell's height collapses to a single row height instead of maintaining the height of multiple rows. This issue occurs specifically when merging empty cells, while merging cells horizontally (across columns) works as expected.

Steps to Reproduce

1. Create a table with multiple rows
2. Select two or more empty cells vertically (in the same column, different rows)
3. Use mergeCells command to merge the selected cells
4. Expected: The merged cell should span multiple rows and maintain the visual height of all merged rows
5. Actual: The merged cell collapses to approximately single row height, even though rowspan attribute is set correctly

Visual Demonstration

Technical Analysis

After investigating the code, I found that:

1. The mergeCells function in src/commands.ts correctly sets the rowspan attribute (e.g., rowspan: 2 for merging 2 rows)
2. The merged cell's DOM structure is correct with proper rowspan attribute in the <td> element
3. However, when the cell content is empty (contains only <p></p> or <p><br></p>), the browser's default rendering behavior collapses the cell height

Root Cause

The issue appears to be caused by:

• Empty cells only contain a single empty paragraph node
• Browser's default table rendering collapses empty cells to minimal height
• The current CSS in style/tables.css doesn't enforce a minimum height for cells
• When cells are merged vertically, the empty content doesn't provide enough height to span multiple rows visually

Comparison

• ✅ Horizontal merge (colspan): Works correctly - merged cell width spans multiple columns as expected
• ❌ Vertical merge (rowspan): Height collapses when cells are empty

Possible Solutions

I can think of a few potential approaches to fix this:

Option 1: CSS-based solution

Add minimum height to table cells:

.ProseMirror td,
.ProseMirror th {
  min-height: 2em; /* or calculate based on line-height */
}

Option 2: Content-based solution

When merging empty cells with rowspan > 1, insert additional empty paragraph nodes to maintain height:

// In mergeCells function
if (allCellsAreEmpty && rowspan > 1) {
  // Insert (rowspan - 1) additional empty paragraphs
  // This naturally maintains the visual height
}

Option 3: Dynamic height calculation

In TableView, detect cells with rowspan > 1 and dynamically set min-height based on row count.

Environment

• ProseMirror Tables version: v1.8.5
• Browser: [affects all major browsers - Chrome, Firefox, Safari]
• The issue is consistent across different browsers as it's related to HTML table rendering behavior

Additional Context

This is a UX issue that affects table editing workflows where users expect merged cells to visually represent the number of rows they span, even when empty. The current behavior can be confusing as the rowspan attribute is technically correct, but the visual representation doesn't match user expectations.

Would you be open to a pull request implementing one of these solutions? I'd be happy to contribute a fix if you can provide guidance on which approach you'd prefer.