fleather
fleather copied to clipboard
It seems the new overlay usage in heading and color picking etc doesnt work when keyboard is active
Is this a known bug? when keyboard is active the overlay throwing an exception when i tap on headings or color picker
I could not reproduce Can you please give more details (Fleather version, Flutter version, platform)?
after some experiences I found that the overlay does not consider the fact that keyboard might be active. per example in my case I place my toolbar right above the keyboard and when I tap on colorbutton the overlay is behind the keyboard (i cannot see it). if i place the toolbar at the top of the screen i can see it. but i want the toolbar to be right next the keyboard so if it is possible is there a way you can implement something that will take into consideration the keyboard height or something?
class FleatherTextEditor extends StatefulWidget {
final ParchmentDocument doc;
final Function(FleatherController) onSaved;
const FleatherTextEditor(
{super.key, required this.doc, required this.onSaved});
@override
State<FleatherTextEditor> createState() => _FleatherTextEditorState();
}
class _FleatherTextEditorState extends State<FleatherTextEditor> {
late final FocusNode node;
late final FleatherController controller;
@override
void initState() {
super.initState();
node = FocusNode();
controller = FleatherController(document: widget.doc);
widget.doc.changes.listen((event) {
print(controller.document.length);
});
}
Widget backgroundColorBuilder(BuildContext context, value) => Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.mode_edit_outline_outlined,
size: 16,
),
Container(
width: 18,
height: 4,
decoration: BoxDecoration(color: value),
)
],
);
Widget textColorBuilder(BuildContext context, value) {
Color effectiveColor =
value ?? DefaultTextStyle.of(context).style.color ?? Colors.black;
return Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
const Icon(
Icons.text_fields_sharp,
size: 16,
),
Container(
width: 18,
height: 4,
decoration: BoxDecoration(color: effectiveColor),
)
],
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 600),
child: SafeArea(
child: CustomFleatherTheme(
child: Column(
children: [
ElevatedButton(
onPressed: () {
widget.onSaved(controller);
context.pop();
},
style: ButtonStyle(
backgroundColor:
MaterialStatePropertyAll(context.colorScheme.primary),
),
child: Text('Save', style: context.regular),
),
FleatherToolbar(
children: [
ColorButton(
controller: controller,
attributeKey: ParchmentAttribute.foregroundColor,
nullColorLabel: 'Automatic',
builder: (context, color) =>
textColorBuilder(context, color),
),
],
),
Expanded(
child: FleatherEditor(
controller: controller,
focusNode: node,
autofocus: true,
padding: const EdgeInsets.symmetric(
horizontal: 8,
),
),
),
KeyboardVisibilityBuilder(
builder: (p0, isKeyboardVisible) {
if (isKeyboardVisible) {
return SizedBox(
width: MediaQuery.of(context).size.width,
height: 35,
child: FleatherToolbar(
padding: const EdgeInsets.all(0),
children: [
ToggleStyleButton(
attribute: ParchmentAttribute.bold,
icon: Icons.format_bold,
controller: controller,
),
ToggleStyleButton(
attribute: ParchmentAttribute.italic,
icon: Icons.format_italic,
controller: controller,
),
ToggleStyleButton(
attribute: ParchmentAttribute.underline,
icon: Icons.format_underline,
controller: controller,
),
ToggleStyleButton(
attribute: ParchmentAttribute.strikethrough,
icon: Icons.format_strikethrough,
controller: controller,
),
ColorButton(
controller: controller,
attributeKey: ParchmentAttribute.foregroundColor,
nullColorLabel: 'Automatic',
builder: (context, color) =>
textColorBuilder(context, color),
),
ColorButton(
controller: controller,
attributeKey: ParchmentAttribute.backgroundColor,
nullColorLabel: 'No color',
builder: backgroundColorBuilder,
),
ToggleStyleButton(
attribute: ParchmentAttribute.left,
icon: Icons.format_align_left,
controller: controller,
),
ToggleStyleButton(
attribute: ParchmentAttribute.center,
icon: Icons.format_align_center,
controller: controller,
),
ToggleStyleButton(
attribute: ParchmentAttribute.right,
icon: Icons.format_align_right,
controller: controller,
),
ToggleStyleButton(
attribute: ParchmentAttribute.justify,
icon: Icons.format_align_justify,
controller: controller,
),
IndentationButton(
increase: false,
controller: controller,
),
IndentationButton(
controller: controller,
),
ToggleStyleButton(
attribute: ParchmentAttribute.block.numberList,
controller: controller,
icon: Icons.format_list_numbered,
),
ToggleStyleButton(
attribute: ParchmentAttribute.block.bulletList,
controller: controller,
icon: Icons.format_list_bulleted,
),
ToggleStyleButton(
attribute: ParchmentAttribute.block.checkList,
controller: controller,
icon: Icons.checklist,
),
ToggleStyleButton(
attribute: ParchmentAttribute.block.code,
controller: controller,
icon: Icons.code,
),
ToggleStyleButton(
attribute: ParchmentAttribute.block.quote,
controller: controller,
icon: Icons.format_quote,
),
InsertEmbedButton(
controller: controller,
icon: Icons.horizontal_rule,
),
SelectHeadingButton(controller: controller),
UndoRedoButton.undo(controller: controller),
UndoRedoButton.redo(controller: controller),
],
),
);
}
return const SizedBox();
},
),
],
),
),
),
),
);
}
}
I added a spreadUp attribute to customFleatherThemeData. Then modified the _selectHeading() method of the editor_toolbar.dart file
Positioned( bottom: MediaQuery.of(context).size.height - originOffset.dy, left: offset.dx, child: selector, )
@ironCheng I see you resolved the issue but that spreadUp parameter doesnt exist. Will there be a pull request? Or I need to somehow customize it on my own like you did?
@Amir-P can you add this feature to the package?
Sorry for the delay and thanks for reporting the issue and discussing possible solutions. @ironCheng @ember11498
An extra parameter to control the direction in which overlay is laid out is good, but I think it's better to take a more flexible approach like the one being already used in showMenu
by Flutter (positioning overlay according to the available space and media query details). I will work on it this week and open the PR.
Could you please check the fix and verify if it's working correctly for you? @ironCheng @ember11498
fleather:
git:
url: https://github.com/fleather-editor/fleather
ref: fix/toolbar_selector_positioning
path: packages/fleather
I found fix/toolbar_selector_positioning is deleted, it seems you merged to the mastr? So I verified in the master branch, it still have problem.
My test code:
Could you test against #352? @ironCheng
fleather:
git:
url: https://github.com/fleather-editor/fleather
ref: fix/selector_going_under_keyboard
path: packages/fleather
I'm coming. It test great!🎉 But maybe the Y minus the height of the toolbar will be more better. @Amir-P
@Amir-P can you merge this? i just tested the latest version and this is still a bug