From b86011aa943b164dae86499d6348955209cd49e9 Mon Sep 17 00:00:00 2001 From: Lucas Date: Thu, 14 Nov 2024 09:19:35 +0800 Subject: [PATCH] feat: optimize the font menu speed (#6780) --- .../document/document_test_runner_4.dart | 4 +- .../document/document_toolbar_test.dart | 50 ++++++++++++++++++ .../font/customize_font_toolbar_item.dart | 51 +++---------------- 3 files changed, 59 insertions(+), 46 deletions(-) create mode 100644 frontend/appflowy_flutter/integration_test/desktop/document/document_toolbar_test.dart diff --git a/frontend/appflowy_flutter/integration_test/desktop/document/document_test_runner_4.dart b/frontend/appflowy_flutter/integration_test/desktop/document/document_test_runner_4.dart index cfe2e640eb80..7ad52cd5a913 100644 --- a/frontend/appflowy_flutter/integration_test/desktop/document/document_test_runner_4.dart +++ b/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(); } diff --git a/frontend/appflowy_flutter/integration_test/desktop/document/document_toolbar_test.dart b/frontend/appflowy_flutter/integration_test/desktop/document/document_toolbar_test.dart new file mode 100644 index 000000000000..c3a086626fcd --- /dev/null +++ b/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, + ); + }); + }); +} diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/font/customize_font_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/font/customize_font_toolbar_item.dart index 4e7260bbb6ba..ef943a7ef7b9 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/font/customize_font_toolbar_item.dart +++ b/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 { Widget build(BuildContext context) { return SettingListTile( label: LocaleKeys.settings_appearance_fontFamily_label.tr(), - resetButtonKey: ThemeFontFamilySetting.resetButtonkey, + resetButtonKey: ThemeFontFamilySetting.resetButtonKey, onResetRequested: () { context.read().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 { 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 { ); } } - -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; -}