diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
index 0ad8f61cb5c..99cae8935c2 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/OdooEditor.js
@@ -178,7 +178,7 @@ export const CLIPBOARD_WHITELISTS = {
};
// Commands that don't require a DOM selection but take an argument instead.
-const SELECTIONLESS_COMMANDS = ['addRow', 'addColumn', 'removeRow', 'removeColumn'];
+const SELECTIONLESS_COMMANDS = ['addRow', 'addColumn', 'removeRow', 'removeColumn', 'resetSize'];
function defaultOptions(defaultObject, object) {
const newObject = Object.assign({}, defaultObject, object);
@@ -442,6 +442,11 @@ export class OdooEditor extends EventTarget {
this.addDomListener(uiMenu.querySelector('.o_delete_row'), 'click', this._onTableDeleteRowClick);
}
+ // Reset the size of the table
+ uiMenu.append(parser.parseFromString(`` + this.options._t('Reset Size') + `
+ `, 'text/html').body.firstChild)
+ this.addDomListener(uiMenu.querySelector('.o_reset_table_size'), 'click', () => this.execCommand('resetSize', this._tableUiTarget));
+
this[`_${direction}Ui`] = ui;
this.document.body.append(ui);
this.addDomListener(ui.querySelector('.o_table_ui_menu_toggler'), 'click', this._onTableMenuTogglerClick);
@@ -2788,8 +2793,8 @@ export class OdooEditor extends EventTarget {
this._columnUi.style.visibility = 'hidden';
}
if (row || column) {
- const table = closestElement(row || column, 'table');
- table && table.addEventListener('mouseleave', () => this._toggleTableUi(), { once: true });
+ this._tableUiTarget = closestElement(row || column, 'table');
+ this._tableUiTarget && this._tableUiTarget.addEventListener('mouseleave', () => this._toggleTableUi(), { once: true });
}
}
/**
@@ -2810,7 +2815,13 @@ export class OdooEditor extends EventTarget {
xy: {left: 'x', top: 'y'},
size: {left: 'width', top: 'height'}
};
-
+ const table = getInSelection(this.document, 'table');
+ const resetTableSize = ui.querySelector('.o_reset_table_size');
+ if (table && !table.hasAttribute('style')) {
+ resetTableSize.classList.add('d-none');
+ } else {
+ resetTableSize.classList.remove('d-none');
+ }
const side1 = isRow ? 'left' : 'top';
ui.style[side1] = (isRow ? elementRect : tableRect)[props.xy[side1]] - togglerRect[props.size[side1]] + 'px';
ui.style[props.size[side1]] = !isRow && togglerRect[props.size[side1]] + 'px';
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js b/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js
index 2a73dc6613d..5bc118e4ff8 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/src/commands/commands.js
@@ -753,6 +753,22 @@ export const editorCommands = {
row.remove();
siblingRow ? setSelection(...startPos(siblingRow)) : editorCommands.deleteTable(editor, table);
},
+ resetSize: (editor,table) => {
+ if (!table) {
+ getDeepRange(editor.editable, { select: true });
+ table = getInSelection(editor.document,'table');
+ }
+ table.removeAttribute('style');
+ const cells = [...table.querySelectorAll('tr, td')];
+ cells.forEach( cell => {
+ const cStyle = cell.style;
+ if (cell.tagName === 'TR') {
+ cStyle.height = '';
+ } else {
+ cStyle.width = '';
+ }
+ })
+ },
deleteTable: (editor, table) => {
table = table || getInSelection(editor.document, 'table');
if (!table) return;
diff --git a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js
index 3408fa6f820..2a2e90e06c3 100644
--- a/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js
+++ b/addons/web_editor/static/src/js/editor/odoo-editor/test/spec/editor.test.js
@@ -5647,6 +5647,157 @@ X[]
});
});
});
+ describe('reset size', () => {
+ it('should remove any height or width of the table and bring it back to it original form', async () => {
+ await testEditor(BasicEditor, {
+ contentBefore: `
+
+ []
|
+
|
+
|
+
|
+
+
+
|
+
|
+
|
+
|
+
+
+
|
+
|
+
|
+
|
+
+
`,
+ stepFunction: async editor => editor.execCommand('resetSize'),
+ contentAfter: `
+
+ []
|
+
|
+
|
+
|
+
+
+
|
+
|
+
|
+
|
+
+
+
|
+
|
+
|
+
|
+
+
`,
+ });
+ });
+ it('should remove any height or width of the table without loosing the style of the element inside it.', async () => {
+ await testEditor(BasicEditor, {
+ contentBefore: `
+
+ []TESTTEXT |
+
|
+
+
+ |
+
+
+
|
+
+ TESTTEXT
+ |
+
|
+
+
+ codeTEST |
+
|
+
+
+ - text
+ - text
+ - text
+
+ |
+
`,
+ stepFunction: async editor => editor.execCommand('resetSize'),
+ contentAfter: `
+
+ []TESTTEXT |
+
|
+
+
+ |
+
+
+
|
+
+ TESTTEXT
+ |
+
|
+
+
+ codeTEST |
+
|
+
+
+ - text
+ - text
+ - text
+
+ |
+
`,
+ });
+ });
+ it('should remove any height or width of the table without removig the style of the table.', async () => {
+ await testEditor(BasicEditor, {
+ contentBefore: `
+
+ []
|
+
|
+
|
+
+
+
|
+
|
+
|
+
+
+
|
+
|
+
|
+
+
`,
+ stepFunction: async editor => editor.execCommand('resetSize'),
+ contentAfter: `
+
+ []
|
+
|
+
|
+
+
+
|
+
|
+
|
+
+
+
|
+
|
+
|
+
+
`,
+ });
+ });
+ });
describe('color', () => {
it('should apply a color to two columns', async () => {
await testEditor(BasicEditor, {
diff --git a/addons/web_editor/static/src/xml/editor.xml b/addons/web_editor/static/src/xml/editor.xml
index 8b4b58b4aac..79a243f7664 100644
--- a/addons/web_editor/static/src/xml/editor.xml
+++ b/addons/web_editor/static/src/xml/editor.xml
@@ -273,6 +273,16 @@
+