Update css and keep input and textarea values across toggles

sass/_chatbox.scss

@@ -230,7 +230,8 @@
                 position: relative;
             }
         }
-        form.sendXMPPMessage {
+
+        .sendXMPPMessage {
             -moz-background-clip: padding;
             -webkit-background-clip: padding-box;
             @include border-bottom-radius($chatbox-border-radius);
@@ -248,9 +249,10 @@
             @media screen and (max-width: $mobile-portrait-length) {
                 width: 100%;
             }
-            .chat-textarea-hint {
+            .spoiler-hint {
                 width: 100%;
             }
+
             .chat-textarea {
                 @include border-bottom-radius($chatbox-border-radius);
                 border: 0;

src/converse-chatview.js

@@ -284,7 +284,9 @@
                             'label_send': __('Send'),
                             'show_send_button': _converse.show_send_button,
                             'show_textarea': true,
-                            'show_toolbar': _converse.show_toolbar
+                            'show_toolbar': _converse.show_toolbar,
+                            'hint_value': _.get(this.el.querySelector('.spoiler-hint'), 'value'),
+                            'message_value': _.get(this.el.querySelector('.chat-textarea'), 'value')
                         }));
                 },
 
@@ -784,9 +786,9 @@
                           .c(_converse.ACTIVE, {'xmlns': Strophe.NS.CHATSTATES}).up();
 
                     if (this.message_form_view.model.get('sending_spoiler')) {
-                        const has_hint = this.el.querySelector('.chat-textarea-hint').value.length > 0;
+                        const has_hint = this.el.querySelector('.spoiler-hint').value.length > 0;
                         if (has_hint) {
-                            const hint = document.querySelector('.chat-textarea-hint').value;
+                            const hint = document.querySelector('.spoiler-hint').value;
                             stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER }, hint);
                         } else {
                             stanza.c('spoiler', {'xmlns': Strophe.NS.SPOILER });
@@ -867,7 +869,7 @@
                             'is_spoiler': is_spoiler
                         };
                     if (is_spoiler) {
-                        const spoiler = this.el.querySelector('.chat-textarea-hint')
+                        const spoiler = this.el.querySelector('.spoiler-hint')
                         attrs.spoiler_hint = spoiler.textContent.length > 0 ? spoiler.textContent : __('Spoiler');
                     }
                     return attrs;

src/templates/chatbox_message_form.html

@@ -5,15 +5,15 @@
         <ul class="chat-toolbar no-text-select"></ul>
     {[ } ]}
     {[ if (o.allow_spoiler_messages) { ]}
-        <input type="text" placeholder="{{o.label_spoiler_hint}}"
-            class="{[ if (!o.sending_spoiler) { ]} hidden {[ } ]} chat-textarea-hint"/>
+        <input type="text" placeholder="{{o.label_spoiler_hint}}" value="{{ o.hint_value }}"
+            class="{[ if (!o.sending_spoiler) { ]} hidden {[ } ]} spoiler-hint"/>
     {[ } ]}
     <textarea
         type="text"
         class="chat-textarea
             {[ if (o.show_send_button) { ]} chat-textarea-send-button {[ } ]}
             {[ if (o.sending_spoiler) { ]} spoiler {[ } ]}"
-        placeholder="{{{o.label_personal_message}}}"></textarea>
+        placeholder="{{{o.label_personal_message}}}">{{ o.message_value }}</textarea>
     {[ if (o.show_send_button) { ]}
         <button type="submit" class="pure-button send-button">{{{ o.label_send }}}</button>
     {[ } ]}