fleather-editor
Question: Markdown Formatting Not Applied on First Use in FleatherField
I need to have 2 different FleatherFields & I don't want to have 2 toolbars shown at the same time - so depending on the focused field, I show toolbar with selected field's controller.
However, I’m experiencing an issue with both FleatherFields where formatting options (e.g., bold, italics, etc.) are not applied correctly when selected before typing. You can see the issue on the attached video.
https://github.com/user-attachments/assets/537e18ca-a44f-4260-8ec9-733332315e8c
It seems like the formatting doesn’t persist until the user types at least one character first. This issue occurs only before any text is entered—after that, the controller behaves normally.
Steps to Reproduce:
- Tap into a FleatherField.
- Without typing anything, select bold, italics or any other option from the toolbar.
- Start typing text.
- Notice that the formatting options are unchecked, and the text is not formatted as expected.
Expected Behavior: The selected formatting (bold, italics, ...) should be applied correctly from the first character typed after being selected in the toolbar.
My code:
- I tried to extract only the most relevant code.
class _ManualFlashcardScreenState extends ConsumerState<ManualFlashcardScreen> {
late final FleatherController _frontSideController;
late final FleatherController _backSideController;
final FocusNode _frontFocusNode = FocusNode();
final FocusNode _backFocusNode = FocusNode();
FleatherController? _activeController;
@override
void initState() {
super.initState();
_frontSideController = FleatherController(
document: widget.flashcard != null
? ParchmentDocument.fromDelta(widget.flashcard!.frontSide.toDelta())
: ParchmentDocument(),
);
_backSideController = FleatherController(
document: widget.flashcard != null
? ParchmentDocument.fromDelta(widget.flashcard!.backSide.toDelta())
: ParchmentDocument(),
);
_frontFocusNode.addListener(_updateActiveController);
_backFocusNode.addListener(_updateActiveController);
if (widget.flashcard == null) _frontFocusNode.requestFocus(); // creating flashcard, not editing
}
void _updateActiveController() {
setState(() {
if (_frontFocusNode.hasFocus) {
_activeController = _frontSideController;
} else if (_backFocusNode.hasFocus) {
_activeController = _backSideController;
}
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
FleatherField(
controller: _frontSideController,
focusNode: _frontFocusNode,
enableSuggestions: false,
),
FleatherField(
controller: _backSideController,
focusNode: _backFocusNode,
enableSuggestions: false,
),
if (_activeController != null)
FleatherToolbar.basic(controller: _activeController!),
],
),
);
}
}
Question
Is this behavior expected with FleatherField, or is there something wrong in my code that might be causing it? Any advice on how to resolve this would be appreciated!
Might be a bug as well, not sure to be honest
Sure, we'll take a look
Thanks a lot!
BTW just tested this out on iOS simulator and it works. So maybe the issue is just on Android or the Emulator itself?
BTW just tested this out on iOS simulator and it works. So maybe the issue is just on Android or the Emulator itself?顺便说一句，刚刚在 iOS 模拟器上对此进行了测试，它有效。那么，也许问题仅在于 Android 或 Emulator 本身上？
Encountering the same situation, it is necessary to input once in advance on Android to enable the style, while iOS does not require this.
BTW just tested this out on iOS simulator and it works. So maybe the issue is just on Android or the Emulator itself?
Just wanted to note - it works on iOS okay-ish... unless we select these text alignment controls (img) before typing anything. Then it leads to same behavior (first character resets toolbar and formatting and we need to select again)