feat: optimize editing experience on mobile

example/lib/home_page.dart

@@ -87,13 +87,14 @@ class _HomePageState extends State<HomePage> {
       key: _scaffoldKey,
       extendBodyBehindAppBar: PlatformExtension.isDesktopOrWeb,
       drawer: _buildDrawer(context),
+      resizeToAvoidBottomInset: false,
       appBar: AppBar(
         backgroundColor: const Color.fromARGB(255, 134, 46, 247),
         foregroundColor: Colors.white,
         surfaceTintColor: Colors.transparent,
         title: const Text('AppFlowy Editor'),
       ),
-      body: SafeArea(child: _buildBody(context)),
+      body: _buildBody(context),
     );
   }
 

example/lib/pages/mobile_editor.dart

@@ -90,18 +90,14 @@ class _MobileEditorState extends State<MobileEditor> {
           ),
         ),
         // build mobile toolbar
-        MobileToolbar(
+        MobileToolbarV2(
           editorState: editorState,
           toolbarItems: [
-            textDecorationMobileToolbarItem,
+            textDecorationMobileToolbarItemV2,
             buildTextAndBackgroundColorMobileToolbarItem(),
-            headingMobileToolbarItem,
-            todoListMobileToolbarItem,
-            listMobileToolbarItem,
+            blocksMobileToolbarItem,
             linkMobileToolbarItem,
-            quoteMobileToolbarItem,
             dividerMobileToolbarItem,
-            codeMobileToolbarItem,
           ],
         ),
       ],

lib/src/editor/editor_component/service/keyboard_service_widget.dart

@@ -33,6 +33,9 @@ class KeyboardServiceWidgetState extends State<KeyboardServiceWidget>
   late final TextInputService textInputService;
   late final FocusNode focusNode;
 
+  // previous selection
+  Selection? previousSelection;
+
   // use for IME only
   bool enableShortcuts = true;
 
@@ -187,9 +190,17 @@ class KeyboardServiceWidgetState extends State<KeyboardServiceWidget>
     if (doNotAttach == true) {
       return;
     }
-    enableShortcuts = true;
+
     // attach the delta text input service if needed
     final selection = editorState.selection;
+
+    if (PlatformExtension.isMobile && previousSelection == selection) {
+      // no need to attach the text input service if the selection is not changed.
+      return;
+    }
+
+    enableShortcuts = true;
+
     if (selection == null) {
       textInputService.close();
     } else {
@@ -202,6 +213,8 @@ class KeyboardServiceWidgetState extends State<KeyboardServiceWidget>
         Log.editor.debug('keyboard service - request focus');
       }
     }
+
+    previousSelection = selection;
   }
 
   void _attachTextInputService(Selection selection) {

lib/src/editor/toolbar/mobile/mobile.dart

@@ -2,5 +2,6 @@ export 'mobile_floating_toolbar/mobile_floating_toolbar.dart';
 export 'mobile_toolbar.dart';
 export 'mobile_toolbar_item.dart';
 export 'mobile_toolbar_style.dart';
+export 'mobile_toolbar_v2.dart';
 export 'toolbar_items/toolbar_items.dart';
 export 'utils/utils.dart';

lib/src/editor/toolbar/mobile/mobile_toolbar.dart

@@ -53,14 +53,14 @@
           return const SizedBox.shrink();
         }
         return RepaintBoundary(
-          child: MobileToolbarStyle(
+          child: MobileToolbarTheme(
             backgroundColor: backgroundColor,
             foregroundColor: foregroundColor,
             clearDiagonalLineColor: clearDiagonalLineColor,
             itemHighlightColor: itemHighlightColor,
             itemOutlineColor: itemOutlineColor,
-            tabbarSelectedBackgroundColor: tabbarSelectedBackgroundColor,
-            tabbarSelectedForegroundColor: tabbarSelectedForegroundColor,
+            tabBarSelectedBackgroundColor: tabbarSelectedBackgroundColor,
+            tabBarSelectedForegroundColor: tabbarSelectedForegroundColor,
             primaryColor: primaryColor,
             onPrimaryColor: onPrimaryColor,
             outlineColor: outlineColor,
@@ -90,7 +90,7 @@
   void closeItemMenu();
 }
 
-class MobileToolbarWidget extends StatefulWidget {
+class MobileToolbarWidget extends StatefulWidget with WidgetsBindingObserver {
   const MobileToolbarWidget({
     super.key,
     required this.editorState,
@@ -111,6 +111,9 @@
   bool _showItemMenu = false;
   int? _selectedToolbarItemIndex;
 
+  double previousKeyboardHeight = 0.0;
+  bool updateKeyboardHeight = true;
+
   @override
   void closeItemMenu() {
     if (_showItemMenu) {
@@ -123,7 +126,14 @@
   @override
   Widget build(BuildContext context) {
     final width = MediaQuery.of(context).size.width;
-    final style = MobileToolbarStyle.of(context);
+    final style = MobileToolbarTheme.of(context);
+
+    final keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
+    if (updateKeyboardHeight) {
+      previousKeyboardHeight = keyboardHeight;
+    }
+    // print('object $keyboardHeight');
+
     return Column(
       children: [
         Container(
@@ -147,15 +157,27 @@
                   toolbarItems: widget.toolbarItems,
                   toolbarWidgetService: this,
                   itemWithMenuOnPressed: (selectedItemIndex) {
+                    updateKeyboardHeight = false;
                     setState(() {
                       // If last selected item is selected again, toggle item menu
                       if (_selectedToolbarItemIndex == selectedItemIndex) {
                         _showItemMenu = !_showItemMenu;
+
+                        if (!_showItemMenu) {
+                          // updateKeyboardHeight = true;
+                          widget.editorState.service.keyboardService
+                              ?.enableKeyBoard(widget.selection);
+                        } else {
+                          updateKeyboardHeight = false;
+                          widget.editorState.service.keyboardService
+                              ?.closeKeyboard();
+                        }
                       } else {
                         _selectedToolbarItemIndex = selectedItemIndex;
                         // If not, show item menu
                         _showItemMenu = true;
                         // close keyboard when menu pop up
+
                         widget.editorState.service.keyboardService
                             ?.closeKeyboard();
                       }
@@ -174,8 +196,8 @@
                       onPressed: () {
                         setState(() {
                           _showItemMenu = false;
-                          widget.editorState.service.keyboardService!
-                              .enableKeyBoard(widget.selection);
+                          widget.editorState.service.keyboardService
+                              ?.enableKeyBoard(widget.selection);
                         });
                       },
                       icon: const AFMobileIcon(
@@ -187,14 +209,22 @@
           ),
         ),
         // only for MobileToolbarItem.withMenu
-        if (_showItemMenu && _selectedToolbarItemIndex != null)
-          MobileToolbarItemMenu(
-            editorState: widget.editorState,
-            itemMenuBuilder: () => widget
-                .toolbarItems[_selectedToolbarItemIndex!]
-                // pass current [MobileToolbarWidgetState] to be used to closeItemMenu
-                .itemMenuBuilder!(widget.editorState, widget.selection, this),
-          ),
+        (_showItemMenu && _selectedToolbarItemIndex != null)
+            ? Container(
+                constraints: BoxConstraints(
+                  minHeight: previousKeyboardHeight,
+                ),
+                child: MobileToolbarItemMenu(
+                  editorState: widget.editorState,
+                  itemMenuBuilder: () => widget
+                      .toolbarItems[_selectedToolbarItemIndex!]
+                      // pass current [MobileToolbarWidgetState] to be used to closeItemMenu
+                      .itemMenuBuilder!(context, widget.editorState, this),
+                ),
+              )
+            : SizedBox(
+                height: previousKeyboardHeight,
+              ),
       ],
     );
   }
@@ -239,9 +269,10 @@
     return ListView.builder(
       itemBuilder: (context, index) {
         final toolbarItem = toolbarItems[index];
-        final icon = toolbarItem.itemIconBuilder(
+        final icon = toolbarItem.itemIconBuilder?.call(
           context,
           editorState,
+          toolbarWidgetService,
         );
         if (icon == null) {
           return const SizedBox.shrink();
@@ -256,8 +287,8 @@
               // close menu if other item's menu is still on the screen
               toolbarWidgetService.closeItemMenu();
               toolbarItems[index].actionHandler?.call(
+                    context,
                     editorState,
-                    selection,
                   );
             }
           },

lib/src/editor/toolbar/mobile/mobile_toolbar_item.dart

@@ -1,16 +1,16 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
 
-typedef MobileToolbarItemMenuBuilder = Widget Function(
+typedef MobileToolbarItemIconBuilder = Widget Function(
+  BuildContext context,
   EditorState editorState,
-  Selection selection,
   // To access to the state of MobileToolbarWidget
   MobileToolbarWidgetService service,
 );
 
 typedef MobileToolbarItemActionHandler = void Function(
+  BuildContext context,
   EditorState editorState,
-  Selection selection,
 );
 
 class MobileToolbarItem {
@@ -19,20 +19,21 @@ class MobileToolbarItem {
     required this.itemIconBuilder,
     required this.actionHandler,
   })  : hasMenu = false,
-        itemMenuBuilder = null;
+        itemMenuBuilder = null,
+        assert(itemIconBuilder != null && actionHandler != null);
 
   /// Tool bar item that opens a menu to show options
   const MobileToolbarItem.withMenu({
     required this.itemIconBuilder,
     required this.itemMenuBuilder,
   })  : hasMenu = true,
-        actionHandler = null;
+        actionHandler = null,
+        assert(itemMenuBuilder != null && itemIconBuilder != null);
 
-  final bool hasMenu;
-  final Widget? Function(
-    BuildContext context,
-    EditorState editorState,
-  ) itemIconBuilder;
-  final MobileToolbarItemMenuBuilder? itemMenuBuilder;
+  // if the result is null, the item will be hidden
+  final MobileToolbarItemIconBuilder? itemIconBuilder;
   final MobileToolbarItemActionHandler? actionHandler;
+
+  final bool hasMenu;
+  final MobileToolbarItemIconBuilder? itemMenuBuilder;
 }

lib/src/editor/toolbar/mobile/mobile_toolbar_style.dart

@@ -7,14 +7,35 @@
 /// itemHighlightColor -> selected item border color
 ///
 /// itemOutlineColor -> item border color
-class MobileToolbarStyle extends InheritedWidget {
+class MobileToolbarTheme extends InheritedWidget {
+  const MobileToolbarTheme({
+    super.key,
+    this.backgroundColor = Colors.white,
+    this.foregroundColor = const Color(0xff676666),
+    this.clearDiagonalLineColor = const Color(0xffB3261E),
+    this.itemHighlightColor = const Color(0xff1F71AC),
+    this.itemOutlineColor = const Color(0xFFE3E3E3),
+    this.tabBarSelectedBackgroundColor = const Color(0x23808080),
+    this.tabBarSelectedForegroundColor = Colors.black,
+    this.primaryColor = const Color(0xff1F71AC),
+    this.onPrimaryColor = Colors.white,
+    this.outlineColor = const Color(0xFFE3E3E3),
+    this.toolbarHeight = 50.0,
+    this.borderRadius = 6.0,
+    this.buttonHeight = 40.0,
+    this.buttonSpacing = 8.0,
+    this.buttonBorderWidth = 1.0,
+    this.buttonSelectedBorderWidth = 2.0,
+    required super.child,
+  });
+
   final Color backgroundColor;
   final Color foregroundColor;
   final Color clearDiagonalLineColor;
   final Color itemHighlightColor;
   final Color itemOutlineColor;
-  final Color tabbarSelectedBackgroundColor;
-  final Color tabbarSelectedForegroundColor;
+  final Color tabBarSelectedBackgroundColor;
+  final Color tabBarSelectedForegroundColor;
   final Color primaryColor;
   final Color onPrimaryColor;
   final Color outlineColor;
@@ -25,44 +46,25 @@
   final double buttonBorderWidth;
   final double buttonSelectedBorderWidth;
 
-  const MobileToolbarStyle({
-    super.key,
-    required this.backgroundColor,
-    required this.foregroundColor,
-    required this.clearDiagonalLineColor,
-    required this.itemHighlightColor,
-    required this.itemOutlineColor,
-    required this.tabbarSelectedBackgroundColor,
-    required this.tabbarSelectedForegroundColor,
-    required this.primaryColor,
-    required this.onPrimaryColor,
-    required this.outlineColor,
-    required this.toolbarHeight,
-    required this.borderRadius,
-    required this.buttonHeight,
-    required this.buttonSpacing,
-    required this.buttonBorderWidth,
-    required this.buttonSelectedBorderWidth,
-    required super.child,
-  });
+  static MobileToolbarTheme of(BuildContext context) {
+    return context.dependOnInheritedWidgetOfExactType<MobileToolbarTheme>()!;
+  }
 
-  static MobileToolbarStyle of(BuildContext context) {
-    return context.dependOnInheritedWidgetOfExactType<MobileToolbarStyle>()!;
+  static MobileToolbarTheme? maybeOf(BuildContext context) {
+    return context.dependOnInheritedWidgetOfExactType<MobileToolbarTheme>();
   }
 
   @override
-  bool updateShouldNotify(covariant MobileToolbarStyle oldWidget) {
-    // This function is called whenever the inherited widget is rebuilt.
-    // It should return true if the new widget's values are different from the old widget's values.
+  bool updateShouldNotify(covariant MobileToolbarTheme oldWidget) {
     return backgroundColor != oldWidget.backgroundColor ||
         foregroundColor != oldWidget.foregroundColor ||
         clearDiagonalLineColor != oldWidget.clearDiagonalLineColor ||
         itemHighlightColor != oldWidget.itemHighlightColor ||
         itemOutlineColor != oldWidget.itemOutlineColor ||
-        tabbarSelectedBackgroundColor !=
-            oldWidget.tabbarSelectedBackgroundColor ||
-        tabbarSelectedForegroundColor !=
-            oldWidget.tabbarSelectedForegroundColor ||
+        tabBarSelectedBackgroundColor !=
+            oldWidget.tabBarSelectedBackgroundColor ||
+        tabBarSelectedForegroundColor !=
+            oldWidget.tabBarSelectedForegroundColor ||
         primaryColor != oldWidget.primaryColor ||
         onPrimaryColor != oldWidget.onPrimaryColor ||
         outlineColor != oldWidget.outlineColor ||