2023-06-14 12:37:41 +03:00
|
|
|
function EmojiText({ text, emojis }) {
|
|
|
|
if (!text) return '';
|
|
|
|
if (!emojis?.length) return text;
|
|
|
|
if (text.indexOf(':') === -1) return text;
|
2023-08-08 09:04:12 +03:00
|
|
|
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) {
|
2023-08-08 10:34:24 +03:00
|
|
|
const { url, staticUrl } = emoji;
|
2023-08-08 09:04:12 +03:00
|
|
|
return (
|
2023-08-08 10:34:24 +03:00
|
|
|
<picture>
|
|
|
|
<source srcset={staticUrl} media="(prefers-reduced-motion: reduce)" />
|
|
|
|
<img
|
|
|
|
key={word}
|
|
|
|
src={url}
|
|
|
|
alt={word}
|
|
|
|
class="shortcode-emoji emoji"
|
|
|
|
width="12"
|
|
|
|
height="12"
|
|
|
|
loading="lazy"
|
|
|
|
decoding="async"
|
|
|
|
/>
|
|
|
|
</picture>
|
2023-06-14 12:37:41 +03:00
|
|
|
);
|
|
|
|
}
|
2023-08-08 09:04:12 +03:00
|
|
|
return word;
|
2023-06-14 12:37:41 +03:00
|
|
|
});
|
2023-08-08 09:04:12 +03:00
|
|
|
return elements;
|
2023-06-14 12:37:41 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
export default EmojiText;
|