Custom Emoji Drawer & Inline Message Actions

Closes #241 (closed) Closes #269 (closed)

src/plugins/sib-emoji-picker.js

-import 'https://cdn.skypack.dev/emoji-picker-element';
+import { Picker } from 'https://cdn.skypack.dev/emoji-picker-element';
 
 /**
  * Custom emoji picker.
@@ -13,6 +13,10 @@ converse.plugins.add('sib-emoji-picker', {
     const _converse = this._converse;
     const { api, __ } = _converse;
 
+    // Register the picker element
+    api.elements.define('emoji-picker', Picker);
+    api.elements.register();
+
     /**
      * Force rendering of the emoji picker inside the dropdown.
      * Note: Without this mixin, the IndexedDB can't be loaded for some reason.
@@ -20,29 +24,36 @@ converse.plugins.add('sib-emoji-picker', {
     const EmojiDropdownMixin = {
       render() {
         return html`
-          <div class='dropup'>
-            <button class='toggle-emojis'
-                    title='${__('Insert emojis')}'
-                    data-toggle='dropdown'
-                    aria-haspopup='true'
-                    aria-expanded='false'>
-              <converse-icon
-                class='fa fa-smile '
-                path-prefix='${api.settings.get('assets_path')}'
-                size='1em'></converse-icon>
+          <div class="dropup">
+            <button class="toggle-emojis"
+                    title="${__('Insert emojis')}"
+                    data-toggle="dropdown"
+                    aria-haspopup="true"
+                    aria-expanded="false">
+              <converse-icon class="fa fa-smile"
+                             path-prefix="${api.settings.get('assets_path')}"
+                             size="1em"></converse-icon>
             </button>
-            <div class='dropdown-menu'>
-              <converse-emoji-picker
-                .chatview='${this.chatview}'
-                .model='${this.model}'
+            <div class="dropdown-menu">
+              <converse-emoji-picker .chatview="${this.chatview}"
+                                     .model="${this.model}"
               ></converse-emoji-picker>
             </div>
           </div>`;
       },
+      async showMenu() {
+        await _showMenu.apply(this, arguments);
+        setTimeout(() => {
+          // Focus the search input afterwards
+          const picker = this.querySelector('emoji-picker');
+          picker?.shadowRoot?.querySelector('.search')?.focus();
+        });
+      },
     };
 
     // Apply mixin
     const EmojiDropdown = api.elements.registry['converse-emoji-dropdown'];
+    const _showMenu = EmojiDropdown.prototype.showMenu;
     Object.assign(EmojiDropdown.prototype, EmojiDropdownMixin);
 
     /**
@@ -56,10 +67,9 @@ converse.plugins.add('sib-emoji-picker', {
       },
       render() {
         return html`
-          <emoji-picker
-            .chatview='${this.chatview}'
-            .model='${this.model}'
-            @emoji-click='${ev => this.insertIntoTextArea(ev.detail.unicode)}'
+          <emoji-picker .chatview="${this.chatview}"
+                        .model="${this.model}"
+                        @emoji-click="${ev => this.insertIntoTextArea(ev.detail.unicode)}"
           ></emoji-picker>`;
       },
     };