Twemoji

1import type { ReactNode } from "react"
2 
3import { cn } from "@/lib/utils"
4import emojiRegex from "@/registry/components/twemoji/lib/twemoji-regex"
5 
6const VARIATION_SELECTOR_16 = /\uFE0F/g
7const ZERO_WIDTH_JOINER = String.fromCharCode(0x200d)
8 
9export const TWEMOJI_CDN_URL = "https://abs-0.twimg.com/emoji/v2/svg"
10 
11export type TwemojiProps = {
12  children: string
13  className?: string
14  /**
15   * Resolve an emoji code point to an image URL.
16   *
17   * @param codePoint - The Unicode code point of the emoji (e.g. `1f44d`)
18   * @returns The URL string pointing to the emoji image asset
19   *
20   * @example
21   * ```tsx
22   * source={(codePoint) => `https://cdn.example.com/emoji/${codePoint}.svg`}
23   * ```
24   * */
25  source?: (codePoint: string) => string
26}
27 
28export function Twemoji({
29  children,
30  className,
31  source = defaultSource,
32}: TwemojiProps) {
33  const parts: ReactNode[] = []
34  let lastIndex = 0
35  const globalRegex = new RegExp(emojiRegex.source, "g")
36  let match
37 
38  while ((match = globalRegex.exec(children)) !== null) {
39    if (match.index > lastIndex) {
40      parts.push(children.substring(lastIndex, match.index))
41    }
42 
43    const rawText = match[0]
44    const codePoint = getEmojiCodePoint(rawText)
45 
46    if (codePoint) {
47      parts.push(
48        <img
49          key={match.index}
50          className={cn("twemoji", className)}
51          draggable={false}
52          alt={rawText}
53          src={source(codePoint)}
54        />
55      )
56    } else {
57      parts.push(rawText)
58    }
59 
60    lastIndex = globalRegex.lastIndex
61  }
62 
63  if (lastIndex < children.length) {
64    parts.push(children.substring(lastIndex))
65  }
66 
67  return <>{parts}</>
68}
69 
70function getEmojiCodePoint(rawText: string) {
71  return toCodePoint(
72    rawText.indexOf(ZERO_WIDTH_JOINER) < 0
73      ? rawText.replace(VARIATION_SELECTOR_16, "")
74      : rawText
75  )
76}
77 
78function toCodePoint(unicodeSurrogates: string, sep = "-") {
79  const result: string[] = []
80  let code = 0
81  let previous = 0
82  let i = 0
83 
84  while (i < unicodeSurrogates.length) {
85    code = unicodeSurrogates.charCodeAt(i++)
86    if (previous) {
87      result.push(
88        (0x10000 + ((previous - 0xd800) << 10) + (code - 0xdc00)).toString(16)
89      )
90      previous = 0
91    } else if (0xd800 <= code && code <= 0xdbff) {
92      previous = code
93    } else {
94      result.push(code.toString(16))
95    }
96  }
97 
98  return result.join(sep)
99}
100 
101function defaultSource(codePoint: string) {
102  return `${TWEMOJI_CDN_URL}/${codePoint}.svg`
103}