Expose the name of the selected emoji when firing the emoji event (closes joeattardi/emoji-button#105)

index.d.ts

@@ -12,7 +12,7 @@ declare namespace EmojiButton {
     showPicker(referenceEl: HTMLElement): void;
     togglePicker(referenceEl: HTMLElement): void;
     isPickerVisible(): boolean;
-    setTheme(theme:EmojiTheme): void;
+    setTheme(theme: EmojiTheme): void;
   }
 
   export interface Options {
@@ -55,6 +55,7 @@ declare namespace EmojiButton {
   }
 
   export interface EmojiSelection {
+    name: string;
     custom?: boolean;
     emoji?: string;
     url?: string;

site/src/examples/custom/custom.js

@@ -21,11 +21,11 @@ picker.on('emoji', selection => {
   if (selection.url) {
     const img = document.createElement('img');
     img.src = selection.url;
-    img.alt = selection.emoji;
+    img.alt = selection.emoji + ' ' + selection.name;
     trigger.appendChild(img);
   } else {
     const span = document.createElement('span');
-    span.innerHTML = selection.emoji;
+    span.innerHTML = selection.emoji + ' ' + selection.name;
     trigger.appendChild(span);
   }
 });

site/src/examples/events/emoji.js

@@ -1,5 +1,5 @@
 const picker = new EmojiButton();
 
 picker.on('emoji', selection => {
-  alert(`"emoji" event fired, emoji is ${selection.emoji}`);
+  alert(`"emoji" event fired, emoji is ${selection.emoji} with name ${selection.name}`);
 });

site/src/examples/styles/twemoji.js

@@ -13,7 +13,7 @@ picker.on('emoji', selection => {
   // Add the new image for the new Twemoji
   const img = document.createElement('img');
   img.src = selection.url;
-  img.alt = selection.emoji;
+  img.alt = selection.emoji + ' ' + selection.name;
   trigger.appendChild(img);
 });
 

site/src/pages/docs/events.js

@@ -86,6 +86,9 @@ export default function Events() {
           This will be included for native and Twemoji emojis, but not for
           custom emojis.
         </li>
+        <li>
+          <code>name</code>: The name of the emoji that was selected.
+        </li>
         <li>
           <code>url</code>: The URL of the emoji image. This will be included
           for Twemoji and custom emojis.

src/index.ts

@@ -247,6 +247,7 @@ export class EmojiButton {
           if (emoji.custom) {
             this.publicEvents.emit(EMOJI, {
               url: emoji.emoji,
+              name: emoji.name,
               custom: true
             });
           } else if (this.options.style === 'twemoji') {
@@ -255,13 +256,15 @@ export class EmojiButton {
               callback: (icon, options) => {
                 this.publicEvents.emit(EMOJI, {
                   url: `${options.base}${options.size}/${icon}${options.ext}`,
-                  emoji: emoji.emoji
+                  emoji: emoji.emoji,
+                  name: emoji.name
                 });
               }
             });
           } else {
             this.publicEvents.emit(EMOJI, {
-              emoji: emoji.emoji
+              emoji: emoji.emoji,
+              name: emoji.name
             });
           }
           if (this.options.autoHide) {