https://github.com/engagesolutionsgroup/speaklink
Mentions Editor for MAUI [iOS,Android,MacCatalyst]
https://github.com/engagesolutionsgroup/speaklink
autosuggest editor maui mentions richtext
Last synced: about 1 month ago
JSON representation
Mentions Editor for MAUI [iOS,Android,MacCatalyst]
- Host: GitHub
- URL: https://github.com/engagesolutionsgroup/speaklink
- Owner: engagesolutionsgroup
- License: mit
- Created: 2023-11-29T20:56:40.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-03-31T16:14:26.000Z (about 2 months ago)
- Last Synced: 2025-03-31T17:28:06.631Z (about 2 months ago)
- Topics: autosuggest, editor, maui, mentions, richtext
- Language: C#
- Homepage:
- Size: 14.6 MB
- Stars: 16
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# SpeakLink Mention Editor Library for .NET MAUI
[](https://www.nuget.org/packages/SpeakLink/)
## Overview
The SpeakLink Mention Editor is an advanced .NET MAUI library that enhances text editor functionality with support for @mentions. Designed to bring the intuitive and flexible mention capabilities found on social media platforms to .NET MAUI apps, it offers a seamless integration for developers. It is up to you how you want the mention/hashtag picker to look; see the example project to see how the most common approach, 'mention list above input' is implemented.
## Usage
1. **Add the Library**: Integrate the `SpeakLink.Mention` library into your project either through NuGet or by adding a direct reference.
2. **Namespace Declaration**: In your XAML, declare the SpeakLink Mention Editor's namespace:
```xml
xmlns:mention="clr-namespace:SpeakLink.Mention;assembly=SpeakLink"
```
3. **Add the Editor**: Implement the `MentionEditor` control in your XAML:
```xml
```
4. **Configure Key Attributes**: Customize the `MentionEditor` in your XAML to suit your application's requirements. Essential attributes include:
- `MentionSearchCommand`: A ViewModel command that initiates the mention search.
- `IsSuggestionsPopupVisible`: A Boolean that dynamically adjusts to control the visibility of mention suggestions.
- `ExplicitCharacters`: Characters, like "@", used to trigger mention suggestions.
The `MentionSearchCommand` is triggered with `MentionSearchEventArgs`, which contains `ControlCharacter` (like `ExplicitCharacter`, e.g., "@") and `MentionQuery` (e.g., 'Dav'). Your task is to filter suggestions based on the `MentionQuery` and display them, for example, using a `CollectionView` or another selector (refer to the Sample project for more details).
5. **Handling User Selections**: When a user selects an item from the CollectionView/ListView/BindableLayout you used to display list of mentions, invoke:
```xml
editor.InsertMention(id, mentionText);
```
6. **FormattedText Property Updates**: The `SpeakLink.Mention.MentionEditor`'s `FormattedText` property updates dynamically as the user types, deletes, or inserts a mention. Each mention is represented as a distinct `MentionSpan` that contains `Id` and `Text` as `mentionText`.
7. **Keyboard closing**: The keyboard will close as soon as focus is lost. Unfortunately, I wasn't able to integrate with [HideSoftInputOnTapped property of ContentPage](https://learn.microsoft.com/en-us/dotnet/api/microsoft.maui.controls.contentpage.hidesoftinputontapped?view=net-maui-8.0#microsoft-maui-controls-contentpage-hidesoftinputontapped) because HideSoftInputOnTapped is internal class for MAUI, moreover it doesnt support adding additional ignore area for picker, so you have to add GestureRecognizer on your root element and add something like:
```csharp
private void HideKeyboard(object? sender, TappedEventArgs e)
{
if (!MentionEditor.IsFocused)
return;
if (MentionEditor.IsSuggestionsPopupVisible
&& e.GetPosition(MentionPickerView) is { } position
&& position.InsideElement(MentionPickerView))
{
return;
}
MentionEditor.Unfocus();
}
```
## Image Insert
Use ImageInsertCommand that passes string as filePath that user wants to insert
## Rich Editor [0.2.0]
https://github.com/engagesolutionsgroup/SpeakLink/assets/3391032/a272e7fc-b54f-49a9-915b-720f4b309575
### Supported features
| Format | Supports |
| ------------- | ------------- |
| Mentions | Yes |
| Bold | Yes |
| Italic | Yes |
| Underline | Yes |
| Strikethrough | Yes |
| Bold | Yes |
| Custom Links | Yes |
| Custom Foreground Color | Not yet |
| Custom Background Color | Not yet |
| Link Auto Detect and highlight | Not yet |
Ideally, we want to implement all text styling features provided in FormattedString MAUI default control.
To show and define style for formatting buttons that allow the user to toggle some style, use the RichToolbarState property declared in the RichEditor control. For example, see the RichEditor sample page in the Sample project.