[FIX] web_editor, website: fix existing links edition via link tools

Before this commit, there was an issue with the edition of links that
were already in the page, via the link tools.
1/ In edit mode, drag and drop the s_image_text snippet and save,
2/ Click on edit, click on the "learn more" button,
3/ From the link tools, change the style to secondary,
4/ Click on save again, the button is still styled with as primary.

[1] added a history step to the link creation via the link tools. As the
editor observer is set to unactive at the start of the link tools, the
changes made to the link with the link tools were not processed by the
EditPageMenu observer, and the block was not set as .o_dirty (the
changes were therefore not saved).

This bug was hidden by our use of bootstrap popovers. The
aria-describedby attribute, managed by bootstrap when showing/hiding a
popover, would be recorded as a change from the EditPageMenu observer,
which would set the view as dirty.
Also, changing any other element of the page would set the page as dirty
and hide the bug.

It only became visible when [2] changed the popover initialization from
'focus' to 'manual'. With that, the aria-describedby attribute was
modified inbetween the LinkTools.start and LinkTools.destroy (and was
therefore not recorded at the EditPageMenu level).

To record correctly the changes made from the link tools to the link, we
activate the editor observer when applying the changes to the DOM.

This commit also introduces some tests for the link tools.
The listener on customizable links from the wysiwyg was changed from
mousedown to click for simpler tests.

task-2680461

[1]: 6db6134f97
[2]: 161c5fc8e742294e8d85c889b4bf8d3d8cd484f5

closes odoo/odoo#80763

X-original-commit: c29fe9fa8fc8ff4a5e6f042607ef9b3070d1d339
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>

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

@@ -78,7 +78,9 @@ const LinkTools = Link.extend({
 
     applyLinkToDom() {
         this._observer.disconnect();
+        this.options.wysiwyg.odooEditor.observerActive();
         this._super(...arguments);
+        this.options.wysiwyg.odooEditor.observerUnactive();
         this._observer.observe(this._link, {subtree: true, childList: true, characterData: true});
     },
 

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

@@ -245,7 +245,7 @@ const Wysiwyg = Widget.extend({
         // Ensure the Toolbar always have the correct layout in note.
         this._updateEditorUI();
 
-        this.$root.on('mousedown', (ev) => {
+        this.$root.on('click', (ev) => {
             const $target = $(ev.target);
 
             // Keep popover open if clicked inside it, but not on a button

addons/website/static/tests/tours/link_tools.js

@@ -0,0 +1,69 @@
+/** @odoo-module */
+
+import tour from 'web_tour.tour';
+import wTourUtils from 'website.tour_utils';
+
+const clickOnImgStep = {
+    content: "Click somewhere else to save.",
+    trigger: '#wrap .s_text_image img',
+};
+
+tour.register('link_tools', {
+    test: true,
+    url: '/?enable_editor=1',
+}, [
+    // 1. Create a new link from scratch.
+    wTourUtils.dragNDrop({
+        id: 's_text_image',
+        name: 'Text - Image',
+    }),
+    {
+        content: "Replace first paragraph, to insert a new link",
+        trigger: '#wrap .s_text_image p',
+        run: 'text Go to odoo: '
+    },
+    {
+        content: "Open link tools",
+        trigger: "#toolbar #create-link",
+    },
+    {
+        content: "Type the link URL odoo.com",
+        trigger: '#o_link_dialog_url_input',
+        run: 'text odoo.com'
+    },
+    clickOnImgStep,
+    // 2. Edit the link with the link tools.
+    {
+        content: "Click on the newly created link, change content to odoo website",
+        trigger: '.s_text_image a[href="http://odoo.com"]:contains("odoo.com")',
+        run: 'text odoo website',
+    },
+    {
+        content: "Link tools, should be open, change the url",
+        trigger: '#o_link_dialog_url_input',
+        run: 'text odoo.be'
+    },
+    clickOnImgStep,
+    ...wTourUtils.clickOnSave(),
+    // 3. Edit a link after saving the page.
+    wTourUtils.clickOnEdit(),
+    {
+        content: "The new link content should be odoo website and url odoo.be",
+        extra_trigger: "#oe_snippets.o_loaded",
+        trigger: '.s_text_image a[href="http://odoo.be"]:contains("odoo website")',
+    },
+    {
+        content: "The new link content should be odoo website and url odoo.be",
+        trigger: '#toolbar button[data-original-title="Link Style"]',
+    },
+    {
+        content: "Click on the secondary style button.",
+        trigger: '#toolbar we-button[data-value="secondary"]',
+    },
+    ...wTourUtils.clickOnSave(),
+    {
+        content: "The link should have the secondary button style.",
+        trigger: '.s_text_image a.btn.btn-secondary[href="http://odoo.be"]:contains("odoo website")',
+        run: () => {}, // It's a check.
+    }
+]);

addons/website/tests/test_ui.py

@@ -275,3 +275,6 @@ class TestUi(odoo.tests.HttpCase):
 
     def test_14_carousel_snippet_content_removal(self):
         self.start_tour("/", "carousel_content_removal", login='admin')
+
+    def test_15_website_link_tools(self):
+        self.start_tour("/", "link_tools", login="admin")