Emoji Autocomplete

ngx-prompt-kit original — not part of ibelick/prompt-kit

Discord-style emoji shortcodes for a prompt box. Type a colon and two letters (:so) and a list of matching emoji opens above the box; the arrow keys move the highlight, Enter or Tab puts the emoji in place of what you typed, Escape closes the list. A whole :sob: turns into its emoji on the closing colon. While the list is open it takes Enter, so picking an emoji never sends the message. The emoji list (GitHub's gemoji) loads the first time a shortcode is typed.

Examples

On a composer

Put pkEmojiAutocomplete on pk-composer; it finds the composer's text box. Try :so, then Enter: the emoji goes in and nothing is sent. Enter again sends.

(submitted): — · (emojiInserted): —

import { PkEmojiAutocompleteImports } from 'libs/prompt-kit/emoji-autocomplete';

<pk-composer
  pkEmojiAutocomplete
  [(value)]="draft"
  (submitted)="send($event)"
  (emojiInserted)="onEmoji($event)"
/>

On a spartan input group

Any element holding a textarea works, or the textarea itself. Here the directive sits on the hlmInputGroup, so the list lines up with the whole group.

<div hlmInputGroup pkEmojiAutocomplete [maxResults]="6">
  <textarea hlmInputGroupTextarea aria-label="Message" ...></textarea>
  ...
</div>

<!-- or straight on the text box -->
<textarea pkEmojiAutocomplete aria-label="Message"></textarea>

Installation

Add the emoji-autocomplete component (and the cn() utility) to your project.

ng generate ngx-prompt-kit:emoji-autocomplete

Component API

PkEmojiAutocomplete

Prop	Type	Default	Description
pkEmojiAutocomplete	`directive`	—	On a <textarea> or <input>, or on an element containing one (pk-composer, an hlmInputGroup). The list opens above that element and matches its width. exportAs "pkEmojiAutocomplete".
maxResults	`number`	8	Most rows shown. Shortcodes that start with the query come first, shortest first, then ones that contain it.
minChars	`number`	2	Characters after the colon before the list opens.
emojiAutocompleteDisabled	`boolean`	false	Turns the autocomplete off.
emojiInserted	`output<EmojiMatch>`	—	Fires with { emoji, shortcode } when an emoji goes in, picked from the list or typed as a whole :shortcode:.
open	`Signal<boolean>`	—	The list is showing. While it is, Enter, Tab, Escape and the arrow keys go to the list, not the text box.
insert(match) / dismiss()	`method`	—	Insert a match in place of the typed shortcode, or close the list.

Helpers

Prop	Type	Default	Description
loadEmojiIndex()	`Promise<EmojiIndex>`	—	Lazy-loads gemoji once and lists every [shortcode, emoji] pair.
searchEmoji(index, query, limit?)	`EmojiMatch[]`	—	The ranking the list uses, for your own pickers.