Mentions - autocomplete

Adding UI to let you select a user from a list when @-mentioning. Requires completion of Stage 1.

Desired UX

1. User types @ in a text area
2. Dropdown showing possible matches appears, best match is highlighted
3. User can keep typing as usual or press ENTER/TAB/LEFT CLICK to select and insert the best match
4. Dropdown closes automatically on selection of best match or insertion of non-alphanumeric character (signalling end of mention)

Important points:

• typing @ directly after a non-space character will not start matching as this is not a valid username
• possible matches are drawn from the workspace members. i.e. You can’t mention anyone who is not in the current workspace
• Dropdown only shown when possible matches has <=5 options to select from
• Clicking anywhere outside the dropdown will close the dropdown

Technical considerations

• We will fetch the usernames list on the first attempted mention and then not-refetch, so there will be a slight delay on first mention, but none after that
• We need to calculate the cursor position within the text area for the dropdown positioning - investigate
• To find the possible and best matches, we can either search for substrings or use something like Levenshtein Distance, we’ll start with substrings for simplicity

Steps

1. Detect mention start / end
2. Update possible matches based on current mention (using hardcoded list, no dropdown)
3. Select best match using tab/enter (no dropdown)
4. Cycle through selected match using arrow keys
5. Display possible matches in dropdown
6. Fetch and populate username list at start of first mention
7. Add mention support to new comment form
8. Add mention support to edit comment form
9. Release!