@bangle.dev/react-emoji-suggest

contrib

This package provides you suggestions for picking your favourite emojis 😎!

Installation#

# peer deps
npm install @bangle.dev/core @bangle.dev/emoji @bangle.dev/react @bangle.dev/tooltip
npm install @bangle.dev/react-emoji-suggest

Styling#

Please use the stylesheet style.css like:

import '@bangle.dev/react-emoji-suggest/style.css';

emojiSuggest: Component#

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.

spec({ ... }): NodeSpec#

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
    The markName you specified in above in the spec.

  • 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]

commands: CommandObject#

  • queryTriggerText(key: Prosemirror.PluginKey): Command
    Query the trigger text that is being used to filter the emojis. 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 if emojis=["office_worker", "🧑‍💼"], ["ninja", "🥷"]], executing command with selectEmoji(key, 'ninja')(state, dispatch) will create a 🥷 emoji.

Usage

Please see the Emoji Suggest example

EmojiSuggest: React.Element#

Props

Usage

Please see the Emoji Suggest example

Edit this page