8000 [Feature] RichSuggestBox control · Issue #3649 · CommunityToolkit/WindowsCommunityToolkit · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

[Feature] RichSuggestBox control #3649

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
huynhsontung opened this issue Jan 1, 2021 · 2 comments · Fixed by #3650
Closed

[Feature] RichSuggestBox control #3649

huynhsontung opened this issue Jan 1, 2021 · 2 comments · Fixed by #3650
Labels
Completed 🔥 controls 🎛️ feature request 📬 A request for new changes to improve functionality in progress 🚧
Milestone
7.1

Comments

@huynhsontung
Copy link
Contributor
huynhsontung commented Jan 1, 2021 •
edited
Loading

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
@huynhsontung huynhsontung added the feature request 📬 A request for new changes to improve functionality label Jan 1, 2021
@ghost
Copy link
ghost commented Jan 1, 2021

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!

@huynhsontung huynhsontung mentioned this issue Jan 3, 2021
Merged
8 tasks
@ghost ghost added the In-PR 🚀 label Jan 3, 2021
@huynhsontung huynhsontung changed the title [Feature] SuggestingTextBox control [Feature] RichSuggestBox control Jan 3, 2021
@Kyaa-dost
Copy link
Contributor

@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 🤔

@ghost ghost added this to the 7.0 milestone Jan 4, 2021
@ghost ghost added the in progress 🚧 label Jan 4, 2021
@ghost ghost removed this from the 7.0 milestone Jan 5, 2021
@Kyaa-dost Kyaa-dost added this to the 7.1 milestone Jan 5, 2021
@ghost ghost closed this as completed in #3650 Aug 26, 2021
ghost pushed a commit that referenced this issue Aug 26, 2021
Implement RichSuggestBox (#3650)
fe9ac89 
<!-- 🚨 Please Do Not skip any instructions and information mentioned below as they are all required and essential to evaluate and test the PR. By fulfilling all the required information you will be able to reduce the volume of questions and most likely help merge the PR faster 🚨 -->

<!-- 📝 It is preferred if you keep the "☑️ Allow edits by maintainers" checked in the Pull Request Template as it increases collaboration with the Toolkit maintainers by permitting commits to your PR branch (only) created from your fork.  This can let us quickly make fixes for minor typos or forgotten StyleCop issues during review without needing to wait on you doing extra work. Let us help you help us! 🎉 -->


## Fixes #
<!-- Add the relevant issue number after the "#" mentioned above (for ex: Fixes #1234) which will automatically close the issue once the PR is merged. -->
Closes #3649 

<!-- Add a brief overview here of the feature/bug & fix. -->
Implement rich suggest text control as discussed in the issue.

## PR Type
What kind of change does this PR introduce?
<!-- Please uncomment one or more that apply to this PR. -->

<!-- - Bugfix -->
- Feature
<!-- - Code style update (formatting) -->
<!-- - Refactoring (no functional changes, no api changes) -->
<!-- - Build or CI related changes -->
<!-- - Documentation content changes -->
<!-- - Sample app changes -->
<!-- - Other... Please describe: -->


## What is the current behavior?
<!-- Please describe the current behavior that you are modifying, or link to a relevant issue. -->
None. The control did not exist before this PR.


## What is the new behavior?
<!-- Describe how was this issue resolved or changed? -->
'RichSuggestBox' is now a usable control in the `Microsoft.Toolkit.Uwp.UI.Controls` namespace.


## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tested code with current [supported SDKs](../readme.md#supported)
- [x] Pull Request has been submitted to the documentation repository [instructions](..\contributing.md#docs). Link: MicrosoftDocs/WindowsCommunityToolkitDocs#558
- [x] Sample in sample app has been added / updated (for bug fixes / features)
    - [x] Icon has been created (if new sample) following the [Thumbnail Style Guide and templates](https://github.com/windows-toolkit/WindowsCommunityToolkit-design-assets)
- [ ] New major technical changes in the toolkit have or will be added to the [Wiki](https://github.com/windows-toolkit/WindowsCommunityToolkit/wiki) e.g. build changes, source generators, testing infrastructure, sample creation changes, etc...
- [x] Tests for the changes have been added (for bug fixes / features) (if applicable)
- [x] Header has been added to all new source files (run *build/UpdateHeaders.bat*)
- [x] Contains **NO** breaking changes

<!-- If this PR contains a breaking change, please describe the impact and migration path for existing applications below. 
     Please note that breaking changes are likely to be rejected within minor release cycles or held until major versions. -->


## Other information

### Convenient issue tracker

- Limited styling options for tokens. Only text styling options are available.
- Tokens are raw text and not UI elements. UI events (e.g. `UIElement.PointerEntered`) are not available. ~~This makes behaviors like showing flyout when hover mouse over the token impossible.~~
- Tokens are always underlined.
- Tokens cannot adapt to theme change dynamically. They will lose foreground color while having the same background color which will most likely introduce bad contrast.
- Cannot disable spelling check on tokens (token text may have red underline).
- ~~Cannot use Tab to select a suggestion due to conflict with the accessibility feature.~~
- Deleted tokens will be kept in an internal list until cleared programmatically to support Undo and Redo.

### RichEditBox issues

Below are `RichEditBox` related issues encountered during the development of this control.

- Getting `Link` property from a range might change the range.
- Replacing a formatted link at the beginning of the document does not reset the formatting. The replaced text still has the same formatting.
- Setting the `Link` property can sometimes fail but only when the target text is at the beginning of the document.
- There is no event for when text is about to change. `TextChanging` and `SelectionChanging` are invoked after the text has changed.
- Character format foreground color cannot display a range of colors (e.g. #F7FFB3)
@ghost ghost added Completed 🔥 and removed In-PR 🚀 labels Aug 26, 2021
@ghost ghost locked as resolved and limited conversation to collaborators Nov 3, 2021
This issue was closed.
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
Completed 🔥 controls 🎛️ feature request 📬 A request for new changes to improve functionality in progress 🚧
Projects
None yet
Milestone
7.1
Development

Successfully merging a pull request may close this issue.

Implement RichSuggestBox huynhsontung/WindowsCommunityToolkit
2 participants
@huynhsontung @Kyaa-dost
0