[FIX] website, *: allow to re-edit company team snippet images

*: website_sale

Since [1], it was not possible to edit a company team snippet image
anymore as soon as the page was saved once. Indeed that commit added
o_not_editable/contenteditable="false" on the parent column to make sure
no text can be added in that column and contenteditable="true" on the
images so that they are still editable (even though HTML-specs-wise
adding contenteditable="true" on images probably does not mean much as
images are self-closing tags, our editor understand that as the ability
to edit the image anyway). That contenteditable="true" part is however
removed when leaving edit mode... and was not restored upon entering
edit mode again.

This fixes the problems with a specific JS patch, we'll review to see if
better can be done in master.

Funny enough, that bug was actually gone in 15.0... by mistake. A recent
bug fix actually reintroduced that isolated bug at [2] (by reintroducing
the fact that images in a non-editable environment are not possible to
edit). The 3 opened tickets this commit mentions were actually reported
for 15.0 immediately after that, while the 14.0 being broken about this
since the beginning apparently did not bother anyone.

Note: as a forward-ported fix, this also takes the opportunity to clean
a bit what was done at [3]. (calling `_super`, no duplicated code,
adding comments, ...).

[1]: https://github.com/odoo/odoo/commit/656cac1bf21c7c5a56aa569008aac58436c747fb
[2]: https://github.com/odoo/odoo/commit/e113bae04a64a8bd341a80736086ab7c25079dd3
[3]: https://github.com/odoo/odoo/commit/e2f7b8fad76dc816b2f6864340d3740446117cdb

opw-3031217
opw-3032482
opw-3035289

closes odoo/odoo#104521

X-original-commit: 1636ba5ed2f8a284bef0930313a85cc3dc7cf072
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

addons/website/static/src/components/wysiwyg_adapter/wysiwyg_adapter.js

@@ -354,9 +354,22 @@ export class WysiwygAdapterComponent extends ComponentAdapter {
      * @returns {Node[]} list of nodes that can be edited.
      */
     _getContentEditableAreas() {
-        const savableElements = $(this.websiteService.pageDocument).find(this.savableSelector)
-                                .not('input, [data-oe-readonly],[data-oe-type="monetary"],[data-oe-many2one-id], [data-oe-field="arch"]:empty');
-        return Array.from(savableElements).filter(element => !element.closest('.o_not_editable'));
+        const $savableZones = $(this.websiteService.pageDocument).find(this.savableSelector);
+        const $editableSavableZones = $savableZones
+            .not('input, [data-oe-readonly], ' +
+                 '[data-oe-type="monetary"], [data-oe-many2one-id], [data-oe-field="arch"]:empty')
+            .filter((_, el) => {
+                return !$(el).closest('.o_not_editable').length;
+            });
+
+        // TODO review in master. This stable fix restores the possibility to
+        // edit the company team snippet images on subsequent editions. Indeed
+        // this badly relies on the contenteditable="true" attribute being on
+        // those images but it is rightfully lost after the first save.
+        // grep: COMPANY_TEAM_CONTENTEDITABLE
+        const $extraEditableZones = $editableSavableZones.find('.s_company_team .o_not_editable img');
+
+        return $editableSavableZones.add($extraEditableZones).toArray();
     }
     _getReadOnlyAreas() {
         return [];

addons/website/views/snippets/s_company_team.xml

@@ -1,6 +1,13 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
 
+<!--
+TODO review in master: this snippet's images use contenteditable="true" to be
+editable, their parent being o_not_editable/contenteditable="false" to prevent
+adding text by mistake. After the first save, contenteditable="true" are lost,
+so this is a bad practice / requires a better system to do this in the future.
+Meanwhile, this is fixed in JS (see COMPANY_TEAM_CONTENTEDITABLE).
+-->
 <template id="s_company_team" name="Team">
     <section class="s_company_team pt48 pb48">
         <div class="container">

addons/website_sale/static/src/js/components/wysiwyg_adapter/wysiwyg_adapter.js

@@ -3,14 +3,22 @@
 import { WysiwygAdapterComponent } from '@website/components/wysiwyg_adapter/wysiwyg_adapter';
 import { patch } from 'web.utils';
 
+// TODO this whole patch actually seems unnecessary. The bug it solved seems
+// to stay solved if this is removed. To investigate.
 patch(WysiwygAdapterComponent.prototype, 'website_sale_wysiwyg_adapter', {
     /**
      * @override
      */
      _getContentEditableAreas() {
-        return $(this.websiteService.pageDocument).find(this.savableSelector).not('input, [data-oe-readonly],[data-oe-type="monetary"],[data-oe-many2one-id], [data-oe-field="arch"]:empty').filter((_, el) => {
-            return !$(el).closest('.o_not_editable, .oe_website_sale .products_header').length;
-        }).toArray();
+        const array = this._super(...arguments);
+        return array.filter(el => {
+            // TODO should really review this system of "ContentEditableAreas +
+            // ReadOnlyAreas", here the "products_header" stuff is duplicated in
+            // both but this system is also duplicated with o_not_editable and
+            // maybe even other systems (like preserving contenteditable="false"
+            // with oe-keep-contenteditable).
+            return !el.closest('.oe_website_sale .products_header');
+        });
     },
     /**
      * @override