From 64fb91ec01eadf573afda171f1c386055915b5ad Mon Sep 17 00:00:00 2001
From: Antoine Guenet <age@odoo.com>
Date: Tue, 17 May 2022 13:47:09 +0000
Subject: [PATCH] [FIX] web_editor: properly hide link tools on selection over
 blocks

When the user selects across several blocks, the link tools are supposed
to be hidden. This was however broken due to other mechanisms restoring
it after it got hidden.

task-2856858

Part-of: odoo/odoo#91314
---
 .../web_editor/static/src/js/wysiwyg/wysiwyg.js  | 16 +++++++++-------
 .../static/tests/tours/edit_link_popover.js      |  1 +
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
index e5878c674bd..83d3a514ba2 100644
--- a/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
+++ b/addons/web_editor/static/src/js/wysiwyg/wysiwyg.js
@@ -290,7 +290,7 @@ const Wysiwyg = Widget.extend({
         // _createPalette.
         this._configureToolbar(options);
 
-        $(this.odooEditor.editable).on('click', this._updateEditorUI.bind(this));
+        $(this.odooEditor.editable).on('mouseup', this._updateEditorUI.bind(this));
         $(this.odooEditor.editable).on('keydown', this._updateEditorUI.bind(this));
         $(this.odooEditor.editable).on('keydown', this._handleShortcuts.bind(this));
         // Ensure the Toolbar always have the correct layout in note.
@@ -1583,12 +1583,6 @@ const Wysiwyg = Widget.extend({
         const $target = e ? editorWindow.$(e.target) : editorWindow.$();
         // Restore paragraph dropdown button's default ID.
         this.toolbar.$el.find('#mediaParagraphDropdownButton').attr('id', 'paragraphDropdownButton');
-        // Hide the create-link button if the selection spans several blocks.
-        const selection = this.odooEditor.document.getSelection();
-        const range = selection.rangeCount && selection.getRangeAt(0);
-        const $rangeContainer = range && $(range.commonAncestorContainer);
-        const spansBlocks = range && !!$rangeContainer.contents().filter((i, node) => isBlock(node)).length;
-        this.toolbar.$el.find('#create-link').toggleClass('d-none', !range || spansBlocks);
         // Only show the media tools in the toolbar if the current selected
         // snippet is a media.
         const isInMedia = $target.is(mediaSelector) && !$target.parent().hasClass('o_stars');
@@ -1628,6 +1622,14 @@ const Wysiwyg = Widget.extend({
         // Some icons are relevant for icons, that aren't for other media.
         this.toolbar.$el.find('#colorInputButtonGroup, #create-link').toggleClass('d-none', isInMedia && !$target.is('.fa'));
         this.toolbar.$el.find('.only_fa').toggleClass('d-none', !$target.is('.fa'));
+        // Hide the create-link button if the selection spans several blocks.
+        const selection = this.odooEditor.document.getSelection();
+        const range = selection.rangeCount && selection.getRangeAt(0);
+        const $rangeContainer = range && $(range.commonAncestorContainer);
+        const spansBlocks = range && !!$rangeContainer.contents().filter((i, node) => isBlock(node)).length;
+        if (!range || spansBlocks) {
+            this.toolbar.$el.find('#create-link').toggleClass('d-none', true);
+        }
         // Toggle the toolbar arrow.
         this.toolbar.$el.toggleClass('noarrow', isInMedia);
         // Unselect all media.
diff --git a/addons/website/static/tests/tours/edit_link_popover.js b/addons/website/static/tests/tours/edit_link_popover.js
index a8f60a4cc20..d94bb55f179 100644
--- a/addons/website/static/tests/tours/edit_link_popover.js
+++ b/addons/website/static/tests/tours/edit_link_popover.js
@@ -42,6 +42,7 @@ tour.register('edit_link_popover', {
     {
         content: "Click on a paragraph",
         trigger: FIRST_PARAGRAPH,
+        run: 'text Paragraph', // Make sure the selection is set in the paragraph
     },
     {
         content: "Click on 'Link' to open Link Dialog",