[FIX] web_editor: p tag not added when new row or column in inserted.

Before this commit:
When we inserted a new row or column into a table, a <p> tag was not
inserted within it, resulting in the placeholder not being displayed.

After this commit:
When a new row or column is inserted into the table, a <p> tag is inserted
within the <td>.

task-3344668

closes odoo/odoo#137429

X-original-commit: a3e09ed84451f8a7c5cbc82648a02565ef63072f
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
maad-odoo
2023-10-03 21:14:45 +00:00
parent c3eee7c6b8
commit 83d7846fc3
2 changed files with 29 additions and 25 deletions
@@ -686,7 +686,9 @@ export const editorCommands = {
}
referenceColumn.forEach((cell, rowIndex) => {
const newCell = document.createElement('td');
newCell.append(document.createElement('br'));
const p = document.createElement('p');
p.append(document.createElement('br'));
newCell.append(p);
cell[beforeOrAfter](newCell);
if (rowIndex === 0) {
newCell.style.width = cell.style.width;
@@ -712,7 +714,9 @@ export const editorCommands = {
const referenceRowWidths = [...cells].map(cell => cell.style.width || cell.clientWidth + 'px');
newRow.append(...Array.from(Array(cells.length)).map(() => {
const td = document.createElement('td');
td.append(document.createElement('br'));
const p = document.createElement('p');
p.append(document.createElement('br'));
td.append(p);
return td;
}));
referenceRow[beforeOrAfter](newRow);
@@ -4784,9 +4784,9 @@ X[]
'</tr></tbody></table>',
stepFunction: async editor => editor.execCommand('addRow', 'before'),
contentAfter: '<table><tbody><tr style="height: 20px;">' +
'<td style="width: 20px;"><br></td>' +
'<td style="width: 25px;"><br></td>' +
'<td style="width: 30px;"><br></td>' +
'<td style="width: 20px;"><p><br></p></td>' +
'<td style="width: 25px;"><p><br></p></td>' +
'<td style="width: 30px;"><p><br></p></td>' +
'</tr>' +
'<tr style="height: 20px;">' +
'<td style="">ab</td>' +
@@ -4814,9 +4814,9 @@ X[]
'<td style="width: 30px;">ef</td>' +
'</tr>' +
'<tr style="height: 30px;">' +
'<td><br></td>' +
'<td><br></td>' +
'<td><br></td>' +
'<td><p><br></p></td>' +
'<td><p><br></p></td>' +
'<td><p><br></p></td>' +
'</tr>' +
'<tr style="height: 30px;">' +
'<td>ab</td>' +
@@ -4841,9 +4841,9 @@ X[]
'<td style="width: 30px;">ef[]</td>' +
'</tr>' +
'<tr style="height: 20px;">' +
'<td><br></td>' +
'<td><br></td>' +
'<td><br></td>' +
'<td><p><br></p></td>' +
'<td><p><br></p></td>' +
'<td><p><br></p></td>' +
'</tr></tbody></table>',
});
});
@@ -4866,9 +4866,9 @@ X[]
'<td style="width: 30px;">ef[]</td>' +
'</tr>' +
'<tr style="height: 20px;">' +
'<td><br></td>' +
'<td><br></td>' +
'<td><br></td>' +
'<td><p><br></p></td>' +
'<td><p><br></p></td>' +
'<td><p><br></p></td>' +
'</tr>' +
'<tr style="height: 30px;">' +
'<td>ab</td>' +
@@ -4895,13 +4895,13 @@ X[]
'</tr></tbody></table>',
stepFunction: async editor => editor.execCommand('addColumn', 'before'),
contentAfter: '<table style="width: 150px;"><tbody><tr style="height: 20px;">' +
'<td style="width: 32px;"><br></td>' +
'<td style="width: 32px;"><p><br></p></td>' +
'<td style="width: 32px;">ab[]</td>' +
'<td style="width: 40px;">cd</td>' +
'<td style="width: 45px;">ef</td>' +
'</tr>' +
'<tr style="height: 30px;">' +
'<td><br></td>' +
'<td><p><br></p></td>' +
'<td>ab</td>' +
'<td>cd</td>' +
'<td>ef</td>' +
@@ -4928,19 +4928,19 @@ X[]
stepFunction: async editor => editor.execCommand('addColumn', 'before'),
contentAfter: '<table style="width: 200px;"><tbody><tr style="height: 20px;">' +
'<td style="width: 38px;">ab</td>' +
'<td style="width: 50px;"><br></td>' +
'<td style="width: 50px;"><p><br></p></td>' +
'<td style="width: 50px;">cd</td>' +
'<td style="width: 61px;">ef</td>' +
'</tr>' +
'<tr style="height: 30px;">' +
'<td>ab</td>' +
'<td><br></td>' +
'<td><p><br></p></td>' +
'<td>cd[]</td>' +
'<td>ef</td>' +
'</tr>' +
'<tr style="height: 40px;">' +
'<td>ab</td>' +
'<td><br></td>' +
'<td><p><br></p></td>' +
'<td>cd</td>' +
'<td>ef</td>' +
'</tr></tbody></table>',
@@ -4968,13 +4968,13 @@ X[]
// size was slightly adjusted to
// preserve table width in view on
// fractional division results
'<td style="width: 43px;"><br></td>' +
'<td style="width: 43px;"><p><br></p></td>' +
'</tr>' +
'<tr style="height: 30px;">' +
'<td>ab</td>' +
'<td>cd</td>' +
'<td>ef</td>' +
'<td><br></td>' +
'<td><p><br></p></td>' +
'</tr></tbody></table>',
});
});
@@ -4999,19 +4999,19 @@ X[]
contentAfter: '<table style="width: 200px;"><tbody><tr style="height: 20px;">' +
'<td style="width: 38px;">ab</td>' +
'<td style="width: 50px;">cd</td>' +
'<td style="width: 50px;"><br></td>' +
'<td style="width: 50px;"><p><br></p></td>' +
'<td style="width: 61px;">ef</td>' +
'</tr>' +
'<tr style="height: 30px;">' +
'<td>ab</td>' +
'<td>cd[]</td>' +
'<td><br></td>' +
'<td><p><br></p></td>' +
'<td>ef</td>' +
'</tr>' +
'<tr style="height: 40px;">' +
'<td>ab</td>' +
'<td>cd</td>' +
'<td><br></td>' +
'<td><p><br></p></td>' +
'<td>ef</td>' +
'</tr></tbody></table>',
});
@@ -5024,7 +5024,7 @@ X[]
await testEditor(BasicEditor, {
contentBefore: '<table><tbody><tr style="height: 20px;"><td style="width: 20px;">ab</td><td>cd</td><td>ef[]</td></tr></tbody></table>',
stepFunction: async editor => triggerEvent(editor.editable, 'keydown', { key: 'Tab'}),
contentAfter: '<table><tbody><tr style="height: 20px;"><td style="width: 20px;">ab</td><td>cd</td><td>ef</td></tr><tr style="height: 20px;"><td>[]<br></td><td><br></td><td><br></td></tr></tbody></table>',
contentAfter: '<table><tbody><tr style="height: 20px;"><td style="width: 20px;">ab</td><td>cd</td><td>ef</td></tr><tr style="height: 20px;"><td>[<p><br></p>]</td><td><p><br></p></td><td><p><br></p></td></tr></tbody></table>',
});
});
});