forked from coracle/flotilla
Jon Staab
c5be477855
The emoji grid wasn't rendering on Android because emoji-picker-element defaults to fetching its data.json from jsdelivr, and CapacitorHttp's patched fetch breaks the library's ETag-based revalidation flow. Bundle emoji-picker-element-data via Vite's ?url import so the JSON ships as a same-origin asset. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
31 lines
751 B
Svelte
31 lines
751 B
Svelte
<style>
|
|
@media (max-width: 450px) {
|
|
emoji-picker {
|
|
max-width: 100%;
|
|
--num-columns: 6;
|
|
--category-emoji-size: 1.125rem;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import "emoji-picker-element"
|
|
import emojiDataUrl from "emoji-picker-element-data/en/emojibase/data.json?url"
|
|
import type {Emoji} from "emoji-picker-element/shared"
|
|
import {onMount} from "svelte"
|
|
|
|
interface Props {
|
|
onClick: (emoji: Emoji) => void
|
|
}
|
|
|
|
const {onClick}: Props = $props()
|
|
|
|
let element: Element | undefined = $state()
|
|
|
|
onMount(() => {
|
|
element?.addEventListener("emoji-click", (event: any) => onClick(event.detail as Emoji))
|
|
})
|
|
</script>
|
|
|
|
<emoji-picker bind:this={element} data-source={emojiDataUrl} class="m-auto"></emoji-picker>
|