add button into chat composer

lib/index.ts

@@ -69,6 +69,25 @@ export async function addStylesheet<Payload extends {
   return data;
 }
 
+export async function filterMessagingLoadRoom<Payload extends {
+  room: {
+    composerActions: {
+      action: string;
+      class: string;
+      icon: string;
+      title: string;
+    }[];
+  };
+}>(data: Payload): Promise<Payload> {
+  data.room.composerActions.push({
+    action: 'emoji',
+    class: 'd-none d-md-flex',
+    icon: 'fa-smile',
+    title: '[[emoji:composer.title]]',
+  });
+  return data;
+}
+
 export async function configGet(config: any): Promise<any> {
   const customFirst = await settings.getOne('customFirst');
   // eslint-disable-next-line no-param-reassign

plugin.json

@@ -38,6 +38,7 @@
     { "hook": "filter:email.prepare", "method": "parse.email" },
     { "hook": "filter:middleware.renderHeader", "method": "parse.header" },
     { "hook": "filter:meta.getLinkTags", "method": "addStylesheet" },
-    { "hook": "filter:config.get", "method": "configGet" }
+    { "hook": "filter:config.get", "method": "configGet" },
+    { "hook": "filter:messaging.loadRoom", "method": "filterMessagingLoadRoom" }
   ]
 }

public/emoji-setup.js

@@ -5,4 +5,18 @@ require(['emoji'], function (emoji) {
     emoji.init();
     data.strategies.push(emoji.strategy);
   });
+
+  $(window).on('action:chat.loaded', (ev, container) => {
+    const containerEl = $(container);
+    const textarea = containerEl.find('[component="chat/input"]')[0];
+    const addEmojiBtn = $(container).find('[data-action="emoji"]');
+
+    addEmojiBtn.on('click', (ev) => {
+      require([
+        'emoji-dialog'
+      ], function (emojiDialog) {
+          emojiDialog.toggleForInsert(textarea, 0, 0, ev);
+      });
+    });
+  });
 });