Background:
Based on the research and work of the Editing team, new users that have traditionally used Talk Pages with VisualEditor have a growing expectation to use @ to mention and ping other users. The iOS app is the last remaining platform to use [[User:Username]], or {{ping|Username}} as the only way to mention a user on a talk page.

The Task:

• Allow users to use @ Mention to ping a user.
• After a user types @ to mention a user and starts typing their name, show search of user names
• When a user presses @ symbol before typing names they see user names of people that have commented in the thread

Additional Considerations
Consider the following scenarios:

• @ mentioning someone that has a space in their user name

Designs

Link to Figma file

@ mention workflow

• The design iteration below stems from the iOS teams discussion that suggested to borrow the search overlay from the 'Add link' workflow to use in the @ mention workflow.

Workflow:

1. The @ button is located in the styling toolbar above the keyboard (or the @ in the keyboard)
2. Once the contributor taps on the @ button a @ Mention search overlay appear (this can also be triggered if the contributor taps the @ button in their keyboard).
3. Contributor can search for contributor in the search field, suggestions appear below the search field
4. Once the contributor taps on a name the overlay gets closed down and the contributors name is added in the comment/topic with @[username]. The entry is highlighted blue.

Empty reply	Constructing reply	@ mention with previous searches	@ mention with no previous searches	typing contributors name	name chosen from list

Open questions:

1. Do we keep the behavior that they have on Android and automatically pre-fill the @[username] when someone replies to a comment?
   • With the addition of the subscribe feature I don't think there is a need for the additional action on iOS because editors get automatically subscribed to topics they author (and therefore receive notifications about and additional comments in the discussion) & editors are able to choose which topics they want to subscribe to and get notified about.

Some past use cases are revised in this sheet:
@mentions: Use cases for iOS

Reference
Android implementation T297912
Android designs on Figma
Use the interaction represented in the Editing Team's deck on slide 16.