Use events in a less obscure manner

src/converse-spoilers.js

@@ -14,7 +14,7 @@
         moment = converse.env.moment;
 
     function isEditSpoilerMessage() {
-        return document.querySelector('.toggle-spoiler').getAttribute('active') === 'true';
+        return document.querySelector('.toggle-spoiler-edit').getAttribute('active') === 'true';
     }
 
     function hasHint() {
@@ -102,9 +102,8 @@
              */
             const initSpoilers = function () {
                 var spoiler_button = document.createElement('li');
-                spoiler_button.classList.add("toggle-spoiler");
+                spoiler_button.classList.add("toggle-spoiler-edit");
                 spoiler_button.setAttribute("active", "false");
-                spoiler_button.onclick = toggleEditSpoilerMessage;
                 spoiler_button.innerHTML = '<a class="icon-eye" title="' + _('Click here to write a message as a spoiler') + '"></a>';
                 document.querySelector('.chat-toolbar').appendChild(spoiler_button);
             };
@@ -113,7 +112,7 @@
                 let form = document.querySelector('.sendXMPPMessage');
                 let textArea = document.querySelector('.chat-textarea');
                 let hintTextArea = null;
-                let spoiler_button = document.querySelector('.toggle-spoiler');
+                let spoiler_button = document.querySelector('.toggle-spoiler-edit');
 
                 if (!isEditSpoilerMessage()) {
                     textArea.style['background-color'] = '#D5FFD2';
@@ -156,6 +155,10 @@
          */
         'overrides': {
             'ChatBoxView': {
+                'events': {
+                    'click .toggle-spoiler-edit': toggleEditSpoilerMessage
+                },
+                
                 'createMessageStanza': function () {
                     let messageStanza = this.__super__.createMessageStanza.apply(this, arguments);
                     if (isEditSpoilerMessage()) {