emoji autocompletion

src/element/Textarea.tsx

@@ -4,6 +4,7 @@ import "./Textarea.css";
 import { useState } from "react";
 import { useLiveQuery } from "dexie-react-hooks";
 import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
+import emoji from "@jukben/emoji-search";
 import TextareaAutosize from "react-textarea-autosize";
 
 import Avatar from "./Avatar";
@@ -12,6 +13,20 @@ import { hexToBech32 } from "../Util";
 import { db } from "../db";
 import { MetadataCache } from "../db/User";
 
+interface EmojiItemProps {
+  name: string
+  char: string
+}
+
+const EmojiItem = ({ entity: { name, char } }: { entity: EmojiItemProps }) => {
+  return (
+    <div className="emoji-item">
+      <div className="emoji">{char}</div>
+      <div className="emoji-name">{name}</div>
+    </div>
+  )
+}
+
 const UserItem = (metadata: MetadataCache) => {
   const { pubkey, display_name, picture, nip05, ...rest } = metadata
   return (
@@ -46,6 +61,12 @@ const Textarea = ({ users, onChange, ...rest }: any) => {
     return allUsers
   }
 
+  const emojiDataProvider = (token: string) => {
+    return emoji(token)
+      .slice(0, 10)
+      .map(({ name, char }) => ({ name, char }));
+  }
+
   return (
     <ReactTextareaAutocomplete
       {...rest}
@@ -54,6 +75,11 @@ const Textarea = ({ users, onChange, ...rest }: any) => {
       onChange={onChange}
       textAreaComponent={TextareaAutosize}
       trigger={{
+        ":": {
+          dataProvider: emojiDataProvider,
+          component: EmojiItem,
+          output: (item: EmojiItemProps, trigger) => item.char
+        },
         "@": {
           afterWhitespace: true,
           dataProvider: userDataProvider,