feat: optimize the font menu speed (#6780)

frontend/appflowy_flutter/integration_test/desktop/document/document_test_runner_4.dart

@@ -1,14 +1,15 @@
 import 'package:integration_test/integration_test.dart';
 
+import 'document_block_option_test.dart' as document_block_option_test;
 import 'document_inline_page_reference_test.dart'
     as document_inline_page_reference_test;
 import 'document_more_actions_test.dart' as document_more_actions_test;
 import 'document_shortcuts_test.dart' as document_shortcuts_test;
+import 'document_toolbar_test.dart' as document_toolbar_test;
 import 'document_with_file_test.dart' as document_with_file_test;
 import 'document_with_image_block_test.dart' as document_with_image_block_test;
 import 'document_with_multi_image_block_test.dart'
     as document_with_multi_image_block_test;
-import 'document_block_option_test.dart' as document_block_option_test;
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -21,4 +22,5 @@ void main() {
   document_with_file_test.main();
   document_shortcuts_test.main();
   document_block_option_test.main();
+  document_toolbar_test.main();
 }

frontend/appflowy_flutter/integration_test/desktop/document/document_toolbar_test.dart

@@ -0,0 +1,50 @@
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:integration_test/integration_test.dart';
+
+import '../../shared/util.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('document toolbar:', () {
+    testWidgets('font family', (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapAnonymousSignInButton();
+
+      await tester.createNewPageWithNameUnderParent();
+
+      await tester.editor.tapLineOfEditorAt(0);
+      const text = 'font family';
+      await tester.ime.insertText(text);
+      await tester.editor.updateSelection(
+        Selection.single(
+          path: [0],
+          startOffset: 0,
+          endOffset: text.length,
+        ),
+      );
+
+      // tap the font family button
+      final fontFamilyButton = find.byKey(kFontFamilyToolbarItemKey);
+      await tester.tapButton(fontFamilyButton);
+
+      // expect to see the font family dropdown immediately
+      expect(find.byType(FontFamilyDropDown), findsOneWidget);
+
+      // click the font family 'Abel'
+      const abel = 'Abel';
+      await tester.tapButton(find.text(abel));
+
+      // check the text is updated to 'Abel'
+      final editorState = tester.editor.getCurrentEditorState();
+      expect(
+        editorState.getDeltaAttributeValueInSelection(
+          AppFlowyRichTextKeys.fontFamily,
+        ),
+        abel,
+      );
+    });
+  });
+}

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/font/customize_font_toolbar_item.dart

@@ -14,7 +14,6 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_popover/appflowy_popover.dart';
 import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
-import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/style_widget/button.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_infra_ui/style_widget/text_field.dart';
@@ -24,6 +23,9 @@ import 'package:google_fonts/google_fonts.dart';
 
 const kFontToolbarItemId = 'editor.font';
 
+@visibleForTesting
+const kFontFamilyToolbarItemKey = ValueKey('FontFamilyToolbarItem');
+
 final customizeFontToolbarItem = ToolbarItem(
   id: kFontToolbarItemId,
   group: 4,
@@ -40,7 +42,6 @@ final customizeFontToolbarItem = ToolbarItem(
       popoverController: popoverController,
       onOpen: () => keepEditorFocusNotifier.increase(),
       onClose: () => keepEditorFocusNotifier.decrease(),
-      showResetButton: true,
       onFontFamilyChanged: (fontFamily) async {
         popoverController.close();
         try {
@@ -57,6 +58,7 @@ final customizeFontToolbarItem = ToolbarItem(
             .formatDelta(selection, {AppFlowyRichTextKeys.fontFamily: null});
       },
       child: FlowyButton(
+        key: kFontFamilyToolbarItemKey,
         useIntrinsicWidth: true,
         hoverColor: Colors.grey.withOpacity(0.3),
         onTap: () => popoverController.show(),
@@ -89,7 +91,7 @@ class ThemeFontFamilySetting extends StatefulWidget {
 
   final String currentFontFamily;
   static Key textFieldKey = const Key('FontFamilyTextField');
-  static Key resetButtonkey = const Key('FontFamilyResetButton');
+  static Key resetButtonKey = const Key('FontFamilyResetButton');
   static Key popoverKey = const Key('FontFamilyPopover');
 
   @override
@@ -101,7 +103,7 @@ class _ThemeFontFamilySettingState extends State<ThemeFontFamilySetting> {
   Widget build(BuildContext context) {
     return SettingListTile(
       label: LocaleKeys.settings_appearance_fontFamily_label.tr(),
-      resetButtonKey: ThemeFontFamilySetting.resetButtonkey,
+      resetButtonKey: ThemeFontFamilySetting.resetButtonKey,
       onResetRequested: () {
         context.read<AppearanceSettingsCubit>().resetFontFamily();
         context
@@ -125,7 +127,6 @@ class FontFamilyDropDown extends StatefulWidget {
     this.child,
     this.popoverController,
     this.offset,
-    this.showResetButton = false,
     this.onResetFont,
   });
 
@@ -136,7 +137,6 @@ class FontFamilyDropDown extends StatefulWidget {
   final Widget? child;
   final PopoverController? popoverController;
   final Offset? offset;
-  final bool showResetButton;
   final VoidCallback? onResetFont;
 
   @override
@@ -174,11 +174,6 @@ class _FontFamilyDropDownState extends State<FontFamilyDropDown> {
         return CustomScrollView(
           shrinkWrap: true,
           slivers: [
-            if (widget.showResetButton)
-              SliverPersistentHeader(
-                delegate: _ResetFontButton(onPressed: widget.onResetFont),
-                pinned: true,
-              ),
             SliverPadding(
               padding: const EdgeInsets.only(right: 8),
               sliver: SliverToBoxAdapter(
@@ -270,37 +265,3 @@ class _FontFamilyDropDownState extends State<FontFamilyDropDown> {
     );
   }
 }
-
-class _ResetFontButton extends SliverPersistentHeaderDelegate {
-  _ResetFontButton({this.onPressed});
-
-  final VoidCallback? onPressed;
-
-  @override
-  Widget build(
-    BuildContext context,
-    double shrinkOffset,
-    bool overlapsContent,
-  ) {
-    return Padding(
-      padding: const EdgeInsets.only(right: 8, bottom: 8.0),
-      child: FlowyTextButton(
-        LocaleKeys.document_toolbar_resetToDefaultFont.tr(),
-        fontColor: AFThemeExtension.of(context).textColor,
-        fontHoverColor: Theme.of(context).colorScheme.onSurface,
-        fontSize: 12,
-        onPressed: onPressed,
-      ),
-    );
-  }
-
-  @override
-  double get maxExtent => 35;
-
-  @override
-  double get minExtent => 35;
-
-  @override
-  bool shouldRebuild(covariant SliverPersistentHeaderDelegate oldDelegate) =>
-      true;
-}