Custom emojis category

[missive]

Custom emojis category

[felixtosh]

Hi @EtienneLem - how would one go about adding that custom prop? Is this a hack or sth already available?

Cheers,
F

[mc962]

I'm also curious about how to do this.

[sonicdoe]

I’m thinking about making a pull request and would like to discuss how we should implement this beforehand. Here’s what I have thought of:

import { Picker } from 'emoji-mart'

const customEmojis = [
  {
    id: 'octocat',
    name: 'Octocat',
    colons: ':octocat:',
    keywords: ['github'],
    emoticons: [],
    imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
  }
]

<Picker custom={customEmojis} />

The name, colons, keywords, and emoticons properties would be used for searching.

The above would render something like this:

The emoji object one would receive onClick would look like this:

{
  id: 'octocat',
  name: 'Octocat',
  colons: ':octocat',
  emoticons: [],
  custom: true,
  imageUrl: 'https://assets-cdn.github.com/images/icons/emoji/octocat.png?v7'
}

The custom property would make it easy to distinguish between official unicode emoji and custom emoji images.

Additionally, I would add the custom category to the I18N object so users can provide a different category name.

@EtienneLem It would be great if you could take a look at this and let me know what you think.

[EtienneLem]

I love it! That’s how simple I imagined it. Perhaps the custom props could be an object that looks like { name: 'Custom', emojis: [], anchorUrl: '' } so that the anchor can also be customized. I like the idea of customizing the name through I18N, so either works for me.

For the search, it’s simply a substr search on a concatenated string of name, short_names, keywords and emoticons (in that order). It’s okay to pass an extra param to EmojiIndex#search with the custom emojis because the lib does claim to be searchable even without being mounted 😄 Happy to chip in the PR at some point if you need help

Also, both colons and id are short_names[0] where short_names is an array of known… well short names I guess. Most of them only have 1, but some have more, i.e.

That emoji looks like:

{
  name: 'Smiling Face with Open Mouth and Tightly-Closed Eyes',
  short_names: ['laughing', 'satisfied'],
  emoticons: [':>', ':->'],
}

and that’s all EmojiMart needs and will return a sanitized emoji object on click. However, it may get complicated in that area (getSanitizedData and friends). So yeah, just pointing it out. It may be less complicated to have the custom emojis data a little bit different from the original ones. The Preview component do expect short_names though.

I feel like saying more would confuse you more than help you 😅
I’ll let you have have a first go at it. Don’t hesitate to ping me ✌️