Fix #2627

CHANGES.md

@@ -6,12 +6,13 @@
 - Increased stanza timeout from 10 to 20 seconds
 - Replace various font icons with SVG icons
 - #1761: Add a new dark theme based on the [Dracula](https://draculatheme.com/) theme
+- #2627: Spoiler toggles only after switching to another tab and back
 - #2733: Fix OMEMO race condition related to automatic reconnection
+- #2733: Wait for decrypted/parsed message before queuing to UI
 - #2751: Media not rendered when Converse runs in a browser extension
 - #2786: Fix webpack configuration not working on Windows OS
 - #2788: `TypeError` when trying to use `@converse/headless`
 - #2789: Implement new hook `parseMessageForCommands` for plugins to add custom commands
-- #2733: Wait for decrypted/parsed message before queuing to UI
 
 
 ## 9.0.0 (2021-11-26)

src/plugins/chatview/message-form.js

@@ -14,6 +14,7 @@ export default class MessageForm extends ElementView {
         this.model = _converse.chatboxes.get(this.getAttribute('jid'));
         await this.model.initialized;
         this.listenTo(this.model.messages, 'change:correcting', this.onMessageCorrecting);
+        this.listenTo(this.model, 'change:composing_spoiler', () => this.render());
         this.render();
     }
 

src/plugins/chatview/styles/chat-bottom-panel.scss

@@ -35,6 +35,8 @@
 
                 .spoiler-hint {
                     width: 100%;
+                    color: var(--foreground);
+                    background-color: var(--background);
                 }
 
                 .chat-textarea, input {

src/plugins/muc-views/templates/muc-bottom-panel.js

@@ -21,7 +21,6 @@ const tpl_can_edit = (o) => {
             <converse-chat-toolbar
                 class="chat-toolbar no-text-select"
                 .model=${o.model}
-                ?composing_spoiler="${o.model.get('composing_spoiler')}"
                 ?hidden_occupants="${o.model.get('hidden_occupants')}"
                 ?is_groupchat="${o.is_groupchat}"
                 ?show_call_button="${show_call_button}"

src/shared/chat/toolbar.js

@@ -16,7 +16,6 @@ export class ChatToolbar extends CustomElement {
 
     static get properties () {
         return {
-            composing_spoiler: { type: Boolean },
             hidden_occupants: { type: Boolean },
             is_groupchat: { type: Boolean },
             message_limit: { type: Number },
@@ -30,7 +29,7 @@ export class ChatToolbar extends CustomElement {
 
     connectedCallback () {
         super.connectedCallback();
-        this.listenTo(this.model, 'change:composing_spoiler', this.requestUpdate);
+        this.listenTo(this.model, 'change:composing_spoiler', () => this.requestUpdate());
     }
 
     render () {
@@ -133,7 +132,7 @@ export class ChatToolbar extends CustomElement {
         }
 
         let i18n_toggle_spoiler;
-        if (this.composing_spoiler) {
+        if (model.get('composing_spoiler')) {
             i18n_toggle_spoiler = __("Click to write as a normal (non-spoiler) message");
         } else {
             i18n_toggle_spoiler = __("Click to write your message as a spoiler");
@@ -145,7 +144,7 @@ export class ChatToolbar extends CustomElement {
                     @click=${this.toggleComposeSpoilerMessage}>
                 <converse-icon
                     color="var(${color})"
-                    class="fa ${this.composing_spoiler ? 'fa-eye-slash' : 'fa-eye'}"
+                    class="fa ${model.get('composing_spoiler') ? 'fa-eye-slash' : 'fa-eye'}"
                     size="1em"></converse-icon>
             </button>`;