API REFERENCE · RICH TEXT PLUGINS

`@dojo-ng/rich-text-emoji`

An emoji picker and :shortcode: replacement for <dj-rich-text>.

@dojo-ng/rich-text-emoji · v0.1.1 · A plugin for <dj-rich-text>, not a custom element

npm install @dojo-ng/rich-text-emoji

Compose the emoji plugin with the default set. The toolbar gains an emoji button; typing :tada: becomes 🎉.

<dj-rich-text id="editor" label="Comment"></dj-rich-text>
<script type="module">
  import "@dojo-ng/rich-text";
  import { defaultPlugins } from "@dojo-ng/rich-text";
  import { emojiPlugin } from "@dojo-ng/rich-text-emoji";
  document.getElementById("editor").plugins = [...defaultPlugins, emojiPlugin];
</script>

Picker

The toolbar button opens a searchable emoji picker, eight columns wide. Search by name, shortcode, or keyword; move with the arrow keys; insert with a click or Enter.
The picker stays open so you can insert several, and closes on Escape or a click outside. Focus returns to the editor.
The system emoji picker (Ctrl+Cmd+Space on macOS, Win+. on Windows) also works in the editor. This adds a visible picker that works the same on every platform.

Shortcodes

With shortcodes on (the default), typing a GitHub-style :name: replaces it with the emoji. Unknown shortcodes stay as typed.

Setup

Exports emojiPlugin, createEmojiPlugin({ shortcodes?, set? }), EMOJI (about 170 emoji across smileys, people, hearts, animals, food, activities, objects, and symbols), the filterEmoji(set, query) helper, and the EmojiEntry type.
Emoji are plain text, so the plugin adds no node types.
For hashtags or other highlighted tokens, build a node the way @dojo-ng/rich-text-mentions builds its mention node. Hashtags are not included on purpose.
Setting plugins replaces the default set, so spread ...defaultPlugins to keep bold, italic, underline, undo, and redo.

Not built

Skin-tone variants, recently used emoji, category headings, a :shortcode: suggestion menu, and custom image sets.

Need one of these? Make a request on Discord or add an issue (work item) on Heptapod.

Functions

`createEmojiPlugin`

function createEmojiPlugin(options?: EmojiPluginOptions): RichTextPlugin;

`filterEmoji`

function filterEmoji(set: EmojiEntry[], query: string): EmojiEntry[];

Values

`EMOJI`

const EMOJI: EmojiEntry[];

`emojiPlugin`

const emojiPlugin: RichTextPlugin;

Types

`EmojiEntry`

interface EmojiEntry {
  ch: string;
  name: string;
  shortcode: string;
  keywords?: string[];
  category: string;
}

`EmojiPluginOptions`

interface EmojiPluginOptions {
  shortcodes?: boolean;
  set?: EmojiEntry[];
}