fleather icon indicating copy to clipboard operation
fleather copied to clipboard

It seems the new overlay usage in heading and color picking etc doesnt work when keyboard is active

Open ember11498 opened this issue 10 months ago • 11 comments

Is this a known bug? when keyboard is active the overlay throwing an exception when i tap on headings or color picker

ember11498 avatar Apr 08 '24 21:04 ember11498

I could not reproduce Can you please give more details (Fleather version, Flutter version, platform)?

amantoux avatar Apr 08 '24 21:04 amantoux

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();
                  },
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

ember11498 avatar Apr 14 '24 21:04 ember11498

Simulator Screenshot - iPhone 15 Pro - 2024-04-18 at 17 16 59

截屏2024-04-18 17 22 23

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 avatar Apr 18 '24 09:04 ironCheng

截屏2024-04-18 17 28 47

ironCheng avatar Apr 18 '24 09:04 ironCheng

@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?

ember11498 avatar Apr 22 '24 09:04 ember11498

@Amir-P can you add this feature to the package?

ember11498 avatar Apr 22 '24 10:04 ember11498

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.

Amir-P avatar Apr 22 '24 10:04 Amir-P

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

Amir-P avatar Apr 26 '24 16:04 Amir-P

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.

WechatIMG54

My test code: 截屏2024-04-29 18 06 35

ironCheng avatar Apr 29 '24 10:04 ironCheng

Could you test against #352? @ironCheng

 fleather:
    git:
      url: https://github.com/fleather-editor/fleather
      ref: fix/selector_going_under_keyboard
      path: packages/fleather

Amir-P avatar May 13 '24 09:05 Amir-P

I'm coming. It test great!🎉 But maybe the Y minus the height of the toolbar will be more better. @Amir-P

1715607958206

1715607859269

ironCheng avatar May 13 '24 13:05 ironCheng

@Amir-P can you merge this? i just tested the latest version and this is still a bug

ember11498 avatar Jun 12 '24 09:06 ember11498