Use template to render the spoiler message.

css/converse.css

@@ -1617,6 +1617,8 @@
         margin-top: 1em; }
     #converse-embedded-chat .chatbox .chat-body .chat-image,
     #conversejs .chatbox .chat-body .chat-image {
+      height: auto;
+      width: auto;
       max-height: 24em;
       max-width: 100%; }
     #converse-embedded-chat .chatbox .chat-body .chat-action,
@@ -1679,6 +1681,9 @@
     line-height: 1.3em;
     height: 206px;
     height: calc(100% - 96px); }
+    #converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before,
+    #conversejs .chatbox .chat-content .toggle-spoiler:before {
+      padding-right: 0.25em; }
   #converse-embedded-chat .chatbox .chat-content-sendbutton,
   #conversejs .chatbox .chat-content-sendbutton {
     height: calc(100% - 128px); }

css/inverse.css

@@ -1682,6 +1682,8 @@ body {
         margin-top: 1em; }
     #converse-embedded-chat .chatbox .chat-body .chat-image,
     #conversejs .chatbox .chat-body .chat-image {
+      height: auto;
+      width: auto;
       max-height: 24em;
       max-width: 100%; }
     #converse-embedded-chat .chatbox .chat-body .chat-action,
@@ -1744,6 +1746,9 @@ body {
     line-height: 1.3em;
     height: 206px;
     height: calc(100% - 100px); }
+    #converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before,
+    #conversejs .chatbox .chat-content .toggle-spoiler:before {
+      padding-right: 0.25em; }
   #converse-embedded-chat .chatbox .chat-content-sendbutton,
   #conversejs .chatbox .chat-content-sendbutton {
     height: calc(100% - 132px); }

sass/_chatbox.scss

@@ -217,6 +217,11 @@
             line-height: 1.3em;
             height: 206px;
             height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px});
+
+            .toggle-spoiler:before {
+                padding-right: 0.25em;
+                whitespace: nowrap;
+            }
         }
         .chat-content-sendbutton {
             height: calc(100% - #{$toolbar-height + $chat-textarea-height + $send-button-height + 2*$send-button-margin});

src/config.js

@@ -85,7 +85,6 @@ require.config({
         "converse-rosterview":      "src/converse-rosterview",
         "converse-singleton":       "src/converse-singleton",
         "converse-vcard":           "src/converse-vcard",
-        "converse-spoilers":        "src/converse-spoilers",  
 
         // Off-the-record-encryption
         // "bigint":               "node_modules/otr/build/dep/bigint",

src/converse-spoilers.js

-(function (root, factory) {
-    define([
-        "converse-core",
-        "converse-chatview"
-    ], factory);
-}(this, function (converse) {
-
-    // The following line registers your plugin.
-    converse.plugins.add("converse-spoilers", {
-        /* Optional dependencies are other plugins which might be
-         * overridden or relied upon, and therefore need to be loaded before
-         * this plugin. They are called "optional" because they might not be
-         * available, in which case any overrides applicable to them will be
-         * ignored.
-         *
-         * It's possible however to make optional dependencies non-optional.
-         * If the setting "strict_plugin_dependencies" is set to true,
-         * an error will be raised if the plugin is not found.
-         *
-         * NB: These plugins need to have already been loaded via require.js.
-         */
-        dependencies: ["converse-chatview"],
-
-        overrides: {
-            // Overrides mentioned here will be picked up by converse.js's
-            // plugin architecture they will replace existing methods on the
-            // relevant objects or classes.
-            //
-            // New functions which don't exist yet can also be added.
-
-            'ChatBoxView': {
-
-                toggleSpoilerMessage (event) {
-                    const { _converse } = this.__super__,
-                          { __ } = _converse;
-
-                    const button = event.target;
-                    const textarea = button.nextElementSibling;
-                    const hint = textarea.children[0];
-                    const contentHidden = textarea.children[1];
-                    const container = button.parentElement;
-
-                    if (button.getAttribute("closed") == "true") {
-                        //Show spoiler's content
-                        button.classList.remove("icon-eye");
-                        button.classList.add("toggle-spoiler-display");
-                        button.classList.add("icon-eye-blocked");
-                        button.setAttribute("closed", "false");
-                        button.textContent = __('Hide ');
-                        container.style.backgroundColor="#D5FFD2";
-
-                        hint.classList.add("hidden");
-                        contentHidden.classList.remove("hidden");
-                    } else { //Hide spoiler's content
-                        button.classList.remove("icon-eye-blocked");
-                        button.classList.add("icon-eye");
-                        button.setAttribute("closed", "true");
-                        button.textContent = __('Show ');
-                        container.style.backgroundColor="Lavender";
-                        hint.classList.remove("hidden");
-                        contentHidden.classList.add("hidden");
-                    }
-                },
-
-                'renderMessage': function (attrs) {
-                    /* Renders a chat message based on the passed in attributes.
-                     *
-                     * Parameters:
-                     *  (Object) attrs: An object containing the message attributes.
-                     *
-                     *  Returns:
-                     *      The DOM element representing the message.
-                     */
-                    const { _converse } = this.__super__,
-                          { __ } = _converse,
-                          msg = this.__super__.renderMessage.apply(this, arguments);
-
-                    return msg;
-                }
-            }
-        }
-    });
-}));

src/converse.js

@@ -21,8 +21,7 @@ if (typeof define !== 'undefined') {
         "converse-minimize",    // Allows chat boxes to be minimized
         "converse-dragresize",  // Allows chat boxes to be resized by dragging them
         "converse-headline",    // Support for headline messages
-        "converse-fullscreen",
-        "converse-spoilers"
+        "converse-fullscreen"
         /* END: Removable components */
     ], function (converse) {
         return converse;

src/templates/spoiler_message.html

+<div class="message chat-message {{{o.extra_classes}}}" data-isodate="{{{o.isodate}}}" data-msgid="{{{o.msgid}}}">
+    <span class="chat-msg-author chat-msg-{{{o.sender}}}">{{{o.time}}} {{{o.username}}}:&nbsp;</span>
+    <div class="spoiler-hint"><!-- message gets added here via renderMessage --></div>
+    <a class="icon-eye toggle-spoiler" data-toggle-state="closed" href="#">{{{o.label_show}}}</a>
+    <div class="chat-msg-content spoiler collapsed"><!-- message gets added here via renderMessage --></div>
+</div>