Skip to content

[Feature] RichSuggestBox control #3649

Closed
@huynhsontung

Description

@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).
53FyydClQY

Support multiple prefixes with custom style override.
mgLv3Ct76g

Observable token position.
JsKwkuyv5e

Support undo and redo.
uUMhQGnuuU

Suggestions based on caret.
0fo7D3WXC6

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions