[FIX] website: properly switch language while in edit mode

Before this commit, switching languages from the language dropdown while
in edit/translate mode was broken.

Now, the click event on this dropdown is listened alongside links with
external redirection from the WebsitePreview client action, so that the
client action leaves the edit mode while frontend is redirected to the
right language.

For that, a new leaveEditMode method is added to the website service,
which removes the edition classes and unmounts the Editor component.
This will further be reviewed in future commits.

Also, adding a new language from the language switcher dropdown directly
opens the wizard in a dialog on top of the WebsitePreview client action.

Follows the merge of the "website in backend" task at [1].

[1]: https://github.com/odoo/odoo/commit/31cc10b91dc7762e23b4bde9b945be0c4ce3fe3b

task-2687506

Part-of: odoo/odoo#81485

addons/website/static/src/client_actions/website_preview/website_preview.js

@@ -52,6 +52,8 @@ export class WebsitePreview extends Component {
         this.dialogService = useService('dialog');
         this.title = useService('title');
         this.user = useService('user');
+        this.router = useService('router');
+        this.action = useService('action');
 
         this.iframeFallbackUrl = '/website/iframefallback';
 
@@ -212,7 +214,8 @@ export class WebsitePreview extends Component {
         // The clicks on the iframe are listened, so that links with external
         // redirections can be opened in the top window.
         this.iframe.el.contentDocument.addEventListener('click', (ev) => {
-            if (!this.websiteContext.edition) {
+            const isEditing = this.websiteContext.edition || this.websiteContext.translation;
+            if (!isEditing) {
                 // Forward clicks to close backend client action's navbar
                 // dropdowns.
                 this.iframe.el.dispatchEvent(new MouseEvent('click', ev));
@@ -223,11 +226,26 @@ export class WebsitePreview extends Component {
                 return;
             }
 
-            const { href, target } = linkEl;
-            if (href && target !== '_blank' && !this.websiteContext.edition && this._isTopWindowURL(linkEl)) {
+            const { href, target, classList } = linkEl;
+            if (classList.contains('o_add_language')) {
                 ev.preventDefault();
-                ev.stopPropagation();
-                window.location.replace(href);
+                this.action.doAction('base.action_view_base_language_install', {
+                    target: 'new',
+                    additionalContext: {
+                        params: {
+                            website_id: this.websiteId,
+                            url_return: '/[lang]',
+                        },
+                    },
+                });
+            } else if (classList.contains('js_change_lang') && isEditing) {
+                ev.preventDefault();
+                // The switch to the right language is handled by the
+                // Website Root, inside the iframe.
+                this.websiteService.leaveEditMode();
+            } else if (href && target !== '_blank' && !isEditing && this._isTopWindowURL(linkEl)) {
+                ev.preventDefault();
+                this.router.redirect(href);
             }
         });
         this.iframe.el.contentDocument.addEventListener('keydown', ev => {

addons/website/static/src/services/website_service.js

@@ -192,7 +192,17 @@ export const websiteService = {
             },
             unblockIframe() {
                 bus.trigger('UNBLOCK');
-            }
+            },
+            leaveEditMode() {
+                // FIXME this does not care about if the page is dirty or not.
+
+                // TODO this should not be needed here, the one who was in
+                // charge of adding this class should be the one in charge of
+                // removing it.
+                document.body.classList.remove('editor_has_snippets');
+                context.snippetsLoaded = false;
+                context.edition = false;
+            },
         };
     },
 };

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

@@ -53,7 +53,7 @@ wTourUtils.registerEditionTour('rte_translator', {
 }, {
     content: "Open new page menu",
     trigger: ".o_menu_systray .o_new_content_container > a",
-    extra_trigger: '.o_edit_website_container > a',
+    extra_trigger: 'iframe html[lang*="en-US"]',
     consumeVisibleOnly: true,
 }, {
     content: "click on new page",