I’ve encountered some issues while parsing HTML table structures using the prosemirror-tables plugin. The parser doesn’t seem to correctly handle the positioning of cells, particularly with tables that use colspan and rowspan attributes.
I’ve noticed that in the generated table map, multiple cells are being located at the same position, leading to ‘collision’ type errors. It appears as though the plugin is not accounting for the way HTML tables automatically adjust cell positioning during rendering.
Here’s an example code/table structure that is causing problems:
-
Chrome Browser Rendering:
-
ProseMirror Rendering:
<table class="relative-table confluenceTable" style="width: 100.0%;">
<tbody>
<tr>
<th class="confluenceTh" original-col="1" original-cols="0" colspan="3">11</th>
<th class="confluenceTh" original-col="1" original-cols="0,1" colspan="3">22</th>
<th class="confluenceTh" original-col="1" original-cols="0,2" colspan="3">33</th>
<th class="confluenceTh">
<div class="content-wrapper">
<p>44</p>
</div>
</th>
<th class="confluenceTh" original-col="1" original-cols="0,4" colspan="4">55</th>
<th class="confluenceTh" original-col="1" original-cols="0,5" colspan="3">66</th>
</tr>
<tr>
<td class="confluenceTd" original-col="1" original-cols="0" colspan="3"><br></td>
<td class="confluenceTd" original-col="1" original-cols="0,1" colspan="3"><br></td>
<td class="confluenceTd" original-col="1" original-cols="0,2" colspan="3">
<div class="content-wrapper">
<p><br></p>
</div>
</td>
<td class="confluenceTd"><br></td>
<td class="confluenceTd" original-col="1" original-cols="0,4" colspan="4"><br></td>
<td class="confluenceTd" original-col="1" original-cols="0,5" colspan="3"><br></td>
</tr>
<tr insertnum="2">
<td fly="1" rowspan="1" colspan="1">11</td>
<td fly="1" rowspan="1" colspan="1">12</td>
<td fly="1" rowspan="1" colspan="1">13</td>
<td fly="1" rowspan="1" colspan="1">11</td>
<td fly="1" rowspan="3" colspan="1">122232</td>
<td fly="1" rowspan="1" colspan="1">13</td>
<td class="confluenceTd" rowspan="3" original-row="1" original-rows="0,2" original-col="1"
original-cols="0,2" colspan="3"><br></td>
<td rowspan="10" class="confluenceTd" original-row="5" original-rows="0,2,4"><br><br></td>
<td colspan="7" class="confluenceTd" rowspan="3" original-row="1" original-rows="0,2" original-col="5"
original-cols="0,4,5"><br><br></td>
</tr>
<tr>
<td fly="1" rowspan="1" colspan="3">212223</td>
<td fly="1" rowspan="1" colspan="1">21</td>
<td fly="1" rowspan="1" colspan="1">23</td>
</tr>
<tr>
<td fly="1" rowspan="1" colspan="1">31</td>
<td fly="1" rowspan="1" colspan="1">32</td>
<td fly="1" rowspan="1" colspan="1">33</td>
<td fly="1" rowspan="1" colspan="1">31</td>
<td fly="1" rowspan="1" colspan="1">33</td>
</tr>
<tr>
<td colspan="3" class="confluenceTd" original-col="1" original-cols="0"><br></td>
<td colspan="3" class="confluenceTd" original-col="1" original-cols="0,1"><br></td>
<td colspan="3" class="confluenceTd" original-col="1" original-cols="0,2"><br></td>
<td colspan="4" class="confluenceTd" original-col="1" original-cols="0,4"><br></td>
<td colspan="3" class="confluenceTd" original-col="1" original-cols="0,5"><br></td>
</tr>
<tr insertnum="5">
<td fly="1" rowspan="1" colspan="1">11</td>
<td fly="1" rowspan="1" colspan="1">12</td>
<td fly="1" rowspan="1" colspan="1">13</td>
<td fly="1" rowspan="1" colspan="1">-11</td>
<td fly="1" rowspan="1" colspan="1">-12</td>
<td fly="1" rowspan="1" colspan="1">-13</td>
<td fly="1" rowspan="1" colspan="1">q2</td>
<td fly="1" rowspan="1" colspan="1">2q</td>
<td fly="1" rowspan="1" colspan="1">q2</td>
<td fly="1" rowspan="1" colspan="1">1q</td>
<td fly="1" rowspan="1" colspan="1">2</td>
<td fly="1" rowspan="1" colspan="1">3</td>
<td fly="1" rowspan="1" colspan="1">4</td>
<td fly="1" rowspan="1" colspan="1">1</td>
<td fly="1" rowspan="1" colspan="1">1</td>
<td fly="1" rowspan="1" colspan="1">1</td>
</tr>
<tr>
<td fly="1" rowspan="1" colspan="1">21</td>
<td fly="1" rowspan="1" colspan="1">22</td>
<td fly="1" rowspan="2" colspan="1">2333</td>
<td fly="1" rowspan="1" colspan="2">1111</td>
<td fly="1" rowspan="1" colspan="1">11</td>
<td fly="1" rowspan="1" colspan="1">2</td>
<td fly="1" rowspan="1" colspan="1">2</td>
<td fly="1" rowspan="1" colspan="1">2</td>
<td fly="1" rowspan="1" colspan="1">2</td>
<td fly="1" rowspan="1" colspan="1">q</td>
<td fly="1" rowspan="1" colspan="1"><br></td>
<td fly="1" rowspan="1" colspan="1"><br></td>
<td fly="1" rowspan="1" colspan="1">1</td>
<td fly="1" rowspan="1" colspan="1">1</td>
<td fly="1" rowspan="1" colspan="1">1</td>
</tr>
<tr>
<td fly="1" rowspan="1" colspan="1">31</td>
<td fly="1" rowspan="1" colspan="1">32</td>
<td fly="1" rowspan="1" colspan="1">11</td>
<td fly="1" rowspan="1" colspan="1">11</td>
<td fly="1" rowspan="1" colspan="1">11</td>
<td fly="1" rowspan="1" colspan="1">2</td>
<td fly="1" rowspan="1" colspan="1">2</td>
<td fly="1" rowspan="1" colspan="1">d</td>
<td fly="1" rowspan="1" colspan="1">3</td>
<td fly="1" rowspan="1" colspan="1"><br></td>
<td fly="1" rowspan="1" colspan="1"><br></td>
<td fly="1" rowspan="1" colspan="1"><br></td>
<td fly="1" rowspan="1" colspan="1">1</td>
<td fly="1" rowspan="1" colspan="1">1q</td>
<td fly="1" rowspan="1" colspan="1">1</td>
</tr>
<tr>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1" rowspan="1" colspan="1">4</td>
<td fly="1" rowspan="1" colspan="1"><br></td>
<td fly="1" rowspan="1" colspan="1">q</td>
<td fly="1" rowspan="1" colspan="1"><br></td>
<td fly="1" rowspan="1" colspan="1">1</td>
<td fly="1" rowspan="1" colspan="1">1</td>
<td fly="1" rowspan="1" colspan="1">1</td>
</tr>
<tr>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1" rowspan="1" colspan="1">5</td>
<td fly="1" rowspan="1" colspan="1"><br></td>
<td fly="1" rowspan="1" colspan="1"><br></td>
<td fly="1" rowspan="1" colspan="1">q</td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
</tr>
<tr>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1" rowspan="1" colspan="1">6</td>
<td fly="1" rowspan="1" colspan="1"><br></td>
<td fly="1" rowspan="1" colspan="1"><br></td>
<td fly="1" rowspan="1" colspan="1"><br></td>
<td fly="1"></td>
<td fly="1"></td>
<td fly="1"></td>
</tr>
</tbody>
</table>