small fixes

app/soapbox/features/emoji/components/emoji_picker_dropdown.tsx

@@ -13,7 +13,8 @@ import { EmojiPicker as EmojiPickerAsync } from '../../ui/util/async-components'
 // import { Picker as EmojiPicker } from '../../emoji/emoji_picker';
 
 import type { List } from 'immutable';
-import type { Emoji } from 'soapbox/features/emoji';
+import type { Emoji, CustomEmoji, NativeEmoji } from 'soapbox/features/emoji';
+import type { EmojiPick } from 'emoji-mart';
 
 let EmojiPicker: any; // load asynchronously
 
@@ -73,9 +74,25 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ custom_emojis, fr
     }
   };
 
-  const handlePick = (emoji: Emoji) => {
+  const handlePick = (emoji: EmojiPick) => {
     setVisible(false);
-    onPickEmoji(emoji);
+
+    if (emoji.native) {
+      onPickEmoji({
+        id: emoji.id,
+        colons: emoji.shortcodes,
+        custom: false,
+        native: emoji.native,
+        unified: emoji.unified,
+      } as NativeEmoji);
+    } else {
+      onPickEmoji({
+        id: emoji.id,
+        colons: emoji.shortcodes,
+        custom: true,
+        imageUrl: emoji.src,
+      } as CustomEmoji);
+    }
   };
 
   const getI18n = () => {

app/soapbox/features/emoji/index.ts

@@ -7,6 +7,20 @@ import unicodeMapping from './mapping';
 import type { Node as CheerioNode } from 'cheerio';
 import type { Emoji as EmojiMart, CustomEmoji as EmojiMartCustom } from 'emoji-mart';
 
+/*
+ * TODO: Consolate emoji object types
+ *
+ * There are five different emoji objects currently
+ *  - emoji-mart's "onPickEmoji" handler
+ *  - emoji-mart's custom emoji types
+ *  - an Emoji type that is either NativeEmoji or CustomEmoji
+ *  - a type inside redux's `store.custom_emoji` immutablejs
+ *  
+ * there needs to be one type for the picker handler callback
+ * and one type for the emoji-mart data
+ * and one type that is used everywhere that the above two are converted into
+ */
+
 export interface Emoji {
   id: string,
   colons: string,

app/soapbox/reducers/compose.ts

@@ -221,6 +221,7 @@ const updateSuggestionTags = (state: State, token: string) => {
 
 const insertEmoji = (state: State, position: number, emojiData: Emoji, needsSpace: boolean) => {
   const oldText = state.text;
+  console.log(emojiData);
   const emojiText = isNativeEmoji(emojiData) ? emojiData.native : emojiData.colons;
   const emoji = needsSpace ? ' ' + emojiText : emojiText;
 

types/emoji-mart/index.d.ts

@@ -19,12 +19,23 @@ declare module 'emoji-mart' {
     version?: number,
   }
 
+  export interface EmojiPick {
+    id: string,
+    name: string,
+    native?: string,
+    unified?: string,
+    keywords: string[],
+    shortcodes: string,
+    emoticons: string[],
+    src?: string,
+  }
+
   export interface PickerProps {
     custom?: { emojis: Emoji<CustomEmoji> }[],
     set?: string,
     title?: string,
     theme?: string,
-    onEmojiSelect?: any,
+    onEmojiSelect?: (emoji: EmojiPick) => void,
     recent?: any,
     skin?: any,
     perLine?: number,