Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add instructions on how to get localized emoji data #899

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 28 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -260,7 +260,10 @@ getEmojiDataFromNative('🤞🏿').then(console.log)
```

## 🗺 Internationalization
EmojiMart UI supports [multiple languages](https://github.com/missive/emoji-mart/tree/main/packages/emoji-mart-data/i18n), feel free to open a PR if yours is missing.

### UI

The EmojiMart UI supports [multiple languages](https://github.com/missive/emoji-mart/tree/main/packages/emoji-mart-data/i18n), feel free to open a PR if yours is missing.

```js
import i18n from '@emoji-mart/data/i18n/fr.json'
Expand All @@ -271,6 +274,30 @@ new Picker({ i18n })

Given the small file size, English is built-in and doesn’t need to be provided.

### Emoji data

The emoji data (the one you use via ```import data from '@emoji-mart/data'```) is always in english.

If you want to have a localized search and picker, you can follow the steps provided by @baumerdev in
[this issue](https://github.com/missive/emoji-mart/issues/830#issuecomment-1834316042):

For example, to get a german (de) data file:

1. Download https://raw.githubusercontent.com/unicode-org/cldr-json/main/cldr-json/cldr-annotations-full/annotations/de/annotations.json and save it as ./cldr/de-full.json
2. Download https://raw.githubusercontent.com/unicode-org/cldr-json/main/cldr-json/cldr-annotations-derived-full/annotationsDerived/de/annotations.json and save it as ./cldr/de-derived.json
3. Download https://raw.githubusercontent.com/missive/emoji-mart/main/packages/emoji-mart-data/sets/14/native.json and save it as ./data.json
4. Download https://raw.githubusercontent.com/missive/emoji-mart/main/i18n/convert.mjs and save it as ./convert.mjs
5. Run node convert.mjs
6. You now have a file data-de.json that you can import, see the example above beginning with import dataDE from "data-de.json";

```
import dataDE from 'data-de.json';
...
<Picker data={dataDE} locale='de' />
```

If you need any other language, you have to replace the de in the URLs, file names and within the convert script.

## 📚 Examples

- [Categories](https://missiveapp.com/open/emoji-mart/example-categories.html)
Expand Down
42 changes: 42 additions & 0 deletions i18n/convert.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import fs from 'node:fs'

// ️Variation Selector-16
const VS16 = '\ufe0f'
// Zero Width Joiner
const ZWJ = '\u200D'
// Remove VS16 and ZWJ from emoji to compare CLDR / emoji-mart data
const strippedEmoji = (emoji) => emoji.replaceAll(VS16, '').replaceAll(ZWJ, '')

// Read emoji-mart data
let data = JSON.parse(fs.readFileSync('data.json', 'utf-8'))

// Read CLDR data
let deFull = JSON.parse(fs.readFileSync('cldr/de-full.json', 'utf-8'))
let deDerived = JSON.parse(fs.readFileSync('cldr/de-derived.json', 'utf-8'))

// Combine data
for (let emojiId in data.emojis) {
let emojiData = data.emojis[emojiId]
let emoji = strippedEmoji(emojiData.skins[0].native)

const deFullEmoji = Object.keys(deFull.annotations.annotations).find(
(deFullEmoji) => emoji === strippedEmoji(deFullEmoji),
)
if (deFullEmoji) {
emojiData.name = deFull.annotations.annotations[deFullEmoji].tts[0]
emojiData.keywords = deFull.annotations.annotations[deFullEmoji].default
}

const deDerivedEmoji = Object.keys(
deDerived.annotationsDerived.annotations,
).find((deDerivedEmoji) => emoji === strippedEmoji(deDerivedEmoji))
if (deDerivedEmoji) {
emojiData.name =
deDerived.annotationsDerived.annotations[deDerivedEmoji].tts[0]
emojiData.keywords =
deDerived.annotationsDerived.annotations[deDerivedEmoji].default
}
}

// Write localized data
fs.writeFileSync('data-de.json', JSON.stringify(data))
Loading