Description
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 intoRichEditBox(related WinUI issue), the only way I can think of is to make a fully custom input control fromRichTextBlock, 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 #3486AutoSuggestBox. Underlying input control isTextBoxwhich 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.
