Svelte Integration

[halafi]

in case anyone would find this useful, as I do not have time for putting it into PR, but I seemed to have resolved most issues I had when using this inside a svelte component (except category click is sometimes not working, but most of time it does)

it shouldn't be too much work to put this into emoji-mart-svelte package

EmojiMart.svelte:

<script>
  import { Picker } from "emoji-mart";
  import { onMount, createEventDispatcher, onDestroy } from "svelte";

  let emojiPickerEl;
  let picker;
  let mounted = false;

  const dispatch = createEventDispatcher();

  onMount(() => {
    picker = new Picker({
      theme: "light",
      autoFocus: true,
      onClickOutside: () => {
        if (mounted) dispatch("close");
      },
      onEmojiSelect: (emoji) => {
        dispatch("select", emoji);
      },
    });
    emojiPickerEl.appendChild(picker);
    setTimeout(() => {
      // ensure click outside works
      mounted = true;
    }, 1);
  });

  onDestroy(() => {
    // the clickoutside handler is not unregistered properly, so this is probably redundant
    picker = null;
    emojiPickerEl = null;
  });
</script>

<div on:click|preventDefault|stopPropagation bind:this={emojiPickerEl} />

usage:

    <EmojiMart
      on:select={(ev) => handleEmojiSelect(ev.detail)}
      on:close={() => emojiPickerVisible = false}
    />