Issues with Parsing HTML Table Structures in prosemirror-tables

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:


<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>

@white2space by any chance did you solve this or find any workaround ?

@marijn any thoughts please ?