@bangle.dev/emoji
#
Installation# peer depsnpm install @bangle.dev/core @bangle.dev/pmnpm install @bangle.dev/emoji
Component#
emoji:Allows you to show emojis π in your editor.
NodeSpec#
spec({ ... }):Named parameters:
getEmoji: fn(emojiAlias: string ) -> string
A callback that gets called withemojiAlias
(a plain text representation of the emoji likesmiley
,green_book
) and should return the emoji character associated with the alias.defaultEmojiAlias: ?string='smiley'
If alias to use when not provided.
CommandObject#
commands:- insertEmoji(emojiAlias: string): Command
A command that inserts an emoji.
#
Markdown supportThis 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 sourceThis 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