<div class="docs-content" data-render>
# emoji-picker

A vendored third-party emoji picker (`emoji-picker-element`) with category browsing, search, and
skin-tone selection. `EmojiPickerElement` (`static/js/EmojiPickerElement.js`) is the single wrapper
that lazily loads the vendor module and builds a configured element; two consumers use it. The
`EmojiPicker` wrapper inserts the chosen emoji at the cursor of textareas marked
`.emoji-picker-target`, and the reaction bar opens it from the `+` button next to the quick-pick
palette so any emoji can be used as a reaction.

Source: `static/vendor/emoji-picker-element/`.

## Attributes

| Attribute | Description |
|---|---|
| `locale` | Language for emoji labels (for example `en`). |
| `skin-tone-emoji` | Default skin-tone emoji. |
| `emoji-version` | Restrict to a Unicode emoji version. |

## Events

| Event | Detail |
|---|---|
| `emoji-click` | `{ unicode, emoji, ... }` for the chosen emoji (primary event). |
| `skin-tone-change` | The selected skin tone. |

## Usage

```html
&lt;emoji-picker&gt;&lt;/emoji-picker&gt;
```

```javascript
picker.addEventListener("emoji-click", (event) => {
    insert(event.detail.unicode);
});
```
</div>

<div class="component-demo">
    <div class="component-demo-title">Live example - pick an emoji</div>
    <div class="component-demo-stage">
        <emoji-picker></emoji-picker>
        <span id="emoji-demo-result" class="text-muted">No emoji selected yet.</span>
    </div>
</div>
<script type="module">
    import "{{ static_url('/static/vendor/emoji-picker-element/index.js') }}";
    const result = document.getElementById("emoji-demo-result");
    document.querySelector(".component-demo emoji-picker").addEventListener("emoji-click", (event) => {
        result.textContent = `Selected: ${event.detail.unicode}`;
    });
</script>
