Skip to main content

@bangle.dev/emoji

Installation#

# peer depsnpm install @bangle.dev/core @bangle.dev/pmnpm install @bangle.dev/emoji

emoji: Component#

Allows you to show emojis 😎 in your editor.

spec({ ... }): NodeSpec#

Named parameters:

  • getEmoji: fn(emojiAlias: string ) -> string
    A callback that gets called with emojiAlias (a plain text representation of the emoji like smiley, green_book) and should return the emoji character associated with the alias.

  • defaultEmojiAlias: ?string='smiley'
    If alias to use when not provided.

commands: CommandObject#

  • insertEmoji(emojiAlias: string): Command
    A command that inserts an emoji.

Markdown support#

This component supports markdown by serializing emoji nodes into :<emojiAlias>:For example, 😈 will be serialized into :smiling_imp:.

This package uses the npm package markdown-it-emoji to provide this support. It also exports the lite version of the plugin which allows for passing your own emoji dataset.

Sample code for setting up markdown.

import {  markdownParser,  markdownSerializer,  getDefaultMarkdownItTokenizer,} from '@bangle.dev/markdown';import { emoji, emojiMarkdownItPlugin } from '@bangle.dev/emoji';
const myEmojiDefs = {  grinning: 'πŸ˜€',  smiley: 'πŸ˜ƒ',  smile: 'πŸ˜„',  grin: '😁',  laughing: 'πŸ˜†',  satisfied: 'πŸ˜†',  sweat_smile: 'πŸ˜…',  rofl: '🀣',  joy: 'πŸ˜‚',  slightly_smiling_face: 'πŸ™‚',};
const specRegistry = [  // your other specs,  emoji.spec({    getEmoji: (emojiAlias) => myEmojiDefs[emojiAlias] || '❓',  }),];
const parser = markdownParser(  specRegistry,  getDefaultMarkdownItTokenizer().use(emojiMarkdownItPlugin, {    // https://github.com/markdown-it/markdown-it-emoji options go here    defs: myEmojiDefs,  }),);
const serializer = markdownSerializer(specRegistry);

Emoji Data source#

This package does not provide emoji data, you will have to load it yourself. If you want you can use emoji-lookup-data datasource which is an optimized fork of gemoji. Or, you can use markdown-it-emoji's data for an even smaller subset of data.

πŸ“– SeeΒ Bangle Markdown example

πŸ“– See Markdown component API