Distinct select style for user mentions in RTE

What does this MR do and why?

Ensure that:

  1. non-current-user mentions in rich text editor, when selected, have a more distinct style
  2. any user mention in rich text editor, when selected by itself, has a nicer selection style

Screenshots or screen recordings

Scenario Before After
only non-current user mention selected Screenshot_2024-10-03_at_15.22.29 Screenshot_2024-10-03_at_15.20.57
only non-current user mention selected (dark mode) Screenshot_2024-10-03_at_15.22.12 Screenshot_2024-10-03_at_15.21.29
only current user mention selected Screenshot_2024-10-03_at_15.22.32 Screenshot_2024-10-03_at_15.21.04
only current user mention selected (dark mode) Screenshot_2024-10-03_at_15.22.16 Screenshot_2024-10-03_at_15.21.34
Text that includes non-current user mention is selected Screenshot_2024-10-03_at_15.22.35 Screenshot_2024-10-03_at_15.21.16
Text that includes non-current user mention is selected (dark mode) Screenshot_2024-10-03_at_15.22.21 Screenshot_2024-10-03_at_15.21.38
Text that includes current user mention is selected
(no change)
Screenshot_2024-10-03_at_15.22.37 Screenshot_2024-10-03_at_15.21.22
Text that includes current user mention is selected (dark mode)
(no change)
Screenshot_2024-10-03_at_15.22.23 Screenshot_2024-10-03_at_15.21.40

How to set up and validate locally

  1. Check out this branch
  2. Visit an issue, MR or work item
  3. Scroll to the new comment input
  4. Ensure you are using rich text editing
  5. Type some text that includes a mention of another user and a mention of your own user
  6. Click once on the other user mention
    • You should see that the user mention has a 2px blue-100 box shadow around it and the mention itself has a blue-200 background
  7. Click once on the mention of your own user
    • You should see that the user mention has a 2px blue-100 box shadow around it and the mention itself has no style change
  8. Select all the text
    • You should see that the other-user mention has a blue-200 background

Related to #419087 (closed) Related to #474922 (closed)

Edited by Chad Lavimoniere

Merge request reports

Loading