Merge branch 'custom_emoji_picker' into 'beta'

Custom emoji picker

See merge request !118

src/plugins/sib-emoji-picker.js

+import '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;
+
+    /**
+     * 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>`;
+      },
+    };
+
+    // Apply mixin
+    const EmojiDropdown = api.elements.registry['converse-emoji-dropdown'];
+    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)}'
+          ></emoji-picker>`;
+      },
+    };
+
+    // Apply mixin
+    const EmojiPicker = api.elements.registry['converse-emoji-picker'];
+    Object.assign(EmojiPicker.prototype, EmojiPickerMixin);
+  },
+});

src/solid-xmpp-chat.js

@@ -10,6 +10,7 @@ import './plugins/sib-action-buttons-inline.js';
 import './plugins/sib-chat-navigation.js';
 import './plugins/sib-custom-hats.js';
 import './plugins/sib-disconnected.js';
+import './plugins/sib-emoji-picker.js';
 import './plugins/sib-history-improved.js';
 import './plugins/sib-mention-mobile.js';
 import './plugins/sib-remove-notifications.js';
@@ -234,6 +235,7 @@ export const SolidXMPPChat = {
           'sib-connected',
           'sib-custom-hats',
           'sib-disconnected',
+          'sib-emoji-picker',
           'sib-history-improved',
           'sib-mention-mobile',
           'sib-remove-notifications',