|
<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. DevPlace loads it globally and wires it to comment forms through the
|
|
`EmojiPicker` wrapper, targeting textareas marked `.emoji-picker-target`.
|
|
|
|
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
|
|
<emoji-picker></emoji-picker>
|
|
```
|
|
|
|
```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/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>
|