From 038ecd07fb440787fd876a2b53fc7410ce934247 Mon Sep 17 00:00:00 2001
From: qsm-odoo <qsm@odoo.com>
Date: Tue, 7 Jun 2022 17:13:05 +0000
Subject: [PATCH] [FIX] web_editor: hide media options on editable root media
 elements

This works follows [1] which already hid lots of options which were not
supposed to show up on some images. That concerned mainly t-field images
and others. This commit is about media elements (images, icons, ...)
which are editable roots, meaning they carry the branding of the portion
of the view they belong to.

In 14.0, such root media elements were simply not editable. Indeed, the
media tools (which were amongst text tools of summernote) simply did not
show up. With the new editor of 15.0, all media options were converted
as "snippet" options for the website editor. The system being entirely
different, explicit conditions for the options to not appear had to be
made.

Technically, some of those options may work on editable roots. With [2],
the "class" and "style" attributes are savable on such items... unless
they are computed. In the future, we may allow more attributes. The
problem in allowing some options to appear (depending if they work on
a given element) is that it would require:
- knowing which attributes an option modifies (class? style? others?)
- knowing which attributes are computed in the qweb view

We may consider improving all of that in future versions, but in stable,
we decided to simply hide all media options on editable roots.
Theoretically, some non-media options could still appear on non-media
editable root elements and not work... but probably no standard option
matches this case.

[1]: https://github.com/odoo/odoo/commit/e707789d43a5754dc2a28192e5502cc14eaca73f
[2]: https://github.com/odoo/odoo/commit/8579c0cae839c615415120b79d6ec22c71f7affd

opw-2817765
opw-2854285
opw-2864584

closes odoo/odoo#93751

X-original-commit: 9dc76ce4b0a646563a29a431e28cf96218a66991
Signed-off-by: Romain Derie (rde) <rde@odoo.com>
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
---
 .../static/src/js/editor/image_processing.js   | 18 +++++++++++++++++-
 .../static/src/js/wysiwyg/wysiwyg.js           |  4 +++-
 addons/web_editor/views/snippets.xml           | 10 ++++++----
 addons/website/views/snippets/snippets.xml     |  2 +-
 4 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/addons/web_editor/static/src/js/editor/image_processing.js b/addons/web_editor/static/src/js/editor/image_processing.js
index 84fdd77d414..afafb7d707b 100644
--- a/addons/web_editor/static/src/js/editor/image_processing.js
+++ b/addons/web_editor/static/src/js/editor/image_processing.js
@@ -461,7 +461,23 @@ function isImageSupportedForProcessing(mimetype, strict = false) {
  * @returns {Boolean}
  */
 function isImageSupportedForStyle(img) {
-    return img.parentElement && !img.parentElement.dataset.oeType;
+    if (!img.parentElement) {
+        return false;
+    }
+
+    // See also `[data-oe-type='image'] > img` added as data-exclude of some
+    // snippet options.
+    const isTFieldImg = ('oeType' in img.parentElement.dataset);
+
+    // Editable root elements are technically *potentially* supported here (if
+    // the edited attributes are not computed inside the related view, they
+    // could technically be saved... but as we cannot tell the computed ones
+    // apart from the "static" ones, we choose to not support edition at all in
+    // those "root" cases).
+    // See also `[data-oe-xpath]` added as data-exclude of some snippet options.
+    const isEditableRootElement = ('oeXpath' in img.dataset);
+
+    return !isTFieldImg && !isEditableRootElement;
 }
 
 /**
diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 83b81c79df3..846d5ed5fd9 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -38,7 +38,9 @@ const endPos = OdooEditorLib.endPos;
 
 var id = 0;
 const faZoomClassRegex = RegExp('fa-[0-9]x');
-const mediaSelector = 'img, .fa, .o_image, .media_iframe_video';
+const basicMediaSelector = 'img, .fa, .o_image, .media_iframe_video';
+// (see isImageSupportedForStyle).
+const mediaSelector = basicMediaSelector.split(',').map(s => `${s}:not([data-oe-xpath])`).join(',');
 
 // Time to consider a user offline in ms. This fixes the problem of the
 // navigator closing rtc connection when the mac laptop screen is closed.
diff --git a/addons/web_editor/views/snippets.xml b/addons/web_editor/views/snippets.xml
index b79b83e475b..65c369df0d4 100644
--- a/addons/web_editor/views/snippets.xml
+++ b/addons/web_editor/views/snippets.xml
@@ -382,7 +382,9 @@
 
     <!-- Replace a media -->
     <!-- TODO probably review this system once the new editor is merged to not duplicate the selector, etc -->
-    <div data-js="ReplaceMedia" data-selector="img, .media_iframe_video, span.fa, i.fa" data-exclude="a[href^='/website/social/'] > i.fa, a[class*='s_share_'] > i.fa">
+    <div data-js="ReplaceMedia"
+         data-selector="img, .media_iframe_video, span.fa, i.fa"
+         data-exclude="[data-oe-xpath], a[href^='/website/social/'] > i.fa, a[class*='s_share_'] > i.fa">
         <we-row string="Media">
             <we-button class="o_we_bg_brand_primary" data-replace-media="true" data-no-preview="true">Replace</we-button>
             <we-button class="fa fa-link"
@@ -400,7 +402,7 @@
             data-set-new-window="true" data-no-preview="true"/>
     </div>
 
-    <div data-js="FontawesomeTools" data-selector="span.fa, i.fa">
+    <div data-js="FontawesomeTools" data-selector="span.fa, i.fa" data-exclude="[data-oe-xpath]">
         <we-colorpicker string="Color"
                 title="Color"
                 data-select-style=""
@@ -430,7 +432,7 @@
         </we-button-group>
     </div>
 
-    <div data-selector="img" data-exclude="[data-oe-type=image] > img">
+    <div data-selector="img" data-exclude="[data-oe-type='image'] > img, [data-oe-xpath]">
         <we-input string="Description" class="o_we_large"
             data-select-attribute="" data-attribute-name="alt"
             placeholder="Alt tag"
@@ -576,7 +578,7 @@
         </we-button-group>
     </div>
 
-    <div data-selector="span.fa, i.fa, img" data-exclude="[data-oe-type=image] > img">
+    <div data-selector="span.fa, i.fa, img" data-exclude="[data-oe-type='image'] > img, [data-oe-xpath]">
         <we-select string="Alignment" data-state-to-first-class="true">
             <we-button data-select-class="" title="Unalign">None</we-button>
             <we-button data-select-class="float-left" title="Align Left">Left</we-button>
diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml
index 25c5b40a2d5..bdf99385bb7 100644
--- a/addons/website/views/snippets/snippets.xml
+++ b/addons/website/views/snippets/snippets.xml
@@ -1243,7 +1243,7 @@
     <!-- Website Animate -->
     <div data-js="WebsiteAnimate"
          data-selector=".o_animable, section .row > div, img, .fa, .btn, .o_animated_text"
-         data-exclude=".o_not-animable, .s_col_no_resize.row > div, .s_col_no_resize">
+         data-exclude="[data-oe-xpath], .o_not-animable, .s_col_no_resize.row > div, .s_col_no_resize">
         <we-select string="Animate" data-is-animation-type-selection="true">
             <we-button data-select-class="" data-name="no_animation_opt">No Animation</we-button>
             <we-divider/>