use arrow function to keep the mixin scope

src/plugins/sib-reactions.js

@@ -209,16 +209,23 @@ converse.plugins.add('sib-reactions', {
         return _.values(emojis);
       },
 
-      // TODO: Care about overflow according to the target position
+      /**
+       * Open the emoji drawer with all the needed stuff.
+       * - When the user selects an emoji, it sends the reaction stanza.
+       * - When the user press escape, it closes the drawer.
+       * - When the user click outside of the drawer, it closes it.
+       * @param ev
+       */
       openEmojiPicker(ev) {
         ev.preventDefault();
-        const self = this;
+
+        // TODO: Care about overflow according to the target position
         const picker = new Picker();
-        self.appendChild(picker);
+        this.appendChild(picker);
 
-        picker.addEventListener('emoji-click', function(e) {
+        picker.addEventListener('emoji-click', e => {
           const emoji = e.detail.unicode;
-          const emojis = getUserReactionEmojis(self.model);
+          const emojis = getUserReactionEmojis(this.model);
 
           // TODO: If it has the reaction from this user already, remove it? (config)
           if (emojis?.includes(emoji)) {
@@ -230,7 +237,7 @@ converse.plugins.add('sib-reactions', {
           emojis.push(emoji);
           picker.remove();
 
-          sendReactionStanza(self.model, emojis);
+          sendReactionStanza(this.model, emojis);
         });
 
         // Focus the search input when the picker opens
@@ -245,6 +252,7 @@ converse.plugins.add('sib-reactions', {
         });
 
         // Close the picker if clicked outside of it
+        // TODO: Remove this listener when the picker is removed from the dom
         setTimeout(() => {
           document.addEventListener('click', ev => {
             if (!picker.shadowRoot.contains(ev.composedPath()[0])) {