New rich text composer + autocomplete (#10159)

src/lib/merge-refs.ts

@@ -13,7 +13,7 @@
  * returns a ref callback function that can be used to merge multiple refs into a single ref.
  */
 export function mergeRefs<T = any>(
-  refs: Array<React.MutableRefObject<T> | React.Ref<T>>,
+  refs: Array<React.MutableRefObject<T> | React.Ref<T> | undefined>,
 ): React.RefCallback<T> {
   return value => {
     refs.forEach(ref => {

src/lib/useGetEmojis/getEmojis.ts

@@ -0,0 +1,5 @@
+import Emojis, {type EmojiMartData} from '@emoji-mart/data'
+
+export async function getEmojis(): Promise<EmojiMartData> {
+  return Emojis as EmojiMartData
+}

src/lib/useGetEmojis/getEmojis.web.ts

@@ -0,0 +1,5 @@
+import {type EmojiMartData} from '@emoji-mart/data'
+
+export async function getEmojis(): Promise<EmojiMartData> {
+  return (await import('@emoji-mart/data')).default as EmojiMartData
+}

src/lib/useGetEmojis/index.ts

@@ -0,0 +1,12 @@
+import {useCallback} from 'react'
+
+import {getEmojis} from './getEmojis'
+
+let emojis: Awaited<ReturnType<typeof getEmojis>> | null = null
+
+export function useGetEmojis() {
+  return useCallback(async () => {
+    emojis ??= await getEmojis()
+    return emojis
+  }, [])
+}