diff --git a/README.md b/README.md index 51f7d5788..24b89f18c 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ - [🏪 Picker](#-picker) - [🙃 Emoji component](#-emoji-component) - [🕵️‍♀️ Headless search](#%EF%B8%8F%EF%B8%8F-headless-search) +- [🔬 Get emoji data from native](#-get-emoji-data-from-native) - [🗺 Internationalization](#-internationalization) - [📚 Examples](#-examples) - [🤓 Built for modern browsers](#-built-for-modern-browsers) @@ -214,7 +215,7 @@ Then you can use the emoji component in your HTML / JSX. | **skin** | `1` | The emoji skin tone: `1`, `2`, `3`, `4`, `5`, `6` | ## 🕵️‍♀️ Headless search -You can search without the Picker. Just like the emoji component, `data` needs to be initialized first in order to use the search index. It can also be used to return emoji data when providing a native emoji. +You can search without the Picker. Just like the emoji component, `data` needs to be initialized first in order to use the search index. ```js import data from '@emoji-mart/data' @@ -232,7 +233,27 @@ async function search(value) { } search('christmas') // => ['🎄', '🇨🇽', '🧑‍🎄', '🔔', '🤶', '🎁', '☃️', '❄️', '🎅', '⛄'] -search('🤞🏼') // => ['🤞'] +``` + +## 🔬 Get emoji data from native +You can get emoji data from a native emoji. This is useful if you want to get the emoji ID from a native emoji. Just like the emoji component, `data` needs to be initialized first in order to retrieve the emoji data. + +```js +import data from '@emoji-mart/data' +import { init, getEmojiDataFromNative } from 'emoji-mart' + +init({ data }) + +getEmojiDataFromNative('🤞🏿').then(console.log) +/* { + aliases: ['hand_with_index_and_middle_fingers_crossed'], + id: 'crossed_fingers', + keywords: ['hand', 'with', 'index', 'and', 'middle', 'good', 'lucky'], + name: 'Crossed Fingers', + native: '🤞🏿', + shortcodes: ':crossed_fingers::skin-tone-6:', + unified: '1f91e-1f3ff', +} */ ``` ## 🗺 Internationalization diff --git a/packages/emoji-mart/README.md b/packages/emoji-mart/README.md index 6025d37cf..24b89f18c 100644 --- a/packages/emoji-mart/README.md +++ b/packages/emoji-mart/README.md @@ -11,6 +11,7 @@ - [🏪 Picker](#-picker) - [🙃 Emoji component](#-emoji-component) - [🕵️‍♀️ Headless search](#%EF%B8%8F%EF%B8%8F-headless-search) +- [🔬 Get emoji data from native](#-get-emoji-data-from-native) - [🗺 Internationalization](#-internationalization) - [📚 Examples](#-examples) - [🤓 Built for modern browsers](#-built-for-modern-browsers) @@ -25,7 +26,7 @@ Data required for the picker to work has been completely decoupled from the libr - **Cons:** Slower initial page load (bigger file to load) ```sh -yarn install @emoji-mart/data +yarn add @emoji-mart/data ``` ```js @@ -214,7 +215,7 @@ Then you can use the emoji component in your HTML / JSX. | **skin** | `1` | The emoji skin tone: `1`, `2`, `3`, `4`, `5`, `6` | ## 🕵️‍♀️ Headless search -You can search without the Picker. Just like the emoji component, `data` needs to be initialized first in order to use the search index. It can also be used to return emoji data when providing a native emoji. +You can search without the Picker. Just like the emoji component, `data` needs to be initialized first in order to use the search index. ```js import data from '@emoji-mart/data' @@ -232,7 +233,27 @@ async function search(value) { } search('christmas') // => ['🎄', '🇨🇽', '🧑‍🎄', '🔔', '🤶', '🎁', '☃️', '❄️', '🎅', '⛄'] -search('🤞🏼') // => ['🤞'] +``` + +## 🔬 Get emoji data from native +You can get emoji data from a native emoji. This is useful if you want to get the emoji ID from a native emoji. Just like the emoji component, `data` needs to be initialized first in order to retrieve the emoji data. + +```js +import data from '@emoji-mart/data' +import { init, getEmojiDataFromNative } from 'emoji-mart' + +init({ data }) + +getEmojiDataFromNative('🤞🏿').then(console.log) +/* { + aliases: ['hand_with_index_and_middle_fingers_crossed'], + id: 'crossed_fingers', + keywords: ['hand', 'with', 'index', 'and', 'middle', 'good', 'lucky'], + name: 'Crossed Fingers', + native: '🤞🏿', + shortcodes: ':crossed_fingers::skin-tone-6:', + unified: '1f91e-1f3ff', +} */ ``` ## 🗺 Internationalization diff --git a/packages/emoji-mart/src/components/Picker/Picker.js b/packages/emoji-mart/src/components/Picker/Picker.js index 47028e20e..0e326a04c 100644 --- a/packages/emoji-mart/src/components/Picker/Picker.js +++ b/packages/emoji-mart/src/components/Picker/Picker.js @@ -1,6 +1,6 @@ import { Component, createRef } from 'preact' -import { deepEqual, sleep } from '../../utils' +import { deepEqual, sleep, getEmojiData } from '../../utils' import { Data, I18n, init } from '../../config' import { SearchIndex, Store, FrequentlyUsed } from '../../helpers' import Icons from '../../icons' @@ -586,27 +586,7 @@ export default class Picker extends Component { } if (emoji) { - const skin = emoji.skins[this.state.skin - 1] || emoji.skins[0] - const emojiData = { - id: emoji.id, - name: emoji.name, - native: skin.native, - unified: skin.unified, - keywords: emoji.keywords, - shortcodes: skin.shortcodes || emoji.shortcodes, - } - - if (skin.src) { - emojiData.src = skin.src - } - - if (emoji.aliases && emoji.aliases.length) { - emojiData.aliases = emoji.aliases - } - - if (emoji.emoticons && emoji.emoticons.length) { - emojiData.emoticons = emoji.emoticons - } + const emojiData = getEmojiData(emoji, { skinIndex: this.state.skin - 1 }) if (this.props.maxFrequentRows) { FrequentlyUsed.add(emojiData, this.props) diff --git a/packages/emoji-mart/src/index.js b/packages/emoji-mart/src/index.js index 5c35ae887..64b0b1434 100644 --- a/packages/emoji-mart/src/index.js +++ b/packages/emoji-mart/src/index.js @@ -4,3 +4,5 @@ export { EmojiElement as Emoji } from './components/Emoji' export { SearchIndex, FrequentlyUsed } from './helpers' export { init, Data, I18n } from './config' + +export { getEmojiDataFromNative } from './utils' diff --git a/packages/emoji-mart/src/utils.js b/packages/emoji-mart/src/utils.js index 1b98ae8ee..1cddc37dd 100644 --- a/packages/emoji-mart/src/utils.js +++ b/packages/emoji-mart/src/utils.js @@ -1,3 +1,5 @@ +import { SearchIndex } from './helpers' + export function deepEqual(a, b) { return ( Array.isArray(a) && @@ -12,3 +14,50 @@ export async function sleep(frames = 1) { await new Promise(requestAnimationFrame) } } + +export function getEmojiData(emoji, { skinIndex } = {}) { + const skin = emoji.skins[skinIndex] || emoji.skins[0] + const emojiData = { + id: emoji.id, + name: emoji.name, + native: skin.native, + unified: skin.unified, + keywords: emoji.keywords, + shortcodes: skin.shortcodes || emoji.shortcodes, + } + + if (skin.src) { + emojiData.src = skin.src + } + + if (emoji.aliases && emoji.aliases.length) { + emojiData.aliases = emoji.aliases + } + + if (emoji.emoticons && emoji.emoticons.length) { + emojiData.emoticons = emoji.emoticons + } + + return emojiData +} + +export async function getEmojiDataFromNative(nativeString) { + const results = await SearchIndex.search(nativeString, { + maxResults: 1, + caller: 'getEmojiDataFromNative', + }) + if (!results || !results.length) return null + + const emoji = results[0] + let skinIndex = 0 + + for (let skin of emoji.skins) { + if (skin.native == nativeString) { + break + } + + skinIndex++ + } + + return getEmojiData(emoji, { skinIndex }) +}