@bangle.dev/react-emoji-suggest
contrib
This package provides you suggestions for picking your favourite emojis 😎!
#
Installation#
StylingPlease use the stylesheet style.css
like:
Component#
emojiSuggest:Shows a suggestion tooltip next to the trigger. Use ArrowUp
and ArrowDown
to change selection. Use Enter
or MouseClick
to insert a selected emoji. Pressing Escape
will dismiss the suggestion tooltip.
NodeSpec#
spec({ ... }):Named parameters:
markName: string
The mark name associated with this component. Please make sure this name is not already in use by existing nodes or marks.trigger: ?string=':'
The trigger key when typed that initiates the suggestions. Triggering also needs to have a space or new line precede the trigger string.
Plugins#
plugins({ ... }):Named parameters:
key: ?Prosemirror.PluginKey
markName: string
ThemarkName
you specified in above in thespec
.emojis: Array<[string, string]>
An array of emoji description and the emoji character, for example[["office_worker", "🧑💼"], ["ninja", "🥷"]]
.maxItems: ?number=200
The maximum number of items that can be shown at a time.tooltipRenderOpts: ?[tooltipRenderOpts]
CommandObject#
commands:queryTriggerText(key: Prosemirror.PluginKey): Command
Query the trigger text that is being used to filter theemojis
. For example, with:
as trigger, if the user typed:man
,man
will the trigger text.selectEmoji(key: Prosemirror.PluginKey, emojiKind: string): Command
Programmatically select an emoji. For example ifemojis=["office_worker", "🧑💼"], ["ninja", "🥷"]]
, executing command withselectEmoji(key, 'ninja')(state, dispatch)
will create a🥷
emoji.
Usage
Please see the Emoji Suggest example
React.Element#
EmojiSuggest:Props
- emojiSuggestKey: ?Prosemirror.PluginKey
Pass the key that was used inplugins()
.
Usage
Please see the Emoji Suggest example