[IMP] website, web_editor: add an icon to replace images in edition

From the editor, when clicking on an image there is a new refresh icon
next to the delete icon that will open the media dialog to allow for its
replacement.

Part of https://github.com/odoo/odoo/pull/66550
task-2431684

addons/web_editor/static/src/scss/wysiwyg_snippets.scss

@@ -1811,22 +1811,21 @@ body.editor_enable.editor_has_snippets {
                 @include o-position-absolute($o-we-handles-offset-to-hide, $left: 50%);
                 transform: translate(-50%, -110%);
 
-                &, > .o_overlay_move_options {
+                &, > .o_overlay_move_options, .o_overlay_edit_options {
                     display: flex;
                 }
-                > .o_overlay_move_options {
-                    > *, + * {
+                > .o_overlay_move_options, .o_overlay_edit_options {
+                    > * {
                         @extend %we-generic-button;
                         margin: 0 1px 0;
                         min-width: 22px;
                         padding: 0 $o-we-sidebar-content-field-button-group-button-spacing * .5;
                         color: $o-we-fg-lighter;
+                        &.oe_snippet_remove {
+                            background-color: mix($o-we-color-danger, $o-we-sidebar-content-field-clickable-bg);
+                        }
                     }
                 }
-                > .oe_snippet_remove {
-                    margin-left: $o-we-sidebar-content-field-button-group-button-spacing;
-                    background-color: mix($o-we-color-danger, $o-we-sidebar-content-field-clickable-bg);;
-                }
                 > .o_overlay_move_options > .o_move_handle {
                     cursor: move;
                     width: 30px;
@@ -1836,8 +1835,8 @@ body.editor_enable.editor_has_snippets {
                     background-repeat: no-repeat;
                 }
                 &:hover {
-                    > .o_overlay_move_options {
-                        > *, + * {
+                    > .o_overlay_move_options, .o_overlay_edit_options {
+                        > * {
                             @include o-hover-opacity(.6);
 
                             &:hover {
@@ -1846,10 +1845,6 @@ body.editor_enable.editor_has_snippets {
                             }
                         }
                     }
-                    > .oe_snippet_remove:hover {
-                        border-color: mix($o-we-color-danger, $o-we-sidebar-content-field-pressed-bg, .4);
-                        background-color: $o-we-color-danger;
-                    }
                 }
             }
         }

addons/web_editor/static/src/xml/snippets.xml

@@ -15,7 +15,9 @@
                         <!-- Button-like handle to drag and drop -->
                         <div class="o_move_handle"/>
                     </div>
-                    <button type="button" class="oe_snippet_remove fa fa-trash"/>
+                    <div class="o_overlay_edit_options">
+                        <button type="button" class="oe_snippet_remove fa fa-trash"/>
+                    </div>
                 </div>
             </div>
         </div>

addons/website/static/src/js/editor/snippets.options.js

@@ -10,6 +10,7 @@ const weUtils = require('web_editor.utils');
 var options = require('web_editor.snippets.options');
 const wUtils = require('website.utils');
 require('website.s_popup_options');
+const weWidgets = require('wysiwyg.widgets');
 
 var _t = core._t;
 var qweb = core.qweb;
@@ -2588,6 +2589,37 @@ options.registry.ScrollButton = options.Class.extend({
     },
 });
 
+/**
+ * Allows for images to be replaced.
+ */
+options.registry.ReplaceImage = options.Class.extend({
+    /**
+     * @override
+     */
+    start: function () {
+        const $button = this.$el.find('we-button');
+        const $overlayArea = this.$overlay.find('.oe_snippet_remove');
+        $button.insertBefore($overlayArea);
+
+        return this._super(...arguments);
+    },
+    
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Replaces the image.
+     *
+     * @see this.selectClass for parameters
+     */
+    replaceImage: async function () {
+        // TODO: simulates a double click on an image from summernote,
+        // to be refactored when the new editor is merged
+        this.$target.dblclick();
+    },
+});
+
 return {
     UrlPickerUserValueWidget: UrlPickerUserValueWidget,
     FontFamilyPickerUserValueWidget: FontFamilyPickerUserValueWidget,

addons/website/views/snippets/snippets.xml

@@ -437,6 +437,11 @@
         <we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true" data-name="move_right_opt"/>
     </div>
 
+    <!-- Replace an image -->
+    <div data-js="ReplaceImage" data-selector="img">
+        <we-button class="fa fa-refresh" data-replace-image="true" data-no-preview="true"/>
+    </div>
+
     <!-- Background -->
     <t t-set="only_bg_color_selector" t-value="'section .row > div, .s_text_highlight'"/>
     <t t-set="only_bg_color_exclude" t-value="'.s_col_no_bgcolor, .s_col_no_bgcolor.row > div, .s_masonry_block .row > div, .s_color_blocks_2 .row > div, .o_mega_menu .row > div, .s_image_gallery .row > div'"/>