Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] MobileToolbarV2 shows unnecessary space when keyboard is out #959

Open
saif-ellafi opened this issue Nov 1, 2024 · 3 comments
Open
Labels

Comments

@saif-ellafi
Copy link
Contributor

saif-ellafi commented Nov 1, 2024

Bug Description

Not sure if I am doing anything wrong, but there is a padding space of proportional size to toolbarHeight when the keyboard is up. This happens to be inside the Widget Column inside MobileToolbarV2

image

image

How to Reproduce

Follow the MobileToolbarV2 example and try on a mobile phone. When the keyboard is up, a large padding area shows at the bottom inside MobileToolbarV2

Expected Behavior

The extra space is not necessary

Operating System

Android

AppFlowy Editor Version(s)

4.0.0

Screenshots

No response

Additional Context

No response

@saif-ellafi
Copy link
Contributor Author

saif-ellafi commented Nov 1, 2024

@LucasXu0 - I think the ValueListenableBuilder on Keyboard being shown is not needed on MobileToolbarV2 as per in the screenshot, the toolbar is alwalys on top of the keyboard, or at least it can be managed by the rest of the app.

@LucasXu0 LucasXu0 added the p1 label Dec 11, 2024
@LucasXu0
Copy link
Collaborator

@saif-ellafi Can you share the code sample? The empty padding should be related to the toolbarHeight setting. I can't reproduce it in the example app or appflowy app.

@saif-ellafi
Copy link
Contributor Author

Hello @LucasXu0 - just FYI yes this happens when my editor is, in this case, in a Popup Dialog.
For now I am using in production the Desktop editor with a toolbar in all devices.

image

my app is complex but I hope these snippets help somehow? I am not doing anything fancy, other than this is inside a Column with expanded rich editor

                          Container(
                            padding: EdgeInsets.symmetric(horizontal: 5.0),
                            decoration: BoxDecoration(
                              border: Border.all(
                                width: 1.5,  
                                color: PUMCompanion.gameTheme.tertiaryTextStyle.color!,
                              ),
                              borderRadius: PUMCompanion.gameTheme.borderRadius,
                            ),
                            child: PopScope(
                              onPopInvokedWithResult: (didPop, popResult) {
                                if (didPop) {
                                  widget.doSaveGame();
                                }
                              },
                              child: Padding(
                                padding: const EdgeInsets.symmetric(vertical: 10.0),
                                child: RichEditorMobile(
                                  // editorState: _textControllers[index][descIndex],
                                  tabs: _tabs,
                                  textControllers: _textControllers,
                                  index: index,
                                  descIndex: descIndex,
                                  widget: widget,
                                  // tabName: _tabs[index],
                                )
                              ),
                            ),
                          ),
  @override
  Widget build(BuildContext context) {

    final editorState = _textControllers[index][descIndex];
    final innerScrollController = ScrollController();
    final editorScrollController = EditorScrollController(
      editorState: editorState,
      scrollController: innerScrollController,
    );
    editorScrollController.scrollController = innerScrollController;

    return MobileToolbarV2(
      toolbarHeight: 40.0,
      toolbarItems: [
        textDecorationMobileToolbarItemV2,
        buildTextAndBackgroundColorMobileToolbarItem(),
        blocksMobileToolbarItem,
        linkMobileToolbarItem,
        dividerMobileToolbarItem,
      ],
      editorState: editorState,
      backgroundColor: PUMCompanion.gameTheme.backgroundColor,
      iconColor: PUMCompanion.gameTheme.primaryTextStyle.color!,
      foregroundColor: PUMCompanion.gameTheme.primaryTextStyle.color!,
      child: MobileFloatingToolbar(
        editorState: editorState,
        editorScrollController: editorScrollController,
        toolbarBuilder: (context, anchor, closeToolbar) {
          return AdaptiveTextSelectionToolbar.editable(
            clipboardStatus: ClipboardStatus.pasteable,
            onCopy: () {
              copyCommand.execute(editorState);
              closeToolbar();
            },
            onCut: () => cutCommand.execute(editorState),
            onPaste: () => pasteCommand.execute(editorState),
            onSelectAll: () => selectAllCommand.execute(editorState),
            onLiveTextInput: null,
            onLookUp: null,
            onSearchWeb: null,
            onShare: null,
            anchors: TextSelectionToolbarAnchors(
              primaryAnchor: anchor,
            ),
          );
        },
        child: AppFlowyEditor(
          editorStyle: _buildMobileEditorStyle(editorState),
          editorState: editorState,
          autoScrollEdgeOffset: 20.0,
          editorScrollController: editorScrollController,
          blockComponentBuilders: _buildBlockComponentBuilders(),
          showMagnifier: true,
        ),
      ),
    );
  }

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants