diff --git a/addons/web_editor/static/src/js/backend/convert_inline.js b/addons/web_editor/static/src/js/backend/convert_inline.js index d692c25c6a0..982b34ff410 100644 --- a/addons/web_editor/static/src/js/backend/convert_inline.js +++ b/addons/web_editor/static/src/js/backend/convert_inline.js @@ -205,13 +205,13 @@ function bootstrapToTable($editable) { if (gridIndex + columnSize < 12) { currentCol = grid[gridIndex]; _applyColspan(currentCol, columnSize, containerWidth); + gridIndex += columnSize; if (columnIndex === bootstrapColumns.length - 1) { // We handled all the columns but there is still space // in the row. Insert the columns and fill the row. - grid[gridIndex].setAttribute('colspan', 12 - gridIndex); + _applyColspan(grid[gridIndex], 12 - gridIndex); currentRow.append(...grid.filter(td => td.getAttribute('colspan'))); } - gridIndex += columnSize; } else if (gridIndex + columnSize === 12) { // Finish the row. currentCol = grid[gridIndex]; @@ -242,10 +242,8 @@ function bootstrapToTable($editable) { if (columnIndex === bootstrapColumns.length - 1 && gridIndex < 12) { // We handled all the columns but there is still space // in the row. Insert the columns and fill the row. - grid[gridIndex].setAttribute('colspan', 12 - gridIndex); - currentRow.append(...grid.filter(td => td.getAttribute('colspan'))); - // Adapt width to colspan. _applyColspan(grid[gridIndex], 12 - gridIndex, containerWidth); + currentRow.append(...grid.filter(td => td.getAttribute('colspan'))); } } if (currentCol) { diff --git a/addons/web_editor/static/tests/convert_inline_tests.js b/addons/web_editor/static/tests/convert_inline_tests.js index d1769e2606b..eb4827f0783 100644 --- a/addons/web_editor/static/tests/convert_inline_tests.js +++ b/addons/web_editor/static/tests/convert_inline_tests.js @@ -42,7 +42,8 @@ QUnit.module('convert_inline', {}, function () { convertInline.bootstrapToTable($editable); assert.strictEqual(removeComments($editable.html()), getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + - `(0, 12)`, + `(0, 12)` + + ``, "should have converted a 1x13 grid to an equivalent table (overflowing)"); // 1x14 @@ -51,7 +52,8 @@ QUnit.module('convert_inline', {}, function () { assert.strictEqual(removeComments($editable.html()), getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + `(0, 12)` + - `(0, 13)`, + `(0, 13)` + + ``, "should have converted a 1x14 grid to an equivalent table (overflowing)"); // 1x25 @@ -61,7 +63,8 @@ QUnit.module('convert_inline', {}, function () { getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + getRegularTableHtml(1, 12, 1, 8.33).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`) .replace(/^/, '').slice(0, -8) + - `(0, 24)`, + `(0, 24)` + + ``, "should have converted a 1x25 grid to an equivalent table (overflowing)"); // 1x26 @@ -72,7 +75,8 @@ QUnit.module('convert_inline', {}, function () { getRegularTableHtml(1, 12, 1, 8.33).replace(/\(0, (\d+)\)/g, (s, c) => `(0, ${+c + 12})`) .replace(/^/, '').slice(0, -8) + `(0, 24)` + - `(0, 25)`, + `(0, 25)` + + ``, "should have converted a 1x26 grid to an equivalent table (overflowing)"); }); QUnit.test('convert a multi-row regular grid', async function (assert) { @@ -110,36 +114,41 @@ QUnit.module('convert_inline', {}, function () { convertInline.bootstrapToTable($editable); assert.strictEqual(removeComments($editable.html()), getRegularTableHtml(1, 12, 1, 8.33).slice(0, -8) + - `(0, 12)` + - `(1, 0)`, + `(0, 12)` + + `` + // 13 overflowed the row by 1 -> fill up + `(1, 0)`, // 1 col with no size == col-12 "should have converted a 2x[13,1] grid to an equivalent table (overflowing)"); // 2x[1,13] $editable = $(`
${getRegularGridHtml(2, [1, 13])}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual(removeComments($editable.html()), - getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], true).slice(0, -8) + - `(1, 12)`, + assert.strictEqual($editable.html(), + getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33]).slice(0, -8) + + `(1, 12)` + + ``, // 13 overflowed the row by 1 -> fill up "should have converted a 2x[1,13] grid to an equivalent table (overflowing)"); // 3x[1,13,6] $editable = $(`
${getRegularGridHtml(3, [1, 13, 6])}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual(removeComments($editable.html()), - getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33], true).slice(0, -8) + - `(1, 12)` + + assert.strictEqual($editable.html(), + getRegularTableHtml(2, [1, 12], [12, 1], [100, 8.33]).slice(0, -8) + + `(1, 12)` + + `` + // 13 overflowed the row by 1 -> fill up getRegularTableHtml(1, 6, 2, 16.67).replace(/\(0,/g, `(2,`).replace(/^/, ''), "should have converted a 3x[1,13,6] grid to an equivalent table (overflowing)"); // 3x[1,6,13] $editable = $(`
${getRegularGridHtml(3, [1, 6, 13])}
`); convertInline.bootstrapToTable($editable); - assert.strictEqual(removeComments($editable.html()), - getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 16.67, 8.33], true).slice(0, -8) + - `(2, 12)`, + assert.strictEqual($editable.html(), + getRegularTableHtml(3, [1, 6, 12], [12, 2, 1], [100, 16.67, 8.33]).slice(0, -8) + + `(2, 12)` + + `` + // 13 overflowed the row by 1 -> fill up + ``, "should have converted a 3x[1,6,13] grid to an equivalent table (overflowing)"); }); - QUnit.test('convert a single-row irregular grid', async function (assert) {assert.expect(4); + QUnit.test('convert a single-row irregular grid', async function (assert) { assert.expect(2); // 1x2 @@ -154,7 +163,7 @@ QUnit.module('convert_inline', {}, function () { assert.strictEqual(removeComments($editable.html()), getTableHtml([[[2, 16.67], [3, 25], [7, 58.33]]], true), "should have converted a 1x3 grid to an equivalent table"); }); - QUnit.test('convert a single-row irregular overflowing grid', async function (assert) {assert.expect(4); + QUnit.test('convert a single-row irregular overflowing grid', async function (assert) { assert.expect(2); // 1x2