| 1 | import { Fragment, type ReactNode } from "react"; |
| 2 | |
| 3 | import { emojiUrl, splitShortcodes } from "../../lib/emoji"; |
| 4 | |
| 5 | /** |
| 6 | * One of the workspace's own emoji, inline: an image from the usercontent |
| 7 | * origin, the size of the text around it unless told otherwise, with its |
| 8 | * `:name:` as the words a screen reader and a copy get. |
| 9 | */ |
| 10 | export function CustomEmojiImage({ |
| 11 | name, |
| 12 | file, |
| 13 | usercontent, |
| 14 | size, |
| 15 | className = "", |
| 16 | }: { |
| 17 | name: string; |
| 18 | file: string; |
| 19 | usercontent: string; |
| 20 | /** Pixels; unset is 1.375em, a little over the line's text. */ |
| 21 | size?: number; |
| 22 | className?: string; |
| 23 | }) { |
| 24 | return ( |
| 25 | <img |
| 26 | src={emojiUrl(file, usercontent)} |
| 27 | alt={`:${name}:`} |
| 28 | draggable={false} |
| 29 | loading="lazy" |
| 30 | decoding="async" |
| 31 | className={`inline-block object-contain align-[-0.3em] ${className}`} |
| 32 | style={size ? { width: size, height: size } : { width: "1.375em", height: "1.375em" }} |
| 33 | /> |
| 34 | ); |
| 35 | } |
| 36 | |
| 37 | /** |
| 38 | * Text with each `:name:` of a workspace emoji drawn as its image, and |
| 39 | * everything else as text. Never HTML: the parts are React nodes. |
| 40 | */ |
| 41 | export function renderEmoji(text: string, byName: ReadonlyMap<string, string>, usercontent: string, size?: number): ReactNode { |
| 42 | const parts = splitShortcodes(text, byName); |
| 43 | if (parts.length === 1 && parts[0]!.t === "text") return text; |
| 44 | return parts.map((part, index) => |
| 45 | part.t === "text" ? ( |
| 46 | <Fragment key={index}>{part.v}</Fragment> |
| 47 | ) : ( |
| 48 | <CustomEmojiImage key={index} name={part.name} file={part.file} usercontent={usercontent} size={size} /> |
| 49 | ), |
| 50 | ); |
| 51 | } |
| 52 | |
| 53 | /** One emoji as a reaction or a pick shows it: a Unicode one as text, a workspace one as its image. */ |
| 54 | export function EmojiGlyph({ |
| 55 | emoji, |
| 56 | byName, |
| 57 | usercontent, |
| 58 | size = 18, |
| 59 | }: { |
| 60 | emoji: string; |
| 61 | byName: ReadonlyMap<string, string>; |
| 62 | usercontent: string; |
| 63 | size?: number; |
| 64 | }) { |
| 65 | const custom = /^:([a-z0-9_+-]{2,32}):$/.exec(emoji); |
| 66 | if (custom) { |
| 67 | const file = byName.get(custom[1]!); |
| 68 | return file ? ( |
| 69 | <CustomEmojiImage name={custom[1]!} file={file} usercontent={usercontent} size={size} /> |
| 70 | ) : ( |
| 71 | <span className="text-xs text-muted">{emoji}</span> |
| 72 | ); |
| 73 | } |
| 74 | return ( |
| 75 | <span className="leading-none" style={{ fontSize: size }}> |
| 76 | {emoji} |
| 77 | </span> |
| 78 | ); |
| 79 | } |