[FIX] web_editor: remove o_editable as a marker

This revert some changes introduced in [1]. The o_editable class already
has its own behaviors, which would be in conflict with making it a
marker for adding `contenteditable="true"`.

Also this found that commit [2] stop using the "web_editor.banner"
template but did not remove it. Will be removed in master.

[1]: https://github.com/odoo/odoo/commit/17ee75a84d00eedb1778edcdbd541025e8473ef0
[2]: https://github.com/odoo/odoo/commit/d7245d2abf528d093226c80e40975e63d61e8997#diff-aa4686cd9f6a0d50e1040ba3dda0b29e9898e7cc31a47f1f02b46a2c4c047a72R2223

See https://github.com/odoo/odoo/pull/137373#issuecomment-1816509437
Related to task-2782426

closes odoo/odoo#143669

X-original-commit: 7f1021b8484cbc17f922c0e69d160a6ff672e7dc
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Co-authored-by: qsm-odoo <qsm@odoo.com>

addons/web_editor/static/src/js/wysiwyg/wysiwyg.js

@@ -384,6 +384,7 @@ export class Wysiwyg extends Component {
             return savedVideo;
         };
 
+        const _getContentEditableAreas = this.options.getContentEditableAreas;
         this.odooEditor = new OdooEditor(this.$editable[0], Object.assign({
             _t: _t,
             toolbar: this.toolbarEl,
@@ -396,7 +397,15 @@ export class Wysiwyg extends Component {
             showEmptyElementHint: this.options.showEmptyElementHint,
             controlHistoryFromDocument: this.options.controlHistoryFromDocument,
             initialHistoryId: this._serverLastStepId,
-            getContentEditableAreas: this.options.getContentEditableAreas,
+            // TODO other places in this file call this.options.getContentEditableAreas
+            // without the extension here. It does not seem to be a problem (it
+            // was like that before o_editor_banner elements were considered
+            // here), but we might want to review that.
+            getContentEditableAreas: (...args) => {
+                const areaEls = _getContentEditableAreas?.(...args) || [];
+                const bannerEls = this.$editable[0].querySelectorAll('.o_editor_banner > div');
+                return [...areaEls, ...bannerEls];
+            },
             getReadOnlyAreas: this.options.getReadOnlyAreas,
             getUnremovableElements: this.options.getUnremovableElements,
             defaultLinkAttributes: this.options.userGeneratedContent ? {rel: 'ugc' } : {},
@@ -2269,7 +2278,7 @@ export class Wysiwyg extends Component {
                 const bannerElement = parseHTML(this.odooEditor.document, `
                     <div class="o_editor_banner o_not_editable lh-1 d-flex align-items-center alert alert-${alertClass} pb-0 pt-3" role="status" data-oe-protected="true">
                         <i class="fs-4 fa ${iconClass} mb-3" aria-label="${_t(title)}"></i>
-                        <div class="o_editable o_editable_no_shadow w-100 ms-3" data-oe-protected="false">
+                        <div class="w-100 ms-3" data-oe-protected="false">
                             <p><br></p>
                         </div>
                     </div>
@@ -3311,12 +3320,14 @@ export class Wysiwyg extends Component {
      * @param {Node} node
      */
     _onPostSanitize(node) {
-        // _fixLinkMutatedElements check to be removed after the new link edge soltion is merged.
+        // _fixLinkMutatedElements check to be removed after the new link edge
+        // solution is merged.
         if (node?.querySelectorAll && this.odooEditor && !this.odooEditor._fixLinkMutatedElements) {
-            for (const element of node.querySelectorAll('.o_editable, .o_not_editable')) {
-                const editable = element.classList.contains('o_editable');
-                if (element.isContentEditable !== editable) {
-                    element.contentEditable = editable;
+            // TODO rethink o_editable as a content-editable marker without
+            // breaking the o_editable behaviors (website, mass_mailing, ...)
+            for (const element of node.querySelectorAll('.o_not_editable')) {
+                if (element.isContentEditable !== false) {
+                    element.contentEditable = false;
                 }
             }
         }
@@ -3552,7 +3563,7 @@ function isClientFirst(clientA, clientB) {
     } else {
         return clientA.startTime < clientB.startTime;
     }
-};
+}
 
 export function stripHistoryIds(value) {
     return value && value.replace(/\sdata-last-history-steps="[^"]*?"/, '') || value;

addons/web_editor/static/src/xml/commands.xml

@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <templates>
+    <!--
+        TODO Dead code to remove in master. Should probably not be used anymore:
+        beware of wrong usage of o_editable inside this template.
+    -->
     <t t-name="web_editor.banner">
         <div t-attf-class="o_editor_banner o_not_editable lh-1 d-flex align-items-center alert alert-#{alertClass} pb-0 pt-3" role="status" data-oe-protected="true">
             <i t-attf-class="fs-4 fa #{iconClass} mb-3" t-att-aria-label="label"/>