[FIX] web_editor: handle default_focus form attribute for html_field

When rendering a form view that has a truthy `default_focus` attribute,
the renderer looks for the element in its tree that has its `name` as
`id`. However in the case of `html_field` it couldn't find it since
`html_field` failed to apply that `id` to its focusable element (the
editable root). This adds the `id` to the editable root when rendering
the element in `wysiwyg`, and also directly applies `contenteditable` to
it so the `focus` method actually does what we expect it to, even though
we are waiting for `HtmlFieldWysiwygAdapterComponent` to be mounted
before actually instantiating the editor itself.

task-3073096

X-original-commit: 7e14e2a9c055f5b30b7510ffad994fa10196e34d
Part-of: odoo/odoo#106622

addons/web_editor/static/src/js/backend/html_field.js

@@ -228,6 +228,7 @@ export class HtmlField extends Component {
                 res_model: this.props.record.resModel,
                 res_id: this.props.record.resId,
             },
+            fieldId: this.props.id,
         };
     }
     /**

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

@@ -759,6 +759,15 @@ const Wysiwyg = Widget.extend({
      */
     renderElement: function () {
         this.$editable = this.options.editable || $('<div class="note-editable">');
+
+        // 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') {
+            this.$editable.attr('id', this.options.fieldId);
+            this.$editable.attr('contenteditable', true);
+        }
+
         this.$root = this.$editable;
         if (this.options.height) {
             this.$editable.height(this.options.height);