[FIX] web_editor: ensure correct root for wysiwyg in iframe

Since the migration to Owl, the root of wysiwyg has been wrongly set.
First, in renderElement, wysiwyg creates an editable element, which it
sets as its $root and $el elements. Then in startEdition, wysiwyg_iframe
creates a new editable element that it puts in an iframe appended to the
$el element. It then failed to change the $root element to that new
editable instead. Since we have a new editable element, the old one
should also not be contenteditable=true.

Because the $root element was wrong (and outside the iframe), all
listeners on it failed, with the effect that at least the link tools and
link popover were broken.

closes odoo/odoo#108186

X-original-commit: 86a8b31879b153bb53249fabfab47d254159effa
Signed-off-by: David Monjoie (dmo) <dmo@odoo.com>

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

@@ -736,7 +736,7 @@ const Wysiwyg = Widget.extend({
         if ($wrapwrap.length) {
             $('#wrapwrap')[0].removeEventListener('scroll', this.odooEditor.multiselectionRefresh, { passive: true });
         }
-        $(this.$root).off('mousedown');
+        $(this.$root).off('click');
         if (this.linkPopover) {
             this.linkPopover.hide();
         }
@@ -759,7 +759,7 @@ const Wysiwyg = Widget.extend({
         // We add the field's name as id so default_focus will target it if
         // needed. For that to work, it has to already be editable but note that
         // the editor is at this point not yet instantiated.
-        if (typeof this.options.fieldId !== 'undefined') {
+        if (typeof this.options.fieldId !== 'undefined' && !this.options.inIframe) {
             this.$editable.attr('id', this.options.fieldId);
             this.$editable.attr('contenteditable', true);
         }

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

@@ -84,8 +84,12 @@ Wysiwyg.include({
      */
     _loadIframe: function () {
         var self = this;
+        const isEditableRoot = this.$editable === this.$root;
         this.$editable = $('<div class="note-editable oe_structure odoo-editor-editable"></div>');
         this.$el.removeClass('note-editable oe_structure odoo-editor-editable');
+        if (isEditableRoot) {
+            this.$root = this.$editable;
+        }
         this.$iframe = $('<iframe class="wysiwyg_iframe o_iframe">').css({
             'min-height': '55vh',
             width: '100%'