Display suggestions popover when at-mentioning

[acelaya]

This PR adds logic to display a suggestions popover when an @mention is typed in the annotations text. The popover is displayed as long as the text right before the caret looks like a mention, and hidden otherwise.

The logic takes the at_mentions feature flag into consideration, disabling the logic entirely otherwise.

suggestions-popover-2024-12-16_15.55.45.mp4

Out of scope

This PR only covers the logic to decide when to show/hide the popover, but it does not:

1. Display actual user suggestions in the popover.
2. Calculate the popover position based on where the caret is.

Those will be implemented in follow-up PRs.

Test steps

1. Go to http://localhost:5000/admin/features and enable at_mentions
2. Try to edit/create an annotation.
3. Type an @mention. The popover should be displayed under the textarea.
4. Remove the @mention. The popover should be closed.

You can see other combinations in the screen recording above.

TODO

• Allow popover to be closed via Esc even if the caret is next to an @mention.
• Add tests

[acelaya]

Temporary placeholder

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.42%. Comparing base (d0aed76) to head (07ebc15).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6727   +/-   ##
=======================================
  Coverage   99.42%   99.42%           
=======================================
  Files         269      270    +1     
  Lines       10175    10194   +19     
  Branches     2427     2433    +6     
=======================================
+ Hits        10116    10135   +19     
  Misses         59       59           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[robertknight]

The suggestions popup does not currently appear if the caret is repositioned by clicking in the middle of a mention. I haven't checked, but I'd guess that also applies to using the caret movement UIs on mobile. I think that's fine for this PR but you could instead use the selectionchange event. The downside is that I don't think that event provides a way to determine why the selection changed.

[acelaya]

Good point. There's another thing to take into consideration actually, which is that the popover is closed when clicking away, so I'll probably try to address that separately to try different combinations and even handlers.