moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add a tooltip to custom emoijs with their shortcode 

Ref: https://gitlab.com/soapbox-pub/soapbox/-/issues/1790#note_2217120387
This commit is contained in:
Alex Gleason 2024-11-27 19:10:10 -06:00
parent aa6427d4ba
commit bacbffd5c5
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
1 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/utils/emojify.tsx
View File

@ -1,3 +1,4 @@
import Tooltip from 'soapbox/components/ui/tooltip.tsx';
import { CustomEmoji } from 'soapbox/schemas/custom-emoji.ts'; import { CustomEmoji } from 'soapbox/schemas/custom-emoji.ts';
/** Given text and a list of custom emojis, return JSX with the emojis rendered as `<img>` elements. */ /** Given text and a list of custom emojis, return JSX with the emojis rendered as `<img>` elements. */
@ -15,7 +16,11 @@ export function emojifyText(text: string, emojis: CustomEmoji[]): JSX.Element {
const customEmoji = emojis.find((e) => e.shortcode === shortcode); const customEmoji = emojis.find((e) => e.shortcode === shortcode);
if (customEmoji) { if (customEmoji) {
parts.push(<img key={i} src={customEmoji.url} alt={shortcode} className='inline h-[1em] align-text-bottom' />); parts.push(
<Tooltip key={i} text={`:${shortcode}:`}>
<img src={customEmoji.url} alt={shortcode} className='inline h-[1em] align-text-bottom' />
</Tooltip>,
);
} else { } else {
parts.push(match); parts.push(match);
} }