@-mention typeahead/autocomplete

[gnprice]

This Zulip feature: https://zulip.com/help/mention-a-user-or-group#from-the-compose-box

For a first prototype, it's fine to cover only the most prototypical user @-mentions, without (a) groups, (b) wildcards, or (c) silent mentions. If in our first PR implementing this feature, handling any or all of those would add complexity and not just fall out naturally, then we'll leave them aside and open new issues for them.

In addition to being a valuable feature for users, part of the value of this feature for the prototype is that it gives a workout to some of the trickier aspects of a text input — useful for #47:

• We'll be using the TextEditingController: noticing when the user has started typing an @-mention, and then writing the @-mention back into the text when they select from the autocompletion box.
• Ideally, we'd show the list of options just above or below where the user's cursor is in the text input.

  • In the RN app, this is difficult because the editing is handled over on the platform side, so the React/JS side doesn't know where the cursor is. (Even if we added plumbing to try to tell React/JS where the cursor is, it'd probably be tough to avoid jank.) We settle for having the list of options above the entire input. That works, but is less good when the input gets tall. It's especially less good if the input grows to most of the height on the screen.

  • If we end up going for a platform-native text input (Experiment with a native iOS text input #48), then we'd probably be in the same boat as in RN.

  • With the Flutter text input, though, it should definitely be possible in principle to do this and have it work smoothly. It might even be easy; or it might require getting our hands deep inside the EditableText implementation.

    If we don't find a way to make this easy, then we should leave it out of the first version of autocomplete and settle for putting the box above the whole input, like in the RN app. We'll then file an issue to revisit it.