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

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:

1. The default emojis list, which contains all Unicode emojis of version 14.1
2. An extended gitHubEmojis list, which also contains custom emojis like :octocat:

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

Emoji.configure({
  emojis: gitHubEmojis,
})

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

Read more

Emoji.configure({
  suggestion: {
    // …
  },
})