Custom Emoji Drawer & Inline Message Actions

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

src/plugins/sib-action-buttons-inline.js

+/**
+ * Render the action buttons off the drawer.
+ * The buttons should be shown on message hover, on the right side of the message.
+ */
+converse.plugins.add('sib-action-buttons-inline', {
+  initialize() {
+    const { html } = converse.env;
+    const _converse = this._converse;
+    const { api } = _converse;
+
+    const MessageActions = api.elements.registry['converse-message-actions'];
+
+    function getInlineActionsItem(o) {
+      return html`
+        <button class='chat-msg__action ${o.button_class}' @click='${o.handler}' title='${o.i18n_text}'>
+          <converse-icon class='${o.icon_class}'
+                         path-prefix='${api.settings.get('assets_path')}'
+                         color='var(--text-color-lighten-15-percent)'
+                         size='1em'></converse-icon>
+        </button>
+      `;
+    }
+
+    Object.assign(MessageActions.prototype, {
+      async renderActions() {
+        const buttons = await this.getActionButtons();
+        const items = buttons.map(b => getInlineActionsItem(b));
+
+        if (items.length) {
+          return html`
+            <div class='chat-msg__actions chat-msg__actions--inline'>${items}</div>
+          `;
+        } else {
+          return '';
+        }
+      },
+    });
+  },
+});