[Feature] RichSuggestBox control

[huynhsontung]

Describe the problem this feature would solve

I am making a chat app using UWP and I realized there is no easy way to implement a chat box that has mentioning feature (think of Slack or Discord or even GitHub where you type @ to mention other people). This feature is prevalent in comment or chat context, you can find it in every application that provides communication between people in a group. A text box with mentioning feature is crucial to many social applications.

Describe the solution

Making a text box that provides suggestions on specific prefixes (like @ for mention, # for channel, etc.). Introducing RichSuggestBox (name pending)! During the break, I actually made this control for my app and I think it would be a good addition for many UWP apps.

Please see the last section for demos

How it works

Inspired by Content links in text controls, RichSuggestBox works on top of a RichEditBox and it embeds the token into the document as a link. Unlike content links where you can only add either places or people in your Windows contacts, RichSuggestBox lets you embed anything! It provides a suggestion dropdown for users to pick a suggestion, similar to AutoSuggestBox. Links generated are not real hyperlinks (user cannot Ctrl + Click the link).

Features

Feature	Progress
Behave just like RichEditBox	✔
Suggestion drop down	✔
Custom suggestion text style	✔
Override text style for specific token	✔
Support multiple prefixes at the same time (e.g. @ for mention, # for channel)	✔
Work with undo and redo	✔
Plain text only option (no user formatting)	✔
Convert tokens to plain text on copying and pasting	✔
Floating suggestion popup option	✔
Let user shorten the token (like how Messenger works)	Considering

Caveats

There are some caveats with how the control works at the moment. I may require the community's assistance/decisions on these.

• Hyperlinks have underlined and I don't know how to disable that.
• In order to work with undo and redo, the control keeps all the selected items in a private collection and does not clear them when the token is removed from the document. Control user has to call a method to manually clear it.
• There seems to be no way to disable proofing for the tokens.
• Suggestion token style is rather limited compared to how apps like Slack handle it. With Slack, tokens have round corners and you can hover on them to get a tooltip with custom UI. With RichEditBox, you are stuck with basic text foreground, background, bold, italic, underline, etc. But until we can add custom UI into RichEditBox (related WinUI issue), the only way I can think of is to make a fully custom input control from RichTextBlock, which I think should be avoided.
• Cannot use Tab to select a suggestion due to conflict with the accessibility feature.

Describe alternatives you've considered

• TokenizingTextBox. It does not support raw text, token does not wrap, and has greater height than text, making it unsuitable for multiline text box. See [Feature] Raw text support for TokenizingTextBox #3486
• AutoSuggestBox. Underlying input control is TextBox which cannot modify text style.

Additional context & Screenshots

Some demos using the following event handlers.

private void SuggestingBox_OnSuggestionChosen(RichSuggestBox sender, SuggestionChosenEventArgs args)
{
	if (args.Prefix == "#")
	{
		args.Format.Background = Colors.DarkOrange;
		args.Format.Foreground = Colors.OrangeRed;
		args.Text = (string) args.SelectedItem;
	}
	else
	{
		args.Text = ((SampleEmailDataType) args.SelectedItem).DisplayName;
	}
}

private void SuggestingBox_OnSuggestionsRequested(RichSuggestBox sender, SuggestionsRequestedEventArgs args)
{
	if (args.Prefix == "#")
	{
		sender.ItemsSource = new List<string>()
		{
			args.Query + 1,
			args.Query + 2,
			args.Query + 3
		};
	}
	else
	{
		sender.ItemsSource =
			_emailSamples.Where(x => x.DisplayName.Contains(args.Query, StringComparison.OrdinalIgnoreCase));
	}
}

How it looks like (the control is only the text box, everything else is for demonstration purposes).

Support multiple prefixes with custom style override.

Observable token position.

Support undo and redo.

Suggestions based on caret.

[ghost]

Hello, 'huynhsontung! Thanks for submitting a new feature request. I've automatically added a vote 👍 reaction to help get things started. Other community members can vote to help us prioritize this feature in the future!

[Kyaa-dost]

@huynhsontung Thanks for the PR and it looks like a very engaging feature. Will it test out once the PR is ready and on the meantime will open this for discussion to see what others think 🤔