Questions about the Emoji pro extension

[rfgamaral]

Hi there 👋,

I'm looking at the Emoji pro extension and wondering how and if it would be possible to achieve something with it. Instead of having the native system emojis being rendered, how could I render Twemoji emojis?

Is this possible to achieve with the extension itself in some way? Or maybe, through a decoration of some kind?

Kind regards,
Ricardo.

[philippkuehn]

It’s already possible to use a custom set of emojis with a custom set of fallback images. But you would also want to force the fallback image to be rendered, right?

[rfgamaral]

But you would also want to force the fallback image to be rendered, right?

Yes. Ideally, I wouldn't want to have to map everything from Twemoji to a custom set (so that I could still take advantage of the built-in emoticons and tags), but only map the unicode emoji characters to a specific fallback image, and have that rendered instead (the extension could probably benefit from an option to pick if one wants to render the unicode emoji or the fallback image).

[philippkuehn]

I added an forceFallbackImages option 👍
You can also replace the fallback images. It probably makes sense to cache the array somehow.

import Emoji, { emojis } from '@tiptap-pro/extension-emoji'

Emoji.configure({
  forceFallbackImages: true,
  emojis: emojis.map(emoji => {
    return {
      ...emoji,
      fallbackImage: 'http://...', // set your custom Twemoji image here 
    }
  })
})

[rfgamaral]

Awesome, that looks like a great solution. Thanks for adding this.

It probably makes sense to cache the array somehow.

Yeah, I thought about this already, and I'm thinking that I could build the array at build time instead of caching it. But as long as we are not building the array every time the extension is configured, we should be fine :)

[rfgamaral]

@philippkuehn Sorry, but I have another question about the enableEmoticons option. Is the mapping configurable? For instance, typing :) converts to 🙂, what if I wanted to convert this to 😊 instead. Is this possible with this extension?

[rfgamaral]

So it's easy to override the emojis array to change a few emoji mappings, right? Could you post the full object from the 🙂 emoji inside the emojis array, so I could better understand how everything is tied together? That would be really helpful 🙏

The list is based on emojibase btw emojibase.dev/docs/emoticons

Awesome. Just one last question, is Emojibase data bundled with or is it a dep/peerDep of @tiptap-pro/extension-emoji?

[philippkuehn]

So it's easy to override the emojis array to change a few emoji mappings, right?

Yes. It’s totally fine to use a custom list of emoji items.

Could you post the full object from the 🙂 emoji inside the emojis array, so I could better understand how everything is tied together? That would be really helpful 🙏

You can easily find it by yourself:

import { emojis } from '@tiptap-pro/extension-emoji'

const item = emojis.find(item => item.emoji === '🙂')

Everything is typed so the EmojiItem type maybe is also helpful to you.

Just one last question, is Emojibase data bundled with or is it a dep/peerDep of @tiptap-pro/extension-emoji?

There is a build script to generate these custom arrays (emojis, gitHubEmojis and gitHubCustomEmojis) based on emojibase-data and emoji-datasource. All these arrays are part of the bundled emoji extension package.

[rfgamaral]

Sorry, @philippkuehn, I probably wasn't very clear, but I don't yet have access to the extension. Still evaluating the flexibility, that's why I'm making all these questions.

Thank you for all your support 👍

[philippkuehn]

Ah! Sorry about that. That’s the structure of an emoji item:

{
  emoji: '😉',
  name: 'wink',
  shortcodes: [
    'wink',
    'winking_face',
  ],
  tags: [
    'face',
    'wink',
  ],
  group: 'smileys & emotion',
  emoticons: [
    ';)',
  ],
  version: 0.6,
  fallbackImage: 'https://cdn.jsdelivr.net/npm/emoji-datasource-apple/img/apple/64/1f609.png',
}

[rfgamaral]

Looks great. Thanks :)