phanpy/src/components/emoji-text.jsx
Lim Chee Aun d4dca0e81f Support non-rectangular custom emojis 😩
Platforms like Misskey have irregularly-shaped custom emojis (emojos?)

- So far this handles horizontally-wide emojis, not tall ones (haven't seen any)
- text-overflow: ellipsis is not used because it can't ellipsis-fy wide emoji images
2023-09-24 15:45:01 +08:00

34 lines
871 B
JavaScript

function EmojiText({ text, emojis }) {
if (!text) return '';
if (!emojis?.length) return text;
if (text.indexOf(':') === -1) return text;
const regex = new RegExp(
`:(${emojis.map((e) => e.shortcode).join('|')}):`,
'g',
);
const elements = text.split(regex).map((word) => {
const emoji = emojis.find((e) => e.shortcode === word);
if (emoji) {
const { url, staticUrl } = emoji;
return (
<picture>
<source srcset={staticUrl} media="(prefers-reduced-motion: reduce)" />
<img
key={word}
src={url}
alt={word}
class="shortcode-emoji emoji"
width="16"
height="16"
loading="lazy"
decoding="async"
/>
</picture>
);
}
return word;
});
return elements;
}
export default EmojiText;