From 8423c0dd9030225c7bd168f7fa2b3fde87176ee1 Mon Sep 17 00:00:00 2001
From: Benjamin Vray <bvr@odoo.com>
Date: Wed, 12 Jul 2023 13:00:05 +0000
Subject: [PATCH] [FIX] web_editor, website: fix image link option broken

Since this commit [1], when clicking on an image that is not a link and
then clicking on an image that is a link, the first image that is not a
link becomes a link.

This issue occurred because we were triggering
'activate_image_link_tool' in 'toggleLinkTools' before the options for
the selected image were ready. As a result, 'activate_image_link_tool'
was being triggered on the previous image (the one that is not a link),
causing it to become a link.

To fix this, we now only trigger 'activate_image_link_tool' if the URL
input needs to be focused (e.g., when clicking on the "edit link" button
in the image popover).

Steps to reproduce the bug:
- Drag and drop a "Columns" Snippet onto the page.
- Click on the image of the first column.
- Click on the button to create a link in the options of the image.
- Type "/" in the url input.
- Click on the image of the second column.
- Click on the image of the first column.
- Click on the image of the second column.
- Bug: a link is added on the image of the second column.

This commit also modifies the "link_tools" test to avoid this bug
reappears.

[1]: https://github.com/odoo/odoo/commit/11ee7d5520c3a14a381b3f5b973114670f1e2edb

task-3422238

closes odoo/odoo#128806

X-original-commit: fef32aa339177a2ca008ab988cb0ac0a670c110c
Signed-off-by: Benoit Socias (bso) <bso@odoo.com>
---
 .../static/src/js/wysiwyg/wysiwyg.js          | 10 +++++++---
 .../website/static/tests/tours/link_tools.js  | 19 ++++++++++++++-----
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index 5376dc51341..351afe3e3d0 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -1173,10 +1173,14 @@ const Wysiwyg = Widget.extend({
                     !options.link.textContent.trim() && wysiwygUtils.isImg(this.lastElement)) {
                 // If the link contains a media without text, the link is
                 // editable in the media options instead.
-                this.snippetsMenu._mutex.exec(() => {
+                if (!options.noFocusUrl) {
                     // Wait for the editor panel to be fully updated.
-                    core.bus.trigger('activate_image_link_tool');
-                });
+                    this.snippetsMenu._mutex.exec(() => {
+                        // This is needed to focus the URL input when clicking
+                        // on the "Edit link" of the popover.
+                        core.bus.trigger('activate_image_link_tool');
+                    });
+                }
                 return;
             }
             if (options.forceOpen || !this.linkTools) {
diff --git a/addons/website/static/tests/tours/link_tools.js b/addons/website/static/tests/tours/link_tools.js
index 98d6d76c40c..211fab1ae4e 100644
--- a/addons/website/static/tests/tours/link_tools.js
+++ b/addons/website/static/tests/tours/link_tools.js
@@ -101,9 +101,13 @@ wTourUtils.registerWebsitePreviewTour('link_tools', {
     },
     // 4. Add link on image.
     ...wTourUtils.clickOnEditAndWaitEditMode(),
+    wTourUtils.dragNDrop({
+        id: 's_three_columns',
+        name: 'Columns',
+    }),
     {
-        content: "Click on image.",
-        trigger: 'iframe .s_text_image img',
+        content: "Click on the first image.",
+        trigger: 'iframe .s_three_columns .row > :nth-child(1) img',
     },
     {
         content: "Activate link.",
@@ -116,11 +120,16 @@ wTourUtils.registerWebsitePreviewTour('link_tools', {
     },
     {
         content: "Deselect image.",
-        trigger: 'iframe .s_text_image p',
+        trigger: 'iframe .s_three_columns .row > :nth-child(2) img',
     },
     {
         content: "Re-select image.",
-        trigger: 'iframe .s_text_image img',
+        trigger: 'iframe .s_three_columns .row > :nth-child(1) img',
+    },
+    {
+        content: "Check that the second image is not within a link.",
+        trigger: 'iframe .s_three_columns .row > :nth-child(2) div > img',
+        run: () => {}, // It's a check.
     },
     {
         content: "Check that link tools appear.",
@@ -134,7 +143,7 @@ wTourUtils.registerWebsitePreviewTour('link_tools', {
     },
     {
         content: "Check that image is not within a link anymore.",
-        trigger: 'iframe .s_text_image div > img',
+        trigger: 'iframe .s_three_columns .row > :nth-child(1) div > img',
         run: () => {}, // It's a check.
     },
     // 6. Add mega menu with Cards template and edit URL on text-selected card.