[FIX] Table: allow the parsing of a table with inconsistent cell numbers

We expect each row in a table to have the same number of cells. But when
we need to parse one that doesn't, we also don't want the system to
crash. To emulate what the browser does, this commit introduces empty
cells where they were missing, extrapolating on the inconsistent table
that is being parsed.

Author: Zynton

packages/plugin-table/src/TableXmlDomParser.ts

@@ -142,6 +142,8 @@ export class TableXmlDomParser extends AbstractParser<Node> {
                 }
             }
         }
-        return grid;
+
+        // Insert empty cells in every undefined element of the grid.
+        return grid.map(row => Array.from(row, cell => cell || new TableCellNode()));
     }
 }

packages/plugin-table/test/Table.test.ts

@@ -373,6 +373,48 @@ describePlugin(Table, testEditor => {
                 /* eslint-enable prettier/prettier */
             });
         });
+        it('should parse and render a table with inconsistent cell numbers', async () => {
+            await testEditor(BasicEditor, {
+                /* eslint-disable prettier/prettier */
+                contentBefore: [
+                    '<table>',
+                        '<thead>',
+                            '<tr>',
+                                '<td>ab</td>',
+                                '<td>cd</td>',
+                            '</tr>',
+                        '</thead>',
+                        '<tr>',
+                            '<td>ef</td>',
+                        '</tr>',
+                        '<tr>',
+                            '<td>gh</td>',
+                        '</tr>',
+                    '</table>',
+                ].join(''),
+                contentAfter: [
+                    '<table>',
+                        '<thead>',
+                            '<tr>',
+                                '<td>ab</td>',
+                                '<td>cd</td>',
+                            '</tr>',
+                        '</thead>',
+                        '<tbody>',
+                            '<tr>',
+                                '<td>ef</td>',
+                                '<td><br></td>',
+                            '</tr>',
+                            '<tr>',
+                                '<td>gh</td>',
+                                '<td><br></td>',
+                            '</tr>',
+                        '</tbody>',
+                    '</table>',
+                ].join(''),
+                /* eslint-enable prettier/prettier */
+            });
+        });
     });
     describe('parse string and render in the DOM', () => {
         let editor: BasicEditor;
@@ -785,6 +827,52 @@ describePlugin(Table, testEditor => {
             ].join(''));
             /* eslint-enable prettier/prettier */
         });
+        it('should parse and render a table with inconsistent cell numbers', async () => {
+            /* eslint-disable prettier/prettier */
+            const vNodes = await editor.plugins.get(Parser).parse('text/html', [
+                '<table>',
+                    '<thead>',
+                        '<tr>',
+                            '<td>ab</td>',
+                            '<td>cd</td>',
+                        '</tr>',
+                    '</thead>',
+                    '<tr>',
+                        '<td>ef</td>',
+                    '</tr>',
+                    '<tr>',
+                        '<td>gh</td>',
+                    '</tr>',
+                '</table>',
+            ].join(''));
+            expect(vNodes.length).to.equal(1);
+
+            const renderer = editor.plugins.get(Renderer);
+            const domNodes = await renderer.render('dom/html', vNodes[0]);
+            const table = domNodes[0] as HTMLTableElement;
+            /* eslint-disable prettier/prettier */
+            expect(table.outerHTML).to.equal([
+                '<table>',
+                    '<thead>',
+                        '<tr>',
+                            '<td>ab</td>',
+                            '<td>cd</td>',
+                        '</tr>',
+                    '</thead>',
+                    '<tbody>',
+                        '<tr>',
+                            '<td>ef</td>',
+                            '<td><br></td>',
+                        '</tr>',
+                        '<tr>',
+                            '<td>gh</td>',
+                            '<td><br></td>',
+                        '</tr>',
+                    '</tbody>',
+                '</table>',
+            ].join(''));
+            /* eslint-enable prettier/prettier */
+        });
     });
     describe('addRowAbove', () => {
         beforeEach(async () => {