[Neue] Handle emoji within custom font (#5449)

* Support emoji in text with custom font

* Add emoji support to elements that need it

* Remove unused file causing lint failure

* Fix a few more emoji locations

* Couple more

* No throw

src/view/com/util/text/Text.tsx

@@ -2,27 +2,40 @@ import React from 'react'
 import {StyleSheet, Text as RNText, TextProps} from 'react-native'
 import {UITextView} from 'react-native-uitextview'
 
-import {lh, s} from 'lib/styles'
-import {TypographyVariant, useTheme} from 'lib/ThemeContext'
-import {isIOS, isWeb} from 'platform/detection'
+import {lh, s} from '#/lib/styles'
+import {TypographyVariant, useTheme} from '#/lib/ThemeContext'
+import {logger} from '#/logger'
+import {isIOS} from '#/platform/detection'
 import {applyFonts, useAlf} from '#/alf'
+import {
+  childHasEmoji,
+  childIsString,
+  renderChildrenWithEmoji,
+  StringChild,
+} from '#/components/Typography'
+import {IS_DEV} from '#/env'
 
-export type CustomTextProps = TextProps & {
+export type CustomTextProps = Omit<TextProps, 'children'> & {
   type?: TypographyVariant
   lineHeight?: number
   title?: string
   dataSet?: Record<string, string | number>
   selectable?: boolean
-}
-
-const fontFamilyStyle = {
-  fontFamily:
-    '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Liberation Sans", Helvetica, Arial, sans-serif',
-}
+} & (
+    | {
+        emoji: true
+        children: StringChild
+      }
+    | {
+        emoji?: false
+        children: TextProps['children']
+      }
+  )
 
 export function Text({
   type = 'md',
   children,
+  emoji,
   lineHeight,
   style,
   title,
@@ -35,6 +48,18 @@ export function Text({
   const lineHeightStyle = lineHeight ? lh(theme, type, lineHeight) : undefined
   const {fonts} = useAlf()
 
+  if (IS_DEV) {
+    if (!emoji && childHasEmoji(children)) {
+      logger.warn(
+        `Text: emoji detected but emoji not enabled: "${children}"\n\nPlease add <Text emoji />'`,
+      )
+    }
+
+    if (emoji && !childIsString(children)) {
+      logger.error('Text: when <Text emoji />, children can only be strings.')
+    }
+  }
+
   if (selectable && isIOS) {
     const flattened = StyleSheet.flatten([
       s.black,
@@ -58,7 +83,7 @@ export function Text({
         selectable={selectable}
         uiTextView
         {...props}>
-        {children}
+        {isIOS && emoji ? renderChildrenWithEmoji(children) : children}
       </UITextView>
     )
   }
@@ -66,7 +91,6 @@ export function Text({
   const flattened = StyleSheet.flatten([
     s.black,
     typography,
-    isWeb && fontFamilyStyle,
     lineHeightStyle,
     style,
   ])
@@ -87,7 +111,7 @@ export function Text({
       dataSet={Object.assign({tooltip: title}, dataSet || {})}
       selectable={selectable}
       {...props}>
-      {children}
+      {isIOS && emoji ? renderChildrenWithEmoji(children) : children}
     </RNText>
   )
 }

src/view/com/util/text/ThemedText.tsx

@@ -1,80 +0,0 @@
-import React from 'react'
-import {CustomTextProps, Text} from './Text'
-import {usePalette} from 'lib/hooks/usePalette'
-import {addStyle} from 'lib/styles'
-
-export type ThemedTextProps = CustomTextProps & {
-  fg?: 'default' | 'light' | 'error' | 'inverted' | 'inverted-light'
-  bg?: 'default' | 'light' | 'error' | 'inverted' | 'inverted-light'
-  border?: 'default' | 'dark' | 'error' | 'inverted' | 'inverted-dark'
-  lineHeight?: number
-}
-
-export function ThemedText({
-  fg,
-  bg,
-  border,
-  style,
-  children,
-  ...props
-}: React.PropsWithChildren<ThemedTextProps>) {
-  const pal = usePalette('default')
-  const palInverted = usePalette('inverted')
-  const palError = usePalette('error')
-  switch (fg) {
-    case 'default':
-      style = addStyle(style, pal.text)
-      break
-    case 'light':
-      style = addStyle(style, pal.textLight)
-      break
-    case 'error':
-      style = addStyle(style, {color: palError.colors.background})
-      break
-    case 'inverted':
-      style = addStyle(style, palInverted.text)
-      break
-    case 'inverted-light':
-      style = addStyle(style, palInverted.textLight)
-      break
-  }
-  switch (bg) {
-    case 'default':
-      style = addStyle(style, pal.view)
-      break
-    case 'light':
-      style = addStyle(style, pal.viewLight)
-      break
-    case 'error':
-      style = addStyle(style, palError.view)
-      break
-    case 'inverted':
-      style = addStyle(style, palInverted.view)
-      break
-    case 'inverted-light':
-      style = addStyle(style, palInverted.viewLight)
-      break
-  }
-  switch (border) {
-    case 'default':
-      style = addStyle(style, pal.border)
-      break
-    case 'dark':
-      style = addStyle(style, pal.borderDark)
-      break
-    case 'error':
-      style = addStyle(style, palError.border)
-      break
-    case 'inverted':
-      style = addStyle(style, palInverted.border)
-      break
-    case 'inverted-dark':
-      style = addStyle(style, palInverted.borderDark)
-      break
-  }
-  return (
-    <Text style={style} {...props}>
-      {children}
-    </Text>
-  )
-}