Emoji extension
The Emoji
extension renders emojis as an inline node. All inserted (typed, pasted, etc.) emojis will be converted to this node. The benefit of this is that unsupported emojis can be rendered with a fallback image. As soon as you copy text out of the editor, they will be converted back to plain text.
Install
Set up access to Tiptap's private repository
Integrate this pro extension by registering for a free Tiptap account and following our access guide to Tiptap’s private repository.
npm install @tiptap-pro/extension-emoji
Dependencies
To place the popups correctly, we’re using tippy.js in all our examples. You are free to bring your own library, but if you’re fine with it, just install what we use:
npm install tippy.js
Settings
HTMLAttributes
Custom HTML attributes that should be added to the rendered HTML tag.
Emoji.configure({
HTMLAttributes: {
class: 'my-custom-class',
},
})
emojis
Define a set of emojis. Tiptap provides two lists of emojis:
- The default
emojis
list, which contains all Unicode emojis of version 14.1 - An extended
gitHubEmojis
list, which also contains custom emojis like :octocat:
import Emoji, { gitHubEmojis } from '@tiptap-pro/extension-emoji'
Emoji.configure({
emojis: gitHubEmojis,
})
Skin tones
Skin tones are not yet supported ✌🏽
enableEmoticons
Specifies whether text should be converted to emoticons (e.g. <3
to ❤️). Defaults to false
.
Emoji.configure({
enableEmoticons: true,
})
forceFallbackImages
Specifies whether fallback images should always be rendered. Defaults to false
.
Emoji.configure({
forceFallbackImages: true,
})
Add custom emojis
It’s super easy to add your own custom emojis.
import Emoji, { emojis } from '@tiptap-pro/extension-emoji'
const customEmojis = [
{
// A unique name of the emoji which will be stored as attribute
name: 'octocat',
// A list of unique shortcodes that are used by input rules to find the emoji
shortcodes: ['octocat'],
// A list of tags that can help for searching emojis
tags: ['cat', 'meow'],
// A name that can help to group emojis
group: 'My custom group of emojis',
// The image to be rendered
fallbackImage: 'https://github.githubassets.com/images/icons/emoji/octocat.png',
},
]
Emoji.configure({
emojis: [...emojis, ...customEmojis],
})
suggestion
Emoji.configure({
suggestion: {
// …
},
})