Add emoji shortcode autocomplete to the composer (#54)

Typing ":name" now shows a matching-shortcode dropdown (same
join/leave/arrow-key UX as the existing @mention and #room autocompletes),
selecting one inserts the actual glyph immediately rather than leaving
literal ":name:" text. A bare ":" with nothing typed yet suggests
recently-used emoji instead of an arbitrary slice of the ~950 known
shortcodes.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
2026-08-27 20:59:51 -06:00
co-authored by Claude Sonnet 5
parent 4cc3823adf
commit 2fd055f7d6
4 changed files with 154 additions and 0 deletions
+12
View File
@@ -965,3 +965,15 @@ export const EMOJI_SHORTCODES: Record<string, string> = {
'zebra': '🦓',
'zipper_mouth_face': '🤐',
}
// Reverse of the above, for #54's composer autocomplete: showing recently-
// used emoji (tracked by glyph, see recentEmoji.ts) as suggestions when the
// user has just typed a bare ":" with nothing after it yet. Several glyphs
// have more than one valid shortcode (e.g. 🖕 is both 'fu' and
// 'middle_finger') -- first one wins, in the object's own key order, which
// is deterministic but otherwise arbitrary.
export const SHORTCODE_BY_GLYPH: Record<string, string> = Object.fromEntries(
Object.entries(EMOJI_SHORTCODES)
.reverse()
.map(([shortcode, glyph]) => [glyph, shortcode]),
)