Move `insertIntoTextarea` methods from view to bottom panel component

That way we further decouple the various components and make it easier
to use them indepenent of one another.

spec/chatbox.js

@@ -264,7 +264,7 @@ describe("Chatboxes", function () {
                 const toolbar = view.querySelector('.chat-toolbar');
                 const counter = toolbar.querySelector('.message-limit');
                 expect(counter.textContent).toBe('200');
-                view.insertIntoTextArea('hello world');
+                view.getBottomPanel().insertIntoTextArea('hello world');
                 expect(counter.textContent).toBe('188');
 
                 toolbar.querySelector('.toggle-emojis').click();

src/plugins/chatview/bottom_panel.js

@@ -15,10 +15,13 @@ export default class ChatBottomPanel extends ElementView {
         'click .toggle-clear': 'clearMessages',
     }
 
-    connectedCallback () {
+    async connectedCallback () {
         super.connectedCallback();
         this.model = _converse.chatboxes.get(this.getAttribute('jid'));
         this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
+
+        await this.model.initialized;
+        this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting);
         this.render();
     }
 
@@ -76,6 +79,19 @@ export default class ChatBottomPanel extends ElementView {
         this.renderToolbar();
     }
 
+    onMessageCorrecting (message) {
+        if (message.get('correcting')) {
+            this.insertIntoTextArea(u.prefixMentions(message), true, true);
+        } else {
+            const currently_correcting = this.model.messages.findWhere('correcting');
+            if (currently_correcting && currently_correcting !== message) {
+                this.insertIntoTextArea(u.prefixMentions(message), true, true);
+            } else {
+                this.insertIntoTextArea('', true, false);
+            }
+        }
+    }
+
     emitFocused (ev) {
         _converse.chatboxviews.get(this.getAttribute('jid'))?.emitFocused(ev);
     }

src/plugins/chatview/view.js

@@ -35,7 +35,6 @@ export default class ChatView extends BaseChatView {
         this.listenTo(_converse, 'windowStateChanged', this.onWindowStateChanged);
         this.listenTo(this.model, 'change:hidden', () => !this.model.get('hidden') && this.afterShown());
         this.listenTo(this.model, 'change:status', this.onStatusMessageChanged);
-        this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting);
         this.listenTo(this.model.presence, 'change:show', this.onPresenceChanged);
         this.render();
 

src/plugins/muc-views/bottom_panel.js

@@ -15,12 +15,10 @@ export default class MUCBottomPanel extends BottomPanel {
     }
 
     async connectedCallback () {
-        super.connectedCallback();
+        // this.model gets set in the super method and we also wait there for this.model.initialized
+        await super.connectedCallback();
         this.debouncedRender = debounce(this.render, 100);
-        this.model = _converse.chatboxes.get(this.getAttribute('jid'));
         this.listenTo(this.model, 'change:composing_spoiler', this.renderMessageForm);
-
-        await this.model.initialized;
         this.listenTo(this.model, 'change:hidden_occupants', this.debouncedRender);
         this.listenTo(this.model.features, 'change:moderated', this.debouncedRender);
         this.listenTo(this.model.occupants, 'add', this.renderIfOwnOccupant)

src/plugins/muc-views/muc.js

@@ -54,7 +54,6 @@ export default class MUCView extends BaseChatView {
         this.listenTo(this.model, 'change:minimized', () => this.afterShown());
         this.listenTo(this.model, 'configurationNeeded', this.getAndRenderConfigurationForm);
         this.listenTo(this.model, 'show', this.show);
-        this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting);
         this.listenTo(this.model.session, 'change:connection_status', this.renderAfterTransition);
 
         // Bind so that we can pass it to addEventListener and removeEventListener

src/shared/chat/baseview.js

@@ -152,46 +152,12 @@ export default class BaseChatView extends ElementView {
         }
     }
 
-    onEmojiReceivedFromPicker (emoji) {
-        const model = this.querySelector('converse-emoji-picker').model;
-        const autocompleting = model.get('autocompleting');
-        const ac_position = model.get('ac_position');
-        this.insertIntoTextArea(emoji, autocompleting, false, ac_position);
-    }
-
-    onMessageCorrecting (message) {
-        if (message.get('correcting')) {
-            this.insertIntoTextArea(u.prefixMentions(message), true, true);
-        } else {
-            const currently_correcting = this.model.messages.findWhere('correcting');
-            if (currently_correcting && currently_correcting !== message) {
-                this.insertIntoTextArea(u.prefixMentions(message), true, true);
-            } else {
-                this.insertIntoTextArea('', true, false);
-            }
-        }
-    }
-
-    /**
-     * Insert a particular string value into the textarea of this chat box.
-     * @private
-     * @method _converse.ChatBoxView#insertIntoTextArea
-     * @param {string} value - The value to be inserted.
-     * @param {(boolean|string)} [replace] - Whether an existing value
-     *  should be replaced. If set to `true`, the entire textarea will
-     *  be replaced with the new value. If set to a string, then only
-     *  that string will be replaced *if* a position is also specified.
-     * @param {integer} [position] - The end index of the string to be
-     * replaced with the new value.
-     */
-    insertIntoTextArea (value, replace = false, correcting = false, position) {
-        let bottom_panel;
+    getBottomPanel () {
         if (this.model.get('type') === _converse.CHATROOMS_TYPE) {
-            bottom_panel = this.querySelector('converse-muc-bottom-panel');
+            return this.querySelector('converse-muc-bottom-panel');
         } else {
-            bottom_panel = this.querySelector('converse-chat-bottom-panel');
+            return this.querySelector('converse-chat-bottom-panel');
         }
-        bottom_panel.insertIntoTextArea(value, replace, correcting, position);
     }
 
     /**

src/shared/chat/emoji-picker.js

@@ -148,7 +148,9 @@ export default class EmojiPicker extends CustomElement {
     }
 
     insertIntoTextArea (value) {
-        this.chatview.onEmojiReceivedFromPicker(value);
+        const autocompleting = this.model.get('autocompleting');
+        const ac_position = this.model.get('ac_position');
+        this.chatview.getBottomPanel().insertIntoTextArea(value, autocompleting, false, ac_position);
         this.model.set({'autocompleting': null, 'query': '', 'ac_position': null});
     }