[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]: odoo@656cac1
[2]: odoo@e113bae
[3]: odoo@e2f7b8f

opw-3031217
opw-3032482
opw-3035289

X-original-commit: e7c8fed

addons/website/static/src/js/menu/edit.js

@@ -341,10 +341,23 @@ var EditPageMenu = websiteNavbarData.WebsiteNavbarActionWidget.extend({
         $('body').addClass('editor_started');
     },
 
-    _getContentEditableAreas () {
-        return $(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').length;
-        }).toArray();
+    _getContentEditableAreas() {
+        const $savableZones = $(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 () {

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/website_sale.editor.js

@@ -52,14 +52,22 @@ odoo.define('website_sale.editMenu', function (require) {
 
 var WebsiteEditMenu = require('website.editMenu');
 
+// TODO this whole include actually seems unnecessary. The bug it solved seems
+// to stay solved if this is removed. To investigate.
 WebsiteEditMenu.include({
     /**
      * @override
      */
-    _getContentEditableAreas () {
-        return $(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();
+    _getContentEditableAreas() {
+        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