Populate list of suggestions matching @mentions

[acelaya]

Depends on #6727

Make the list of suggestions displayed when typing @mentions include matching users from those who already annotated the document and belong to the active group.

The list is sorted by username and capped at 10 items.

at-mentions-suggestions-2025-01-16_14.29.37.mp4

Implementation decisions

The component needs to dynamically build a list of suggestions from the list of user that already annotated.

That list of users can be built from the list of annotations in the sidebar store. Since we had to fetch the annotations from the store somewhere, I decided to implement the list of users as a selector for the annotations store module.

It doesn't need to be accessed in many places, so it could have been a helper function on its own, but since the annotations had to be fetched from the store, it was convenient to do it this way.

Out of scope

There are many accessibility implications regarding the suggestions popover. This PR includes a couple of those, but I will dedicate a follow-up piece of work to address that properly and do a bit of extra investigation on how others handle it.

On top of that, I've found a small issue on the Popover component when it drops-up. If the contents change while it's open, causing it to get smaller, the position is not recalculated, so it ends up looking disconnected from its anchor element (the textarea in this case). This should be addressed by hypothesis/frontend-shared#1855

Test steps

1. Go to http://localhost:5000/admin/features and enable the at_mentions feature flag.
2. Annotate with a few different users.
3. Reload the page.
4. Then while creating/editing an annotation, you should see the suggestions popover display users matching the mention.
5. When you select one via arrow key + Enter or click, it should be applied in the right position.

Todo

• Arrow key navigation while keeping textarea focused
• Select on Enter press while keeping textarea focused
• Select on click, then focus textarea
• Style items
• Add tests
• Apply the mention appropriately, taking into consideration there could be other mentions already.
• Preserve caret position when applying a mention

[robertknight]

The general structure of this looks good. The main feedback I have is that I would try to do some follow-up refactoring where parts of this functionality such as the mentions popup component and text manipulation are extracted out of the MarkdownEditor. This will make them easier to test on their own.

Maybe down the line it will also be useful to be able to reuse mentions functionality in some other non-markdown input (eg. imagine entering usernames to invite members to a group and getting suggestions), but I don't think you need to make it that general at this stage.

[robertknight]

I'd suggest pulling this out into a function with its own tests in future.

[robertknight]

The main feedback I have is that I think we could either drop or replace the term "suggestions" in some places, depending on whether it is clear that the thing being suggested is a user.

[robertknight]

The list of suggested users also includes the current user. That feels a bit strange. I note that GitHub does include @robertknight in the list of suggestions as I type this comment. It is possible to see yourself in X and Bluesky mentions too. That surprised me.

[acelaya]

It shouldn't be super hard to filter out "self" later, if we decide that's the desired behavior.