Custom Emoji Drawer & Inline Message Actions

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

src/plugins/sib-emoji-picker.js

+import { Picker } from 'https://cdn.skypack.dev/emoji-picker-element';
+
+/**
+ * Custom emoji picker.
+ * Replaces the default drawer with a custom component.
+ */
+converse.plugins.add('sib-emoji-picker', {
+  dependencies: [
+    'converse-emoji',
+  ],
+  initialize() {
+    const { html } = converse.env;
+    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.
+     */
+    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>
+            </button>
+            <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);
+
+    /**
+     * Update the emoji picker rendered content.
+     * with the new element.
+     */
+    const EmojiPickerMixin = {
+      firstUpdated() {
+      },
+      registerEvents() {
+      },
+      render() {
+        return html`
+          <emoji-picker .chatview="${this.chatview}"
+                        .model="${this.model}"
+                        @emoji-click="${ev => this.insertIntoTextArea(ev.detail.unicode)}"
+                        class="light"
+          ></emoji-picker>`;
+      },
+    };
+
+    // Apply mixin
+    const EmojiPicker = api.elements.registry['converse-emoji-picker'];
+    Object.assign(EmojiPicker.prototype, EmojiPickerMixin);
+  },
+});