types and doc fixes for twemoji options

index.d.ts

@@ -1,3 +1,5 @@
+import { ParseObject } from 'twemoji';
+
 export as namespace EmojiButton;
 
 export = EmojiButton;
@@ -32,6 +34,7 @@ declare namespace EmojiButton {
     theme?: EmojiTheme;
     categories?: Category[];
     style?: EmojiStyle;
+    twemojiStyle: Partial<ParseObject>;
     emojisPerRow?: number;
     rows?: number;
     emojiSize?: string;

package-lock.json

@@ -2162,6 +2162,11 @@
       "integrity": "sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==",
       "dev": true
     },
+    "@types/twemoji": {
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@types/twemoji/-/twemoji-12.1.1.tgz",
+      "integrity": "sha512-dW1B1WHTfrWmEzXb/tp8xsZqQHAyMB9JwLwbBqkIQVzmNUI02R7lJqxUpKFM114ygNZHKA1r74oPugCAiYHt1A=="
+    },
     "@types/yargs": {
       "version": "15.0.5",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.5.tgz",

package.json

@@ -57,6 +57,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.13.0",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@popperjs/core": "^2.4.0",
+    "@types/twemoji": "^12.1.1",
     "focus-trap": "^5.1.0",
     "fuzzysort": "^1.1.4",
     "tiny-emitter": "^2.1.0",

site/src/components/Header.module.css

@@ -53,3 +53,19 @@
 .buttons a:hover {
   filter: brightness(1.2);
 }
+
+@media (max-width: 400px) {
+  .buttons {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .buttons a {
+    margin: 0.5rem;
+    text-align: center;
+  }
+
+  .header h2 {
+    font-size: 1.5rem;
+  }
+}

site/src/pages/docs/api.js

@@ -440,6 +440,24 @@ export default function ApiDocs() {
               </td>
             </tr>
 
+            <tr>
+              <th scope="row">
+                <code>twemojiOptions</code>
+              </th>
+              <td>object</td>
+              <td>
+                <code>{"{ ext: 'svg', folder: 'svg' }"}</code>
+              </td>
+              <td>
+                The options to pass to Twemoji when using the Twemoji style. For
+                a list of valid options, see the{' '}
+                <a href="https://github.com/twitter/twemoji">
+                  Twemoji documentation
+                </a>
+                .
+              </td>
+            </tr>
+
             <tr>
               <th scope="row">
                 <code>zIndex</code>
@@ -511,7 +529,7 @@ export default function ApiDocs() {
           Method: <code>setTheme(theme)</code>
         </h3>
         <p>
-          Sets the theme of the picker.  See{' '}
+          Sets the theme of the picker. See{' '}
           <Link to="/docs/themes">Themes</Link> for more details.
         </p>
 

site/src/pages/docs/styles.js

@@ -39,6 +39,18 @@ export default function StylesExample() {
         <code>EmojiButton</code> constructor.
       </p>
 
+      <p>
+        When using Twemoji, you can also optionally pass a{' '}
+        <code>twemojiOptions</code>
+        object to the <code>EmojiButton</code> options. This will customize how
+        Twemoji parses and generates an image URL. For valid Twemoji options,
+        see{' '}
+        <a href="https://github.com/twitter/twemoji">
+          the Twemoji documentation
+        </a>
+        .
+      </p>
+
       <p>
         When using the Twemoji style, the argument to the <code>emoji</code>{' '}
         event has a <code>url</code> property, which is the URL of the Twemoji

src/emoji.ts

@@ -27,32 +27,17 @@ export class Emoji {
 
     let content = this.emoji.emoji;
 
-    /*
-                const img = createElement(
-              'img',
-              CLASS_CUSTOM_EMOJI
-            ) as HTMLImageElement;
-            img.src = element.dataset.emoji;
-            element.innerText = '';
-            element.appendChild(img);
-            element.dataset.loaded = true;
-            element.style.opacity = 1;
-*/
-
     if (this.emoji.custom) {
       content = this.lazy
         ? smile
         : `<img class="${CLASS_CUSTOM_EMOJI}" src="${this.emoji.emoji}">`;
     } else if (this.options.style === 'twemoji') {
-      content = this.lazy ? smile : twemoji.parse(this.emoji.emoji, this.options.twemojiOptions);
+      content = this.lazy
+        ? smile
+        : twemoji.parse(this.emoji.emoji, this.options.twemojiOptions);
     }
 
     this.emojiButton.innerHTML = content;
-    // this.options.style === 'native'
-    //   ? this.emoji.emoji
-    //   : this.lazy
-    //   ? smile
-    //   : twemoji.parse(this.emoji.emoji);
     this.emojiButton.tabIndex = -1;
 
     this.emojiButton.dataset.emoji = this.emoji.emoji;

src/index.ts

@@ -263,12 +263,15 @@ export class EmojiButton {
           } else if (this.options.style === 'twemoji') {
             twemoji.parse(emoji.emoji, {
               ...this.options.twemojiOptions,
-              callback: (icon, options) => {
+              callback: (icon, { base, size, ext }: any) => {
+                const imageUrl = `${base}${size}/${icon}${ext}`;
                 this.publicEvents.emit(EMOJI, {
-                  url: `${options.base}${options.size}/${icon}${options.ext}`,
+                  url: imageUrl,
                   emoji: emoji.emoji,
                   name: emoji.name
                 });
+
+                return imageUrl;
               }
             });
           } else {

src/types.ts

@@ -1,4 +1,5 @@
 import { Placement } from '@popperjs/core';
+import { ParseObject } from 'twemoji';
 import { EmojiButton } from './index';
 
 export interface EmojiRecord {
@@ -52,7 +53,7 @@ export interface EmojiButtonOptions {
   theme?: EmojiTheme;
   categories?: Category[];
   style?: EmojiStyle;
-  twemojiOptions?: Object;
+  twemojiOptions?: Partial<ParseObject>;
   emojisPerRow?: number;
   rows?: number;
   emojiSize?: string;