Only clear textarea once message was sent

This now requires `sendMessage` to return a boolean to indicate success.
Disable the textarea while message is being sent.

css/converse.css

@@ -9583,6 +9583,8 @@ body.reset {
   font-size: var(--font-size);
   direction: ltr;
   z-index: 1031; }
+  #conversejs textarea:disabled {
+    background-color: #EEE !important; }
   #conversejs .nopadding {
     padding: 0 !important; }
   #conversejs.converse-overlayed > .row {

dist/converse.js

@@ -50200,27 +50200,6 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_5__["default"].plugins
         }
       },
 
-      onMessageSubmitted(text, spoiler_hint) {
-        /* This method gets called once the user has typed a message
-         * and then pressed enter in a chat box.
-         *
-         *  Parameters:
-         *    (String) text - The chat message text.
-         *    (String) spoiler_hint - A hint in case the message
-         *      text is a hidden/spoiler message. See XEP-0382
-         */
-        if (!_converse.connection.authenticated) {
-          return this.showHelpMessages(['Sorry, the connection has been lost, ' + 'and your message could not be sent'], 'error');
-        }
-
-        if (this.parseMessageForCommands(text)) {
-          return;
-        }
-
-        const attrs = this.model.getOutgoingMessageAttributes(text, spoiler_hint);
-        this.model.sendMessage(attrs);
-      },
-
       setChatState(state, options) {
         /* Mutator for setting the chat state of this chat session.
          * Handles clearing of any chat state notification timeouts and
@@ -50247,7 +50226,7 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_5__["default"].plugins
         return this;
       },
 
-      onFormSubmitted(ev) {
+      async onFormSubmitted(ev) {
         ev.preventDefault();
         const textarea = this.el.querySelector('.chat-textarea'),
               message = textarea.value;
@@ -50256,26 +50235,37 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_5__["default"].plugins
           return;
         }
 
-        let spoiler_hint;
+        if (!_converse.connection.authenticated) {
+          this.showHelpMessages(['Sorry, the connection has been lost, and your message could not be sent'], 'error');
+          return;
+        }
+
+        let spoiler_hint,
+            hint_el = {};
 
         if (this.model.get('composing_spoiler')) {
-          const hint_el = this.el.querySelector('form.sendXMPPMessage input.spoiler-hint');
+          hint_el = this.el.querySelector('form.sendXMPPMessage input.spoiler-hint');
           spoiler_hint = hint_el.value;
-          hint_el.value = '';
         }
 
-        textarea.value = '';
-        _converse_headless_utils_emoji__WEBPACK_IMPORTED_MODULE_21__["default"].removeClass('correcting', textarea);
-        textarea.focus(); // Trigger input event, so that the textarea resizes
+        _converse_headless_utils_emoji__WEBPACK_IMPORTED_MODULE_21__["default"].addClass('disabled', textarea);
+        textarea.setAttribute('disabled', 'disabled');
 
-        const event = document.createEvent('Event');
-        event.initEvent('input', true, true);
-        textarea.dispatchEvent(event);
-        this.onMessageSubmitted(message, spoiler_hint);
+        if (this.parseMessageForCommands(message) || (await this.model.sendMessage(this.model.getOutgoingMessageAttributes(message, spoiler_hint)))) {
+          hint_el.value = '';
+          textarea.value = '';
+          _converse_headless_utils_emoji__WEBPACK_IMPORTED_MODULE_21__["default"].removeClass('correcting', textarea);
+          textarea.focus(); // Trigger input event, so that the textarea resizes
 
-        _converse.emit('messageSend', message); // Suppress events, otherwise superfluous CSN gets set
-        // immediately after the message, causing rate-limiting issues.
+          const event = document.createEvent('Event');
+          event.initEvent('input', true, true);
+          textarea.dispatchEvent(event);
+
+          _converse.emit('messageSend', message);
+        }
 
+        textarea.removeAttribute('disabled'); // Suppress events, otherwise superfluous CSN gets set
+        // immediately after the message, causing rate-limiting issues.
 
         this.setChatState(_converse.ACTIVE, {
           'silent': true
@@ -56296,7 +56286,11 @@ _converse_headless_converse_core__WEBPACK_IMPORTED_MODULE_0__["default"].plugins
             });
 
             _converse.log(e, Strophe.LogLevel.ERROR);
+
+            return false;
           }
+
+          return true;
         } else {
           return this.__super__.sendMessage.apply(this, arguments);
         }
@@ -61901,7 +61895,8 @@ _converse_core__WEBPACK_IMPORTED_MODULE_2__["default"].plugins.add('converse-cha
           message = this.messages.create(attrs);
         }
 
-        return this.sendMessageStanza(this.createMessageStanza(message));
+        this.sendMessageStanza(this.createMessageStanza(message));
+        return true;
       },
 
       sendChatState() {

sass/_core.scss

@@ -115,6 +115,10 @@ body.reset {
     direction: ltr;
     z-index: 1031; // One more than bootstrap navbar
 
+    textarea:disabled {
+        background-color: #EEE !important;
+    }
+
     .nopadding {
         padding: 0 !important;
     }

spec/chatbox.js

@@ -284,7 +284,7 @@
                 done();
             }));
 
-            it("can be closed by clicking a DOM element with class 'close-chatbox-button'",
+           it("can be closed by clicking a DOM element with class 'close-chatbox-button'",
                 mock.initConverseWithPromises(
                     null, ['rosterGroupsFetched', 'chatBoxesFetched'], {},
                     async function (done, _converse) {
@@ -1024,21 +1024,23 @@
                 await test_utils.openChatBoxFor(_converse, contact_jid);
                 const view = _converse.chatboxviews.get(contact_jid);
                 let message = 'This message is another sent from this chatbox';
-                // Lets make sure there is at least one message already
-                // (e.g for when this test is run on its own).
-                test_utils.sendMessage(view, message);
+                await test_utils.sendMessage(view, message);
+
                 expect(view.model.messages.length > 0).toBeTruthy();
                 expect(view.model.messages.browserStorage.records.length > 0).toBeTruthy();
-                expect(_converse.emit).toHaveBeenCalledWith('messageSend', message);
+                await test_utils.waitUntil(() => view.el.querySelector('.chat-msg'));
 
                 message = '/clear';
-                spyOn(view, 'onMessageSubmitted').and.callThrough();
                 spyOn(view, 'clearMessages').and.callThrough();
                 spyOn(window, 'confirm').and.callFake(function () {
                     return true;
                 });
-                test_utils.sendMessage(view, message);
-                expect(view.onMessageSubmitted).toHaveBeenCalled();
+                view.el.querySelector('.chat-textarea').value = message;
+                view.keyPressed({
+                    target: view.el.querySelector('textarea.chat-textarea'),
+                    preventDefault: _.noop,
+                    keyCode: 13
+                });
                 expect(view.clearMessages).toHaveBeenCalled();
                 expect(window.confirm).toHaveBeenCalled();
                 expect(view.model.messages.length, 0); // The messages must be removed from the chatbox

spec/spoilers.js

@@ -102,7 +102,6 @@
             await test_utils.openChatBoxFor(_converse, contact_jid);
             await test_utils.waitUntilDiscoConfirmed(_converse, contact_jid+'/phone', [], [Strophe.NS.SPOILER]);
             const view = _converse.chatboxviews.get(contact_jid);
-            spyOn(view, 'onMessageSubmitted').and.callThrough();
             spyOn(_converse.connection, 'send');
 
             await test_utils.waitUntil(() => view.el.querySelector('.toggle-compose-spoiler'));
@@ -116,7 +115,6 @@
                 preventDefault: _.noop,
                 keyCode: 13
             });
-            expect(view.onMessageSubmitted).toHaveBeenCalled();
             await new Promise((resolve, reject) => view.once('messageInserted', resolve));
 
             /* Test the XML stanza 
@@ -184,7 +182,6 @@
             let spoiler_toggle = view.el.querySelector('.toggle-compose-spoiler');
             spoiler_toggle.click();
 
-            spyOn(view, 'onMessageSubmitted').and.callThrough();
             spyOn(_converse.connection, 'send');
 
             const textarea = view.el.querySelector('.chat-textarea');
@@ -197,7 +194,6 @@
                 preventDefault: _.noop,
                 keyCode: 13
             });
-            expect(view.onMessageSubmitted).toHaveBeenCalled();
             await new Promise((resolve, reject) => view.once('messageInserted', resolve));
 
             /* Test the XML stanza 

src/converse-chatview.js

@@ -818,29 +818,6 @@ converse.plugins.add('converse-chatview', {
                 }
             },
 
-            onMessageSubmitted (text, spoiler_hint) {
-                /* This method gets called once the user has typed a message
-                 * and then pressed enter in a chat box.
-                 *
-                 *  Parameters:
-                 *    (String) text - The chat message text.
-                 *    (String) spoiler_hint - A hint in case the message
-                 *      text is a hidden/spoiler message. See XEP-0382
-                 */
-                if (!_converse.connection.authenticated) {
-                    return this.showHelpMessages(
-                        ['Sorry, the connection has been lost, '+
-                            'and your message could not be sent'],
-                        'error'
-                    );
-                }
-                if (this.parseMessageForCommands(text)) {
-                    return;
-                }
-                const attrs = this.model.getOutgoingMessageAttributes(text, spoiler_hint);
-                this.model.sendMessage(attrs);
-            },
-
             setChatState (state, options) {
                 /* Mutator for setting the chat state of this chat session.
                  * Handles clearing of any chat state notification timeouts and
@@ -873,7 +850,7 @@ converse.plugins.add('converse-chatview', {
                 return this;
             },
 
-            onFormSubmitted (ev) {
+            async onFormSubmitted (ev) {
                 ev.preventDefault();
                 const textarea = this.el.querySelector('.chat-textarea'),
                       message = textarea.value;
@@ -881,22 +858,34 @@ converse.plugins.add('converse-chatview', {
                 if (!message.replace(/\s/g, '').length) {
                     return;
                 }
-                let spoiler_hint;
+                if (!_converse.connection.authenticated) {
+                    this.showHelpMessages(
+                        ['Sorry, the connection has been lost, and your message could not be sent'],
+                        'error'
+                    );
+                    return;
+                }
+                let spoiler_hint, hint_el = {};
                 if (this.model.get('composing_spoiler')) {
-                    const hint_el = this.el.querySelector('form.sendXMPPMessage input.spoiler-hint');
+                    hint_el = this.el.querySelector('form.sendXMPPMessage input.spoiler-hint');
                     spoiler_hint = hint_el.value;
-                    hint_el.value = '';
                 }
-                textarea.value = '';
-                u.removeClass('correcting', textarea);
-                textarea.focus();
-                // Trigger input event, so that the textarea resizes
-                const event = document.createEvent('Event');
-                event.initEvent('input', true, true);
-                textarea.dispatchEvent(event);
+                u.addClass('disabled', textarea);
+                textarea.setAttribute('disabled', 'disabled');
+                if (this.parseMessageForCommands(message) ||
+                    await this.model.sendMessage(this.model.getOutgoingMessageAttributes(message, spoiler_hint))) {
 
-                this.onMessageSubmitted(message, spoiler_hint);
-                _converse.emit('messageSend', message);
+                    hint_el.value = '';
+                    textarea.value = '';
+                    u.removeClass('correcting', textarea);
+                    textarea.focus();
+                    // Trigger input event, so that the textarea resizes
+                    const event = document.createEvent('Event');
+                    event.initEvent('input', true, true);
+                    textarea.dispatchEvent(event);
+                    _converse.emit('messageSend', message);
+                }
+                textarea.removeAttribute('disabled');
                 // Suppress events, otherwise superfluous CSN gets set
                 // immediately after the message, causing rate-limiting issues.
                 this.setChatState(_converse.ACTIVE, {'silent': true});

src/converse-omemo.js

@@ -326,7 +326,9 @@ converse.plugins.add('converse-omemo', {
                             'type': 'error',
                         });
                         _converse.log(e, Strophe.LogLevel.ERROR);
+                        return false;
                     }
+                    return true;
                 } else {
                     return this.__super__.sendMessage.apply(this, arguments);
                 }

src/headless/converse-chatboxes.js

@@ -433,7 +433,8 @@ converse.plugins.add('converse-chatboxes', {
                 } else {
                     message = this.messages.create(attrs);
                 }
-                return this.sendMessageStanza(this.createMessageStanza(message));
+                this.sendMessageStanza(this.createMessageStanza(message));
+                return true;
             },
 
             sendChatState () {