[FIX] web_editor: save document layout with tabs in different browsers

Issue:
======
If you have some tabs in a html_field, opening  with a different browser
may cause an issue when saving the document layout.

Steps to reproduce the issue:
=============================
- Open with firefox
- Go to settings , document layout
- Added some `tab` in the footer or any html field
- save
- Open with chrome
- Go to settings , document layout
- click save without doing anything
- error

Origin of the issue:
====================
When calling sanitize in the constructor, the tabs size doesn't change
because we didn't add the class `odoo-editor-editable` which doesn't
make the `editable` dirty since no changes has been made. When calling
save, `cleanForSave` will be called with a clone of the `editable` so in
sanitize it won't matter since the element is not connected to the dom
so again no changes and the edtior still no dirty, after that ,
`onWillUpdateProps` of  `Wysiwyg` will be called and we will set the
value of the editor by the new value which will call `resetContent` of
`odooEditor` and it will sanitize the editable but this time it has the
class `odoo-editor-editable` so the finally the sizes of the tabs will
be changed and the editable will become dirty. Now `onWillUnmount` in
`html_field` will be called and since the field is dirty it will commit
changes as a normal save , but a traceback will occur since the
component is already destroyed.

Solution:
=========
Add the class `odoo-edtior-editable` before the call to sanitize to mark
the field as dirty from the start and will be updated with the new sizes
of tabs on the first commit and not in the commit of `onWillUnmount`.

opw-3742423

closes odoo/odoo#156898

Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>
This commit is contained in:
Mahdi Cheikh Rouhou (macr)
2024-04-24 06:23:02 +00:00
parent 7dc51b3dee
commit c37b978b03
@@ -332,12 +332,12 @@ export class OdooEditor extends EventTarget {
// Convention: root node is ID root.
editable.oid = 'root';
this._idToNodeMap.set(1, editable);
this.editable = editable;
this.editable.classList.add("odoo-editor-editable");
if (this.options.toSanitize) {
sanitize(editable);
this.options.onPostSanitize(editable);
}
this.editable = editable;
this.editable.classList.add("odoo-editor-editable");
this.editable.setAttribute('dir', this.options.direction);
// Set contenteditable before clone as FF updates the content at this point.