Skip to content

v0.8.0: emoji picker

Choose a tag to compare

@ralyodio ralyodio released this 06 Oct 06:24
531f2b2

An emoji picker, and text input that finally knows how wide an emoji is.

An emoji picker

ui.emojiPicker() draws an OpenEmoji picker, and emojiPickerKey() is the reducer that drives it from the keyboard. Search filters by name and leaves out the skin-tone rows, so typing "thumbs" gives you one thumb, not six. The tabs are Recent plus the nine Unicode groups, each labelled with an OpenIcon glyph. The mouse works everywhere: click to pick, click a tab to jump, scroll the grid, and hover to preview.

emojiGroups() and emojiByGroup() expose the same data in Unicode order, if you want to build your own.

examples/emoji-picker.ts shows the whole thing wired up.

Text editing

editText() and insertText() give any input field readline editing: moves by character and by word, Home/End and Ctrl+A/E, Ctrl+W, Ctrl+U and Ctrl+K, and deletes that remove a whole grapheme rather than half a flag or a stray zero-width joiner.

A caret that stays put

drawTextInput measured the caret in code units, so after an emoji every keystroke drew it one or more cells to the left of where the text actually was. It now measures in terminal columns, and a value wider than the field scrolls horizontally to keep the caret in view.

Install

npm install @profullstack/hqtui
bunx @profullstack/hqtui-demo

Zero runtime dependencies, as always. MIT.