Remove EmojiContext & adjust components

package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-react",
-  "version": "0.0.5-development",
+  "version": "0.0.0-development",
   "description": "React components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -33,7 +33,6 @@
     "@stream-io/stream-chat-css": "^3.13.0",
     "clsx": "^2.0.0",
     "dayjs": "^1.10.4",
-    "emoji-mart": "3.0.1",
     "emoji-regex": "^9.2.0",
     "hast-util-find-and-replace": "^4.1.2",
     "i18next": "^21.6.14",
@@ -68,10 +67,18 @@
     "react": "^18.0.0 || ^17.0.0 || ^16.8.0",
     "react-dom": "^18.0.0 || ^17.0.0 || ^16.8.0",
     "stream-chat": "^8.0.0",
-    "emoji-picker-react": "^4.5.2"
+    "emoji-mart": "^5.5.2",
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1"
   },
   "peerDependenciesMeta": {
-    "emoji-picker-react": {
+    "emoji-mart": {
+      "optional": true
+    },
+    "@emoji-mart/data": {
+      "optional": true
+    },
+    "@emoji-mart/react": {
       "optional": true
     }
   },
@@ -92,6 +99,9 @@
     "@babel/preset-typescript": "^7.12.7",
     "@commitlint/cli": "^16.2.3",
     "@commitlint/config-conventional": "^16.2.1",
+    "emoji-mart": "^5.5.2",
+    "@emoji-mart/data": "^1.1.2",
+    "@emoji-mart/react": "^1.1.1",
     "@ladle/react": "^0.16.0",
     "@playwright/test": "^1.29.1",
     "@rollup/plugin-babel": "^5.2.1",
@@ -133,7 +143,6 @@
     "codecov": "^3.8.1",
     "core-js": "^3.6.5",
     "css-loader": "^5.0.1",
-    "emoji-picker-react": "^4.5.2",
     "eslint": "7.14.0",
     "eslint-config-airbnb": "^18.2.1",
     "eslint-config-prettier": "^6.15.0",

src/components/AutoCompleteTextarea/Textarea.jsx

@@ -138,7 +138,7 @@ export class ReactTextareaAutocomplete extends React.Component {
     this._replaceWord();
   };
 
-  _replaceWord = () => {
+  _replaceWord = async () => {
     const { value } = this.state;
 
     const lastWordRegex = /([^\s]+)(\s*)$/;
@@ -149,7 +149,7 @@ export class ReactTextareaAutocomplete extends React.Component {
 
     const spaces = match[2];
 
-    const newWord = this.props.replaceWord(lastWord);
+    const newWord = await this.props.replaceWord(lastWord);
     if (newWord == null) return;
 
     const textBeforeWord = value.slice(0, this.getCaretPosition() - match[0].length);

src/components/Channel/Channel.tsx

@@ -28,7 +28,6 @@ import { nanoid } from 'nanoid';
 import clsx from 'clsx';
 
 import { channelReducer, ChannelStateReducer, initialState } from './channelState';
-import { commonEmoji, defaultMinimalEmojis, emojiSetDef } from './emojiData';
 import { useCreateChannelStateContext } from './hooks/useCreateChannelStateContext';
 import { useCreateTypingContext } from './hooks/useCreateTypingContext';
 import { useEditMessageHandler } from './hooks/useEditMessageHandler';
@@ -56,7 +55,6 @@ import {
 } from '../../context/ChannelStateContext';
 import { ComponentContextValue, ComponentProvider } from '../../context/ComponentContext';
 import { useChatContext } from '../../context/ChatContext';
-import { EmojiConfig, EmojiContextValue, EmojiProvider } from '../../context/EmojiContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { TypingProvider } from '../../context/TypingContext';
 
@@ -67,12 +65,9 @@ import {
 } from '../../constants/limits';
 
 import { hasMoreMessagesProbably, hasNotMoreMessages } from '../MessageList/utils';
-import defaultEmojiData from '../../stream-emoji.json';
 import { makeAddNotifications } from './utils';
 import { getChannel } from '../../utils/getChannel';
 
-import type { Data as EmojiMartData } from 'emoji-mart';
-
 import type { MessageProps } from '../Message/types';
 import type { MessageInputProps } from '../MessageInput/MessageInput';
 
@@ -142,10 +137,6 @@ export type ChannelProps<
   dragAndDropWindow?: boolean;
   /** Custom UI component to override default edit message input, defaults to and accepts same props as: [EditMessageForm](https://github.com/GetStream/stream-chat-react/blob/master/src/components/MessageInput/EditMessageForm.tsx) */
   EditMessageInput?: ComponentContextValue<StreamChatGenerics>['EditMessageInput'];
-  /** Custom prop to override default `facebook.json` emoji data set from `emoji-mart` */
-  emojiData?: EmojiMartData;
-  /** Custom UI component to override default `NimbleEmojiIndex` from `emoji-mart` */
-  EmojiIndex?: EmojiContextValue['EmojiIndex'];
   /** Custom UI component for rendering button with emoji picker in MessageInput */
   EmojiPicker?: ComponentContextValue<StreamChatGenerics>['EmojiPicker'];
   /** Custom UI component to be shown if no active channel is set, defaults to null and skips rendering the Channel component */
@@ -319,7 +310,6 @@ const ChannelInner = <
     doSendMessageRequest,
     doUpdateMessageRequest,
     dragAndDropWindow = false,
-    emojiData = defaultEmojiData,
     enrichURLForPreviewConfig,
     initializeOnMount = true,
     LoadingErrorIndicator = DefaultLoadingErrorIndicator,
@@ -368,13 +358,6 @@ const ChannelInner = <
 
   const channelCapabilitiesArray = channel.data?.own_capabilities as string[];
 
-  const emojiConfig: EmojiConfig = {
-    commonEmoji,
-    defaultMinimalEmojis,
-    emojiData,
-    emojiSetDef,
-  };
-
   const throttledCopyStateFromChannel = throttle(
     () => dispatch({ channel, type: 'copyStateFromChannelOnEvent' }),
     500,
@@ -1002,14 +985,6 @@ const ChannelInner = <
     [props.reactionOptions],
   );
 
-  const emojiContextValue: EmojiContextValue = useMemo(
-    () => ({
-      emojiConfig,
-      EmojiIndex: props.EmojiIndex,
-    }),
-    [],
-  );
-
   const typingContextValue = useCreateTypingContext({
     typing,
   });
@@ -1045,16 +1020,14 @@ const ChannelInner = <
       <ChannelStateProvider value={channelStateContextValue}>
         <ChannelActionProvider value={channelActionContextValue}>
           <ComponentProvider value={componentContextValue}>
-            <EmojiProvider value={emojiContextValue}>
-              <TypingProvider value={typingContextValue}>
-                <div className={`${chatContainerClass}`}>
-                  {dragAndDropWindow && (
-                    <DropzoneProvider {...optionalMessageInputProps}>{children}</DropzoneProvider>
-                  )}
-                  {!dragAndDropWindow && <>{children}</>}
-                </div>
-              </TypingProvider>
-            </EmojiProvider>
+            <TypingProvider value={typingContextValue}>
+              <div className={`${chatContainerClass}`}>
+                {dragAndDropWindow && (
+                  <DropzoneProvider {...optionalMessageInputProps}>{children}</DropzoneProvider>
+                )}
+                {!dragAndDropWindow && <>{children}</>}
+              </div>
+            </TypingProvider>
           </ComponentProvider>
         </ChannelActionProvider>
       </ChannelStateProvider>

src/components/ChatAutoComplete/ChatAutoComplete.tsx

@@ -7,12 +7,12 @@ import { useMessageInputContext } from '../../context/MessageInputContext';
 import { useTranslationContext } from '../../context/TranslationContext';
 import { useComponentContext } from '../../context/ComponentContext';
 
-import type { EmojiData, NimbleEmojiIndex } from 'emoji-mart';
-import type { CommandResponse, UserResponse } from 'stream-chat';
+import type { CommandResponse, UR, UserResponse } from 'stream-chat';
 
 import type { TriggerSettings } from '../MessageInput/DefaultTriggerProvider';
 
 import type { CustomTrigger, DefaultStreamChatGenerics } from '../../types/types';
+import { EmojiSearchIndex } from 'components/MessageInput';
 
 type ObjectUnion<T> = T[keyof T];
 
@@ -24,19 +24,30 @@ export type SuggestionUser<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 > = UserResponse<StreamChatGenerics>;
 
+// FIXME: entity type is wrong, fix
 export type SuggestionItemProps<
-  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
+  StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics,
+  T extends UR = UR
 > = {
   className: string;
   component: React.ComponentType<{
-    entity: EmojiData | SuggestionUser<StreamChatGenerics> | SuggestionCommand<StreamChatGenerics>;
+    entity:
+      | ReturnType<EmojiSearchIndex<T>['search']>
+      | SuggestionUser<StreamChatGenerics>
+      | SuggestionCommand<StreamChatGenerics>;
     selected: boolean;
   }>;
-  item: EmojiData | SuggestionUser<StreamChatGenerics> | SuggestionCommand<StreamChatGenerics>;
+  item:
+    | ReturnType<EmojiSearchIndex<T>['search']>
+    | SuggestionUser<StreamChatGenerics>
+    | SuggestionCommand<StreamChatGenerics>;
   key: React.Key;
   onClickHandler: (event: React.BaseSyntheticEvent) => void;
   onSelectHandler: (
-    item: EmojiData | SuggestionUser<StreamChatGenerics> | SuggestionCommand<StreamChatGenerics>,
+    item:
+      | ReturnType<EmojiSearchIndex<T>['search']>
+      | SuggestionUser<StreamChatGenerics>
+      | SuggestionCommand<StreamChatGenerics>,
   ) => void;
   selected: boolean;
   style: React.CSSProperties;
@@ -104,7 +115,7 @@ export type ChatAutoCompleteProps = {
   /** The text value of the underlying `textarea` component */
   value?: string;
   /** Function to override the default emojiReplace behavior on the `wordReplace` prop of the `textarea` component */
-  wordReplace?: (word: string, emojiIndex?: NimbleEmojiIndex) => string;
+  wordReplace?: (word: string, emojiIndex?: EmojiSearchIndex) => string;
 };
 
 const UnMemoizedChatAutoComplete = <
@@ -120,20 +131,21 @@ const UnMemoizedChatAutoComplete = <
   const { t } = useTranslationContext('ChatAutoComplete');
 
   const messageInput = useMessageInputContext<StreamChatGenerics, V>('ChatAutoComplete');
-  const { cooldownRemaining, disabled, emojiIndex, textareaRef: innerRef } = messageInput;
+  const { cooldownRemaining, disabled, emojiSearchIndex, textareaRef: innerRef } = messageInput;
 
   const placeholder = props.placeholder || t('Type your message');
 
   const emojiReplace = props.wordReplace
-    ? (word: string) => props.wordReplace?.(word, emojiIndex)
-    : (word: string) => {
-        const found = emojiIndex?.search(word) || [];
+    ? (word: string) => props.wordReplace?.(word, emojiSearchIndex)
+    : async (word: string) => {
+        const found = (await emojiSearchIndex?.search(word)) || [];
         const emoji = found
           .filter(Boolean)
           .slice(0, 10)
-          .find(({ emoticons }: EmojiData) => !!emoticons?.includes(word));
-        if (!emoji || !('native' in emoji)) return null;
-        return emoji.native;
+          .find(({ emoticons }) => !!emoticons?.includes(word));
+        if (!emoji) return null;
+        const [firstSkin] = emoji.skins;
+        return firstSkin.native;
       };
 
   const updateInnerRef = useCallback(

src/components/MessageInput/DefaultTriggerProvider.tsx

@@ -9,8 +9,6 @@ import {
   useMessageInputContext,
 } from '../../context/MessageInputContext';
 
-import type { EmojiData } from 'emoji-mart';
-
 import type { SuggestionCommand, SuggestionUser } from '../ChatAutoComplete/ChatAutoComplete';
 import type { CommandItemProps } from '../CommandItem/CommandItem';
 import type { EmoticonItemProps } from '../EmoticonItem/EmoticonItem';
@@ -27,7 +25,7 @@ export type CommandTriggerSetting<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
 > = TriggerSetting<CommandItemProps, SuggestionCommand<StreamChatGenerics>>;
 
-export type EmojiTriggerSetting = TriggerSetting<EmoticonItemProps, EmojiData>;
+export type EmojiTriggerSetting = TriggerSetting<EmoticonItemProps>;
 
 export type UserTriggerSetting<
   StreamChatGenerics extends DefaultStreamChatGenerics = DefaultStreamChatGenerics
@@ -39,7 +37,7 @@ export type TriggerSetting<T extends UnknownType = UnknownType, U = UnknownType>
     query: string,
     text: string,
     onReady: (data: (U & AutocompleteMinimalData)[], token: string) => void,
-  ) => U[] | Promise<void> | void;
+  ) => U[] | PromiseLike<void> | void;
   output: (
     entity: U,
   ) =>
@@ -76,7 +74,7 @@ export const DefaultTriggerProvider = <
 
   const defaultAutocompleteTriggers: TriggerSettings<StreamChatGenerics> = {
     '/': useCommandTrigger<StreamChatGenerics>(),
-    ':': useEmojiTrigger(currentValue.emojiIndex),
+    ':': useEmojiTrigger(currentValue.emojiSearchIndex),
     '@': useUserTrigger<StreamChatGenerics>({
       disableMentions: currentValue.disableMentions,
       mentionAllAppUsers: currentValue.mentionAllAppUsers,