| 1 | <script lang="ts"> |
| 2 | import { segmentEmoji, twemojiUrl } from './twemoji'; |
| 3 | |
| 4 | export let text: string; |
| 5 | |
| 6 | let failed = new Set<string>(); |
| 7 | $: segments = segmentEmoji(text); |
| 8 | </script> |
| 9 | |
| 10 | {#each segments as segment}{#if segment.emoji && !failed.has(segment.text)}<span class="composer-emoji">{segment.text}<img src={twemojiUrl(segment.text)} alt="" draggable="false" on:error={() => (failed = new Set([...failed, segment.text]))} /></span>{:else}{segment.text}{/if}{/each} |
| 11 | |
| 12 | <style> |
| 13 | .composer-emoji { position: relative; color: transparent; } |
| 14 | .composer-emoji img { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 1.15em; object-fit: contain; } |
| 15 | </style> |