SpeakLink 0.6.4
dotnet add package SpeakLink --version 0.6.4
NuGet\Install-Package SpeakLink -Version 0.6.4
<PackageReference Include="SpeakLink" Version="0.6.4" />
paket add SpeakLink --version 0.6.4
#r "nuget: SpeakLink, 0.6.4"
// Install SpeakLink as a Cake Addin #addin nuget:?package=SpeakLink&version=0.6.4 // Install SpeakLink as a Cake Tool #tool nuget:?package=SpeakLink&version=0.6.4
SpeakLink Mention Editor Library for .NET MAUI
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
Add the Library: Integrate the
SpeakLink.Mention
library into your project either through NuGet or by adding a direct reference.Namespace Declaration: In your XAML, declare the SpeakLink Mention Editor's namespace:
xmlns:mention="clr-namespace:SpeakLink.Mention;assembly=SpeakLink"
Add the Editor: Implement the
MentionEditor
control in your XAML:<mention:MentionEditor x:Name="editor" />
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 withMentionSearchEventArgs
, which containsControlCharacter
(likeExplicitCharacter
, e.g., "@") andMentionQuery
(e.g., 'Dav'). Your task is to filter suggestions based on theMentionQuery
and display them, for example, using aCollectionView
or another selector (refer to the Sample project for more details).Handling User Selections: When a user selects an item from the CollectionView/ListView/BindableLayout you used to display list of mentions, invoke:
editor.InsertMention(id, mentionText);
FormattedText Property Updates: The
SpeakLink.Mention.MentionEditor
'sFormattedText
property updates dynamically as the user types, deletes, or inserts a mention. Each mention is represented as a distinctMentionSpan
that containsId
andText
asmentionText
.Keyboard closing: The keyboard will close as soon as focus is lost. Unfortunately, I wasn't able to integrate with HideSoftInputOnTapped property of ContentPage 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:
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]
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.
Product | Versions Compatible and additional computed target framework versions. |
---|---|
.NET | net8.0-android34.0 is compatible. net8.0-ios17.2 is compatible. net8.0-maccatalyst17.2 is compatible. |
-
net8.0-android34.0
- LinkedIn.Spyglass (>= 3.0.3.1)
- Microsoft.Maui.Controls (>= 8.0.3)
- Microsoft.Maui.Core (>= 8.0.3)
-
net8.0-ios17.2
- LinkedIn.Hakawai (>= 7.4.8.8)
- Microsoft.Maui.Controls (>= 8.0.3)
- Microsoft.Maui.Core (>= 8.0.3)
-
net8.0-maccatalyst17.2
- LinkedIn.Hakawai (>= 7.4.8.8)
- Microsoft.Maui.Controls (>= 8.0.3)
- Microsoft.Maui.Core (>= 8.0.3)
NuGet packages
This package is not used by any NuGet packages.
GitHub repositories
This package is not used by any popular GitHub repositories.