[IMP] web_editor, *: introduce wysiwyg frontend loader

* website_forum, website_profile

- Share some code between website_forum and website_profile by exposing
  a function in web_editor to instantiate a wysiwyg instance on a
  textarea

- Use no-lazy loaded JS to add a visual loading effect while the
  wysiwyg is not yet available.

This is made in preparation of task-2024197
(see https://github.com/odoo/odoo/pull/35749)

Thanks to @stefanorigano

closes odoo/odoo#36581

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

1 files changed, 11 insertions, 8 deletions

diff --git a/addons/website_profile/static/src/js/website_profile.js b/addons/website_profile/static/src/js/website_profile.js
index b78d2ed9f06..8030d06f0fe 100644
--- a/addons/website_profile/static/src/js/website_profile.js
+++ b/addons/website_profile/static/src/js/website_profile.js
@@ -2,7 +2,8 @@ odoo.define('website_profile.website_profile', function (require) {
 'use strict';
 
 var publicWidget = require('web.public.widget');
-var Wysiwyg = require('web_editor.wysiwyg.root');
+var wysiwygLoader = require('web_editor.loader');
+
 publicWidget.registry.websiteProfile = publicWidget.Widget.extend({
     selector: '.o_wprofile_email_validation_container',
     read_events: {
@@ -58,19 +59,19 @@ publicWidget.registry.websiteProfileEditor = publicWidget.Widget.extend({
         if (this.editableMode) {
             return def;
         }
-        var $textarea = this.$('textarea.load_editor');
-        var wysiwyg = new Wysiwyg(this, {
+
+        var $textarea = this.$('textarea.o_wysiwyg_loader');
+        var loadProm = wysiwygLoader.load(this, $textarea[0], {
             recordInfo: {
                 context: this._getContext(),
                 res_model: 'res.users',
                 res_id: parseInt(this.$('input[name=user_id]').val()),
             },
+        }).then(wysiwyg => {
+            this._wysiwyg = wysiwyg;
         });
 
-        if (!$textarea.val().match(/\S/)) {
-            $textarea.val('<p><br/></p>');
-        }
-        return Promise.all([def, wysiwyg.attachTo($textarea)]);
+        return Promise.all([def, loadProm]);
     },
 
     //--------------------------------------------------------------------------
@@ -118,7 +119,9 @@ publicWidget.registry.websiteProfileEditor = publicWidget.Widget.extend({
      * @private
      */
     _onSubmitClick: function () {
-        this.$('textarea.load_editor').data('wysiwyg').save();
+        if (this._wysiwyg) {
+            this._wysiwyg.save();
+        }
     },
 });