Fixes #3340 Save unsent messages when switching chats

Author: jcbrand

karma.conf.js

@@ -85,6 +85,7 @@ module.exports = function(config) {
       { pattern: "src/plugins/muc-views/tests/csn.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/deprecated-retractions.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/disco.js", type: 'module' },
+      { pattern: "src/plugins/muc-views/tests/drafts.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/emojis.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/hats.js", type: 'module' },
       { pattern: "src/plugins/muc-views/tests/http-file-upload.js", type: 'module' },

src/plugins/chatview/message-form.js

@@ -25,6 +25,13 @@ export default class MessageForm extends CustomElement {
         await this.model.initialized;
         this.listenTo(this.model.messages, "change:correcting", this.onMessageCorrecting);
         this.listenTo(this.model, "change:composing_spoiler", () => this.requestUpdate());
+        this.listenTo(this.model, "change:hidden", () => {
+            if (this.model.get('hidden')) {
+                const draft_hint = /** @type {HTMLInputElement} */ (this.querySelector(".spoiler-hint"))?.value;
+                const draft_message = /** @type {HTMLTextAreaElement} */ (this.querySelector(".chat-textarea"))?.value;
+                u.safeSave(this.model, { draft: draft_message, draft_hint });
+            }
+        });
 
         this.handleEmojiSelection = (/** @type { CustomEvent } */ { detail }) => {
             if (this.model.get("jid") === detail.jid) {

src/plugins/chatview/templates/message-form.js

@@ -1,5 +1,5 @@
 import { __ } from "i18n";
-import { api } from "@converse/headless";
+import { api, u } from "@converse/headless";
 import { html } from "lit";
 import { resetElementHeight } from "../utils.js";
 
@@ -16,10 +16,11 @@ export default (el) => {
     const show_send_button = api.settings.get("show_send_button");
     const show_spoiler_button = api.settings.get("visible_toolbar_buttons").spoiler;
     const show_toolbar = api.settings.get("show_toolbar");
-    const hint_value = /** @type {HTMLInputElement} */ (el.querySelector(".spoiler-hint"))?.value;
-    const message_value = /** @type {HTMLTextAreaElement} */ (el.querySelector(".chat-textarea"))?.value;
 
-    return html` <form class="chat-message-form" @submit="${/** @param {SubmitEvent} ev */ (ev) => el.onFormSubmitted(ev)}">
+    return html` <form
+        class="chat-message-form"
+        @submit="${/** @param {SubmitEvent} ev */ (ev) => el.onFormSubmitted(ev)}"
+    >
         ${show_toolbar
             ? html` <converse-chat-toolbar
                   class="btn-toolbar chat-toolbar no-text-select"
@@ -38,22 +39,26 @@ export default (el) => {
             type="text"
             enterkeyhint="send"
             placeholder="${label_spoiler_hint || ""}"
-            value="${hint_value || ""}"
+            .value="${el.model.get("draft_hint") ?? ""}"
+            @change="${
+                /** @param {Event} ev */ (ev) =>
+                    u.safeSave(el.model, { draft_hint: /** @type {HTMLInputElement} */ (ev.target).value })
+            }"
             class="${composing_spoiler ? "" : "hidden"} spoiler-hint"
         />
         <textarea
             autofocus
             type="text"
             enterkeyhint="send"
-            .value="${message_value || ""}"
+            .value="${el.model.get("draft") ?? ""}"
             @drop="${/** @param {DragEvent} ev */ (ev) => el.onDrop(ev)}"
             @input="${resetElementHeight}"
             @keydown="${/** @param {KeyboardEvent} ev */ (ev) => el.onKeyDown(ev)}"
             @keyup="${/** @param {KeyboardEvent} ev */ (ev) => el.onKeyUp(ev)}"
             @paste="${/** @param {ClipboardEvent} ev */ (ev) => el.onPaste(ev)}"
             @change="${
                 /** @param {Event} ev */ (ev) =>
-                    el.model.set({ draft: /** @type {HTMLTextAreaElement} */ (ev.target).value })
+                    u.safeSave(el.model, { draft: /** @type {HTMLTextAreaElement} */ (ev.target).value })
             }"
             class="chat-textarea
                         ${show_send_button ? "chat-textarea-send-button" : ""}

src/plugins/chatview/tests/spoilers.js

@@ -201,4 +201,45 @@ describe("A spoiler message", function () {
         spoiler_toggle.click();
         await u.waitUntil(() => Array.from(spoiler_msg_el.classList).includes('hidden'));
     }));
+
+    it("can be saved as an unsent draft",
+            mock.initConverse(['chatBoxesFetched'], { ...settings, view_mode: 'fullscreen' }, async (_converse) => {
+
+        const { api } = _converse;
+        await mock.waitForRoster(_converse, 'current', 2);
+        mock.openControlBox(_converse);
+        const contact1_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+        const contact2_jid = mock.cur_names[1].replace(/ /g,'.').toLowerCase() + '@montague.lit';
+
+        // XXX: We need to send a presence from the contact, so that we
+        // have a resource, that resource is then queried to see
+        // whether Strophe.NS.SPOILER is supported, in which case
+        // the spoiler button will appear.
+        const presence = stx`<presence xmlns="jabber:client" from="${contact1_jid}/phone" to="[email protected]"/>`;
+        api.connection.get()._dataRecv(mock.createRequest(presence));
+
+        await mock.openChatBoxFor(_converse, contact1_jid);
+        await mock.waitUntilDiscoConfirmed(_converse, contact1_jid+'/phone', [], [Strophe.NS.SPOILER]);
+        const view = _converse.chatboxviews.get(contact1_jid);
+        spyOn(api.connection.get(), 'send');
+
+        await u.waitUntil(() => view.querySelector('.toggle-compose-spoiler'));
+        let spoiler_toggle = view.querySelector('.toggle-compose-spoiler');
+        spoiler_toggle.click();
+
+        let hint_input = view.querySelector('.spoiler-hint');
+        hint_input.value = 'This is the hint';
+
+        let textarea = view.querySelector('.chat-textarea');
+        textarea.value = 'This is the spoiler';
+
+        await mock.openChatBoxFor(_converse, contact2_jid);
+        await mock.openChatBoxFor(_converse, contact1_jid);
+
+        hint_input = view.querySelector('.spoiler-hint');
+        expect(hint_input.value).toBe('This is the hint');
+
+        textarea = view.querySelector('.chat-textarea');
+        expect(textarea.value).toBe('This is the spoiler');
+    }));
 });

src/plugins/muc-views/styles/muc.scss

@@ -95,6 +95,7 @@
                 .chat-info {
                     color: var(--info-color);
                     line-height: normal;
+                    margin-bottom: 0.3em;
                     &.badge {
                         color: var(--muc-color);
                     }

src/plugins/muc-views/templates/message-form.js

@@ -1,5 +1,5 @@
 import { __ } from "i18n";
-import { api } from "@converse/headless";
+import { api, u } from "@converse/headless";
 import { html } from "lit";
 import { resetElementHeight } from "plugins/chatview/utils.js";
 
@@ -16,12 +16,10 @@ export default (el) => {
     const show_send_button = api.settings.get("show_send_button");
     const show_spoiler_button = api.settings.get("visible_toolbar_buttons").spoiler;
     const show_toolbar = api.settings.get("show_toolbar");
-    const hint_value = /** @type {HTMLInputElement} */ (el.querySelector(".spoiler-hint"))?.value;
-    const message_value = /** @type {HTMLInputElement} */ (el.querySelector(".chat-textarea"))?.value;
     return html` <form class="setNicknameButtonForm hidden">
             <input type="submit" class="btn btn-primary" name="join" value="Join" />
         </form>
-        <form class="chat-message-form" @submit=${(ev) => el.onFormSubmitted(ev)}>
+        <form class="chat-message-form" @submit="${/** @param {SubmitEvent} ev */ (ev) => el.onFormSubmitted(ev)}">
             ${show_toolbar
                 ? html` <converse-chat-toolbar
                       class="btn-toolbar chat-toolbar no-text-select"
@@ -40,27 +38,33 @@ export default (el) => {
             <input
                 type="text"
                 placeholder="${label_spoiler_hint || ""}"
-                value="${hint_value || ""}"
+                .value="${el.model.get("draft_hint") ?? ""}"
+                @change="${
+                    /** @param {Event} ev */ (ev) =>
+                        u.safeSave(el.model, { draft_hint: /** @type {HTMLInputElement} */ (ev.target).value })
+                }"
                 class="${composing_spoiler ? "" : "hidden"} spoiler-hint"
             />
             <div class="suggestion-box">
                 <ul class="suggestion-box__results suggestion-box__results--above" hidden=""></ul>
                 <textarea
                     autofocus
                     type="text"
-                    @drop=${(ev) => el.onDrop(ev)}
+                    .value="${el.model.get("draft") ?? ""}"
+                    @drop="${/** @param {DragEvent} ev */ (ev) => el.onDrop(ev)}"
                     @input=${resetElementHeight}
                     @keydown="${/** @param {KeyboardEvent} ev */ (ev) => el.onKeyDown(ev)}"
                     @keyup="${/** @param {KeyboardEvent} ev */ (ev) => el.onKeyUp(ev)}"
                     @paste="${/** @param {ClipboardEvent} ev */ (ev) => el.onPaste(ev)}"
-                    @change=${(ev) => el.model.set({ "draft": ev.target.value })}
+                    @change="${
+                        /** @param {Event} ev */ (ev) =>
+                            u.safeSave(el.model, { draft: /** @type {HTMLTextAreaElement} */ (ev.target).value })
+                    }"
                     class="chat-textarea suggestion-box__input
                         ${show_send_button ? "chat-textarea-send-button" : ""}
                         ${composing_spoiler ? "spoiler" : ""}"
                     placeholder="${label_message}"
-                >
-${message_value || ""}</textarea
-                >
+                ></textarea>
                 <span
                     class="suggestion-box__additions visually-hidden"
                     role="status"

src/plugins/muc-views/tests/drafts.js

@@ -0,0 +1,24 @@
+/*global mock, converse */
+const { u } = converse.env;
+
+describe("An unsent groupchat message", function () {
+    it(
+        "will be saved as a draft when switching chats",
+        mock.initConverse([], { view_mode: "fullscreen" }, async function (_converse) {
+            const muc1_jid = "[email protected]";
+            const muc2_jid = "[email protected]";
+
+            await mock.openAndEnterMUC(_converse, muc1_jid, "romeo");
+            const view = _converse.chatboxviews.get(muc1_jid);
+
+            const textarea = await u.waitUntil(() => view.querySelector(".chat-textarea"));
+            textarea.value = "This is an unsaved message";
+
+            await mock.openAndEnterMUC(_converse, muc2_jid, "romeo");
+
+            // Switch back to the room with the draft
+            document.querySelector(`converse-rooms-list li[data-room-jid="${muc1_jid}"] a`).click();
+            expect(view.querySelector(".chat-textarea").value).toBe("This is an unsaved message");
+        })
+    );
+});