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.
@@ -42,8 +46,8 @@ converse.plugins.add('sib-emoji-picker', {
         setTimeout(() => {
           // Focus the search input afterwards
           const picker = this.querySelector('emoji-picker');
-          picker?.shadowRoot.querySelector('.search')?.focus();
-        })
+          picker?.shadowRoot?.querySelector('.search')?.focus();
+        });
       },
     };