https://github.com/amir-p/fleather_mention
Mentions for the Fleather rich text editor
https://github.com/amir-p/fleather_mention
fleather flutter mentions rich-text-editor
Last synced: about 1 month ago
JSON representation
Mentions for the Fleather rich text editor
- Host: GitHub
- URL: https://github.com/amir-p/fleather_mention
- Owner: Amir-P
- License: mit
- Created: 2022-09-02T10:06:24.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-02-28T11:12:51.000Z (over 1 year ago)
- Last Synced: 2024-12-16T02:24:22.507Z (10 months ago)
- Topics: fleather, flutter, mentions, rich-text-editor
- Language: C++
- Homepage: https://pub.dev/packages/fleather_mention
- Size: 219 KB
- Stars: 8
- Watchers: 1
- Forks: 5
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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
* Navigation between options with keyboard
## Getting started
Add it to your dependencies.
```yaml
dependencies:
flutter:
sdk: flutter
fleather: ^1.12.0
fleather_mention: ^0.0.5
```
## Usage
Wrap `FleatherEditor` with `FleatherMention.withEditor` and `FleatherField` with `FleatherMention.withField`:
```dart
FleatherMention.withEditor(
triggers: ['#', '@'],
optionsBuilder: (trigger, query) {
final List data;
if (trigger == '#') {
data = ['Android', 'iOS', 'Windows', 'macOs', 'Web', 'Linux'];
} else {
data = [
'John',
'Michael',
'Dave',
'Susan',
'Emilia',
'Cathy'
];
}
return data
.where((e) => e.toLowerCase().contains(query.toLowerCase()))
.map((e) => MentionData(value: e, trigger: trigger))
.toList();
},
child: FleatherEditor(
controller: controller,
focusNode: focusNode,
editorKey: editorKey,
embedBuilder: (context, node) {
final mentionWidget = defaultMentionEmbedBuilder(context, node);
if (mentionWidget != null) {
return mentionWidget;
}
return defaultFleatherEmbedBuilder(context, node);
},
),
);
```