Replace graphemer with unicode-segmenter (#9526)

* replace graphemer with unicode-segmenter

* use grapheme entrypoint

* force resolution of unicode-segmenter

src/view/com/composer/text-input/TextInput.web.tsx

@@ -20,7 +20,7 @@ import {Text as TiptapText} from '@tiptap/extension-text'
 import {generateJSON} from '@tiptap/html'
 import {Fragment, Node, Slice} from '@tiptap/pm/model'
 import {EditorContent, type JSONContent, useEditor} from '@tiptap/react'
-import Graphemer from 'graphemer'
+import {splitGraphemes} from 'unicode-segmenter/grapheme'
 
 import {useColorSchemeStyle} from '#/lib/hooks/useColorSchemeStyle'
 import {blobToDataUri, isUriImage} from '#/lib/media/util'
@@ -218,7 +218,7 @@ export function TextInput({
                 // all the lines get mushed together -sfn
                 '\n',
               )
-              const graphemes = new Graphemer().splitGraphemes(textBefore)
+              const graphemes = [...splitGraphemes(textBefore)]
 
               if (graphemes.length > 0) {
                 const lastGrapheme = graphemes[graphemes.length - 1]

src/view/com/composer/text-input/hooks/useGrapheme.tsx

@@ -1,36 +0,0 @@
-import {useCallback, useMemo} from 'react'
-import Graphemer from 'graphemer'
-
-export const useGrapheme = () => {
-  const splitter = useMemo(() => new Graphemer(), [])
-
-  const getGraphemeString = useCallback(
-    (name: string, length: number) => {
-      let remainingCharacters = 0
-
-      if (name.length > length) {
-        const graphemes = splitter.splitGraphemes(name)
-
-        if (graphemes.length > length) {
-          remainingCharacters = 0
-          name = `${graphemes.slice(0, length).join('')}…`
-        } else {
-          remainingCharacters = length - graphemes.length
-          name = graphemes.join('')
-        }
-      } else {
-        remainingCharacters = length - name.length
-      }
-
-      return {
-        name,
-        remainingCharacters,
-      }
-    },
-    [splitter],
-  )
-
-  return {
-    getGraphemeString,
-  }
-}