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 isTextBox
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).