feat: add custom emoji category support

Amp-Thread-ID: https://ampcode.com/threads/T-019cf809-1bbe-7158-a32f-d7f240e4c1ce
Co-authored-by: Amp <amp@ampcode.com>

Author: mjcampagna

src/components/emoji-picker.tsx

@@ -66,7 +66,8 @@ import { useStableCallback } from "../utils/use-stable-callback";
 function EmojiPickerDataHandler({
   emojiVersion,
   emojibaseUrl,
-}: Pick<EmojiPickerRootProps, "emojiVersion" | "emojibaseUrl">) {
+  custom,
+}: Pick<EmojiPickerRootProps, "emojiVersion" | "emojibaseUrl" | "custom">) {
   const [emojiData, setEmojiData] = useState<EmojiData | undefined>(undefined);
   const store = useEmojiPickerStore();
   const locale = useSelectorKey(store, "locale");
@@ -103,12 +104,12 @@ function EmojiPickerDataHandler({
         store
           .get()
           .onDataChange(
-            getEmojiPickerData(emojiData, columns, skinTone, search),
+            getEmojiPickerData(emojiData, columns, skinTone, search, custom),
           );
       },
       { timeout: 100 },
     );
-  }, [emojiData, columns, skinTone, search]);
+  }, [emojiData, columns, skinTone, search, custom]);
 
   return null;
 }
@@ -143,6 +144,7 @@ const EmojiPickerRoot = forwardRef<HTMLDivElement, EmojiPickerRootProps>(
       columns = 9,
       skinTone = "none",
       onEmojiSelect = noop,
+      custom,
       emojiVersion,
       emojibaseUrl,
       onFocusCapture,
@@ -472,6 +474,7 @@ const EmojiPickerRoot = forwardRef<HTMLDivElement, EmojiPickerRootProps>(
           <EmojiPickerDataHandler
             emojibaseUrl={emojibaseUrl}
             emojiVersion={emojiVersion}
+            custom={custom}
           />
           {children}
         </EmojiPickerStoreProvider>
@@ -1048,7 +1051,11 @@ function DefaultEmojiPickerListEmoji({
 }: EmojiPickerListEmojiProps) {
   return (
     <button type="button" {...props}>
-      {emoji.emoji}
+      {emoji.url ? (
+        <img src={emoji.url} alt={emoji.label} width="1em" height="1em" />
+      ) : (
+        emoji.emoji
+      )}
     </button>
   );
 }

src/data/emoji-picker.ts

@@ -1,4 +1,5 @@
 import type {
+  CustomCategory,
   Emoji,
   EmojiData,
   EmojiDataEmoji,
@@ -48,6 +49,7 @@ export function getEmojiPickerData(
   columns: number,
   skinTone: SkinTone | undefined,
   search: string,
+  custom?: CustomCategory[],
 ): EmojiPickerData {
   const emojis = searchEmojis(data.emojis, search);
   const rows: EmojiPickerDataRow[] = [];
@@ -98,8 +100,81 @@ export function getEmojiPickerData(
     startRowIndex += categoryRows.length;
   }
 
+  let customCount = 0;
+
+  if (custom) {
+    const searchText = search?.toLowerCase().trim();
+
+    for (const customCategory of custom) {
+      let customEmojis: EmojiPickerEmoji[] = customCategory.emojis.map(
+        (ce) => ({
+          emoji: "",
+          label: ce.label,
+          url: ce.url,
+          id: ce.id,
+        }),
+      );
+
+      if (searchText) {
+        const scores = new Map<string, number>();
+
+        customEmojis = customEmojis.filter((ce) => {
+          let score = 0;
+
+          if (ce.label.toLowerCase().includes(searchText)) {
+            score += 10;
+          }
+
+          const original = customCategory.emojis.find((e) => e.id === ce.id);
+
+          if (original?.tags) {
+            for (const tag of original.tags) {
+              if (tag.toLowerCase().includes(searchText)) {
+                score += 1;
+              }
+            }
+          }
+
+          if (score > 0) {
+            scores.set(ce.id!, score);
+            return true;
+          }
+
+          return false;
+        });
+
+        customEmojis.sort(
+          (a, b) => (scores.get(b.id!) ?? 0) - (scores.get(a.id!) ?? 0),
+        );
+      }
+
+      if (customEmojis.length === 0) {
+        continue;
+      }
+
+      customCount += customEmojis.length;
+
+      const categoryRows = chunk(customEmojis, columns).map((emojis) => ({
+        categoryIndex,
+        emojis,
+      }));
+
+      rows.push(...categoryRows);
+      categories.push({
+        label: customCategory.label,
+        rowsCount: categoryRows.length,
+        startRowIndex,
+      });
+
+      categoriesStartRowIndices.push(startRowIndex);
+
+      categoryIndex++;
+      startRowIndex += categoryRows.length;
+    }
+  }
+
   return {
-    count: emojis.length,
+    count: emojis.length + customCount,
     categories,
     categoriesStartRowIndices,
     rows,

src/index.ts

@@ -2,6 +2,8 @@ export * as EmojiPicker from "./components/emoji-picker";
 export { useActiveEmoji, useSkinTone } from "./hooks";
 export type {
   Category,
+  CustomCategory,
+  CustomEmoji,
   Emoji,
   EmojiPickerActiveEmojiProps,
   EmojiPickerEmptyProps,

src/types.ts

@@ -62,9 +62,24 @@ export type EmojiData = {
   skinTones: Record<Exclude<SkinTone, "none">, string>;
 };
 
+export type CustomEmoji = {
+  id: string;
+  label: string;
+  url: string;
+  tags?: string[];
+};
+
+export type CustomCategory = {
+  id: string;
+  label: string;
+  emojis: CustomEmoji[];
+};
+
 export type EmojiPickerEmoji = {
   emoji: string;
   label: string;
+  url?: string;
+  id?: string;
 };
 
 export type EmojiPickerCategory = {
@@ -143,6 +158,11 @@ export interface EmojiPickerListProps extends ComponentProps<"div"> {
 }
 
 export interface EmojiPickerRootProps extends ComponentProps<"div"> {
+  /**
+   * Custom emoji categories to append to the picker.
+   */
+  custom?: CustomCategory[];
+
   /**
    * A callback invoked when an emoji is selected.
    */