Use most recent username or display name when unwrapping mention tags

[acelaya]

Closes #6906

So far, when unwrapping an a[data-hyp-mention] tag into its plain-text representation, we were always relying on the hardcoded content of the tag.

This PR ensures the tag is matched against a list of Mention objects, so that we unwrap to the most recent username or display name instead, ensuring the mention will continue working after wrapping it back, and it will also display the value users expect.

This PR does not cover doing the same when rendering a mention tag. There's a separate issue for that #6909

Todo

• Add tests that cover the logic when username or display name have a different value in the mentions list.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.43%. Comparing base (e9d189e) to head (3b8b249).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #6908   +/-   ##
=======================================
  Coverage   99.43%   99.43%           
=======================================
  Files         273      273           
  Lines       10569    10574    +5     
  Branches     2543     2545    +2     
=======================================
+ Hits        10509    10514    +5     
  Misses         60       60           

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

🚀 New features to boost your workflow:

• ❄ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[acelaya]

I tried to evolve the MENTION_TAG_RE regular expression, so that it would also capture the userid in one go, but I ended up in a rabbit whole of a) a regexp that would capture the userid if present but would not match if the attributes were in a different order, or b) a regexp that would match regardless of the order of the attributes, but would not capture the userid.

I ended up splitting it in two steps because:

• The regular expression is simpler and more predictable when only relying in one attribute (data-hyp-mention).
• Reading the data-userid attribute can be done with easier to understand and more reliable DOM APIs.

I could have used .dataset.userid instead of getAttribute('data-userid') but that requires casting the result of querySelector() to HTMLElement. I thought this was simpler.

[acelaya]

I'm updating this to expect the tag content to start with an @ char. This has some pros and cons:

The main pro is that the logic to get the value without the @ char is now simpler, as we can rely on the captured value verbatim.

The cons are:

1. We no longer match mention tags if they do not contain the @ char. I don't know if we'll ever need/want to support this.
2. We don't match mention tags if their content starts with @ but it's not trimmed (contains empty characters between the opening tag and its content).

I reckon these cons are not really a problem, because the unwrapMentions function was already assuming the first character was the @ character, but there might be other side effects I missed here.

[robertknight]

LGTM with requests for a few added comments and a revised test description.