fleather_mention 0.0.1 fleather_mention: ^0.0.1 copied to clipboard
Mentions for the Fleather rich text editor
Fleather Mention #
It's under development and not production ready yet.
Fleather Mention is a plugin to provide @mentions or #hashtag functionality for the Fleather rich text editor.
Features #
- Easy to use
- Customizable trigger characters
- Async suggestion list builder
Getting started #
Add it to your dependencies.
dependencies:
flutter:
sdk: flutter
fleather: ^1.2.1
fleather_mention: ^0.0.1
Usage #
- Create mention options
final options = MentionOptions(
mentionTriggers: ['@'],
suggestionsBuilder: (trigger, query) {
final data = ['Android', 'iOS', 'Windows', 'macOs', 'Web', 'Linux'];
return data
.where((e) => e.toLowerCase().contains(query.toLowerCase()))
.map((e) => MentionData(value: e, trigger: trigger))
.toList();
},
itemBuilder: (_, data, __) => Text(data.value),
);
- Wrap your
FleatherEditor
withFleatherMention.withEditor
:
@override
Widget build(BuildContext context) {
return FleatherMention.withEditor(
options: options,
child: FleatherEditor(
controller: controller,
focusNode: focusNode,
editorKey: editorKey,
embedBuilder: (context, node) {
final mentionWidget = mentionEmbedBuilder(context, node);
if (mentionWidget != null) {
return mentionWidget;
}
throw UnimplementedError();
},
),
);
}
or your FleatherField
with FleatherMention.withField
:
@override
Widget build(BuildContext context) {
return FleatherMention.withField(
options: options,
child: FleatherField(
controller: controller,
focusNode: focusNode,
editorKey: editorKey,
embedBuilder: (context, node) {
final mentionWidget = mentionEmbedBuilder(context, node);
if (mentionWidget != null) {
return mentionWidget;
}
throw UnimplementedError();
},
),
);
}
Known issues #
- Jumping to new line after selecting mention from suggestions list
- Not customizable popup
- Bad design of mention inline embed