Let's add an auto-suggestion UI for emojis so that they can be added inline in messages. Right now, typing :smile: works, but only if you know that it works. Let's make it easier to add emojis to messages using an inline emoji selector.
It will work like this:
- As soon as you type colon and two more characters without a space (e.g.
:sm) we start searching (using the suggestEmojis function)
- We display the matches in the auto-suggestion modal, in the order returned by the function, with the closest match at the top
a. We display the top suggestion highlighted.
b. Pressing enter or tab selects the highlighted option.
c. The arrow keys allow you to cycle through the options. The list should “wrap”, such that if you have the first element in the list highlighted and you press ArrowUp, then you are taken to the last element to the list. Similarly, if you have the last element in the list highlighted and you press ArrowDown, then you are taken back up to the first element in the list
d. Every time your search query updates (i.e: you type another letter), then the first item is refocused. The reason for this is that when you update the search query we should assume that the “best result” is the one displayed first in the list, so that’s the one you’re most likely to want
- If there are no matches, we don't display the auto-suggestion modal
- If the user types a space or a colon (e.g.
:smi or :smi:) we stop searching and don't show the auto-suggestion modal
- If they tap, click, press enter, or press tab on one of the emoji options then we finish the text (e.g.
:smi becomes :smile: ) and add a space so that the user can continue typing
a. When we finish the text, we should just replace it with the actual emoji code from emoji.js (which is returned by the search method) instead of the :<name>: since that would then need to be converted again
Let's add an auto-suggestion UI for emojis so that they can be added inline in messages. Right now, typing
:smile:works, but only if you know that it works. Let's make it easier to add emojis to messages using an inline emoji selector.It will work like this:
:sm) we start searching (using the suggestEmojis function)a. We display the top suggestion highlighted.
b. Pressing enter or tab selects the highlighted option.
c. The arrow keys allow you to cycle through the options. The list should “wrap”, such that if you have the first element in the list highlighted and you press ArrowUp, then you are taken to the last element to the list. Similarly, if you have the last element in the list highlighted and you press ArrowDown, then you are taken back up to the first element in the list
d. Every time your search query updates (i.e: you type another letter), then the first item is refocused. The reason for this is that when you update the search query we should assume that the “best result” is the one displayed first in the list, so that’s the one you’re most likely to want
:smior:smi:) we stop searching and don't show the auto-suggestion modal:smibecomes:smile:) and add a space so that the user can continue typinga. When we finish the text, we should just replace it with the actual emoji
codefrom emoji.js (which is returned by the search method) instead of the:<name>:since that would then need to be converted again