From 8e10cba8e5495d4db02951515716f44d6e6c1e95 Mon Sep 17 00:00:00 2001 From: "Lucas.Xu" Date: Wed, 11 Oct 2023 23:12:23 +0800 Subject: [PATCH] feat: support toggling the markdown style by shortcuts (#3674) --- .../database_row_page_test.dart | 2 +- .../document_create_and_delete_test.dart | 2 +- .../sidebar/sidebar_test.dart | 4 +-- .../document/presentation/editor_page.dart | 2 +- .../actions/block_action_option_button.dart | 4 +-- .../actions/editor_action_wrapper.dart | 1 - .../actions/option_action_button.dart | 27 ------------------- .../align_toolbar_item.dart | 6 ++--- .../base/link_to_page_widget.dart | 8 +++--- .../find_and_replace_menu.dart | 12 ++++----- .../font/customize_font_toolbar_item.dart | 6 ++--- .../inline_math_equation_toolbar_item.dart | 3 +-- .../widgets/smart_edit_toolbar_item.dart | 6 ++--- .../toggle/toggle_block_component.dart | 19 +++++++------ .../document/presentation/editor_style.dart | 10 +++---- .../widgets/emoji_picker/emoji_menu_item.dart | 4 +-- frontend/appflowy_flutter/pubspec.lock | 6 ++--- frontend/appflowy_flutter/pubspec.yaml | 2 +- 18 files changed, 48 insertions(+), 76 deletions(-) delete mode 100644 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/editor_action_wrapper.dart diff --git a/frontend/appflowy_flutter/integration_test/database_row_page_test.dart b/frontend/appflowy_flutter/integration_test/database_row_page_test.dart index 553748de68..62d5c81be3 100644 --- a/frontend/appflowy_flutter/integration_test/database_row_page_test.dart +++ b/frontend/appflowy_flutter/integration_test/database_row_page_test.dart @@ -245,7 +245,7 @@ void main() { await tester.wait(500); // Focus on the editor - final textBlock = find.byType(TextBlockComponentWidget); + final textBlock = find.byType(ParagraphBlockComponentWidget); await tester.tapAt(tester.getCenter(textBlock)); await tester.pumpAndSettle(); diff --git a/frontend/appflowy_flutter/integration_test/document/document_create_and_delete_test.dart b/frontend/appflowy_flutter/integration_test/document/document_create_and_delete_test.dart index c0f9a9af2a..fb5aee6bb7 100644 --- a/frontend/appflowy_flutter/integration_test/document/document_create_and_delete_test.dart +++ b/frontend/appflowy_flutter/integration_test/document/document_create_and_delete_test.dart @@ -24,7 +24,7 @@ void main() { LocaleKeys.menuAppHeader_defaultNewPageName.tr(), ); // and with one paragraph block - expect(find.byType(TextBlockComponentWidget), findsOneWidget); + expect(find.byType(ParagraphBlockComponentWidget), findsOneWidget); }); testWidgets('delete the readme page and restore it', (tester) async { diff --git a/frontend/appflowy_flutter/integration_test/sidebar/sidebar_test.dart b/frontend/appflowy_flutter/integration_test/sidebar/sidebar_test.dart index b416c73138..b425eea8de 100644 --- a/frontend/appflowy_flutter/integration_test/sidebar/sidebar_test.dart +++ b/frontend/appflowy_flutter/integration_test/sidebar/sidebar_test.dart @@ -30,7 +30,7 @@ void main() { LocaleKeys.menuAppHeader_defaultNewPageName.tr(), ); // and with one paragraph block - expect(find.byType(TextBlockComponentWidget), findsOneWidget); + expect(find.byType(ParagraphBlockComponentWidget), findsOneWidget); }); testWidgets('create a new document, grid, board and calendar', @@ -55,7 +55,7 @@ void main() { switch (layout) { case ViewLayoutPB.Document: // and with one paragraph block - expect(find.byType(TextBlockComponentWidget), findsOneWidget); + expect(find.byType(ParagraphBlockComponentWidget), findsOneWidget); break; case ViewLayoutPB.Grid: expect(find.byType(GridPage), findsOneWidget); diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart index 15f293c180..ecf17cd59a 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart @@ -240,7 +240,7 @@ class _AppFlowyEditorPageState extends State { final customBlockComponentBuilderMap = { PageBlockKeys.type: PageBlockComponentBuilder(), - ParagraphBlockKeys.type: TextBlockComponentBuilder( + ParagraphBlockKeys.type: ParagraphBlockComponentBuilder( configuration: configuration, ), TodoListBlockKeys.type: TodoListBlockComponentBuilder( diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart index 0bd27a516e..265e3c6310 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart @@ -47,7 +47,7 @@ class BlockOptionButton extends StatelessWidget { : PopoverDirection.leftWithCenterAligned, actions: popoverActions, onPopupBuilder: () { - keepEditorFocusNotifier.value += 1; + keepEditorFocusNotifier.increase(); blockComponentState.alwaysShowActions = true; }, onClosed: () { @@ -55,7 +55,7 @@ class BlockOptionButton extends StatelessWidget { editorState.selectionType = null; editorState.selection = null; blockComponentState.alwaysShowActions = false; - keepEditorFocusNotifier.value -= 1; + keepEditorFocusNotifier.decrease(); }); }, onSelected: (action, controller) { diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/editor_action_wrapper.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/editor_action_wrapper.dart deleted file mode 100644 index 8b13789179..0000000000 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/editor_action_wrapper.dart +++ /dev/null @@ -1 +0,0 @@ - diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action_button.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action_button.dart index a10920f635..fc9fe23a45 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action_button.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action_button.dart @@ -3,7 +3,6 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/op import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:appflowy_popover/appflowy_popover.dart'; - import 'package:flowy_infra_ui/widget/ignore_parent_gesture.dart'; import 'package:flutter/material.dart'; @@ -112,32 +111,6 @@ class OptionActionList extends StatelessWidget { } } -class BlockComponentActionButton extends StatelessWidget { - const BlockComponentActionButton({ - super.key, - required this.icon, - required this.onTap, - }); - - final bool isHovering = false; - final Widget icon; - final VoidCallback onTap; - - @override - Widget build(BuildContext context) { - return MouseRegion( - cursor: SystemMouseCursors.grab, - child: GestureDetector( - behavior: HitTestBehavior.opaque, - onTap: onTap, - onTapDown: (details) {}, - onTapUp: (details) {}, - child: icon, - ), - ); - } -} - class OptionActionButton extends StatelessWidget { const OptionActionButton({ super.key, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/align_toolbar_item/align_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/align_toolbar_item/align_toolbar_item.dart index 61b1c92407..a9a417b514 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/align_toolbar_item/align_toolbar_item.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/align_toolbar_item/align_toolbar_item.dart @@ -11,7 +11,7 @@ final alignToolbarItem = ToolbarItem( id: 'editor.align', group: 4, isActive: onlyShowInTextType, - builder: (context, editorState, highlightColor) { + builder: (context, editorState, highlightColor, _) { final selection = editorState.selection!; final nodes = editorState.getNodesInSelection(selection); @@ -89,11 +89,11 @@ class _AlignmentButtonsState extends State<_AlignmentButtons> { borderRadius: const BorderRadius.all(Radius.circular(4)), ), popupBuilder: (_) { - keepEditorFocusNotifier.value += 1; + keepEditorFocusNotifier.increase(); return _AlignButtons(onAlignChanged: widget.onAlignChanged); }, onClose: () { - keepEditorFocusNotifier.value -= 1; + keepEditorFocusNotifier.decrease(); }, child: widget.child, ); diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart index 0796687dfd..5cbaf4719e 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart @@ -1,4 +1,5 @@ import 'package:appflowy/generated/flowy_svgs.g.dart'; +import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/base/insert_page_command.dart'; import 'package:appflowy/workspace/application/view/view_ext.dart'; import 'package:appflowy/workspace/application/view/view_service.dart'; @@ -6,13 +7,12 @@ import 'package:appflowy/workspace/presentation/widgets/dialogs.dart'; import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart'; import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; +import 'package:easy_localization/easy_localization.dart'; import 'package:flowy_infra_ui/style_widget/button.dart'; import 'package:flowy_infra_ui/style_widget/text.dart'; import 'package:flowy_infra_ui/widget/error_page.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; -import 'package:appflowy/generated/locale_keys.g.dart'; -import 'package:easy_localization/easy_localization.dart'; void showLinkToPageMenu( OverlayState container, @@ -27,13 +27,13 @@ void showLinkToPageMenu( final top = alignment == Alignment.bottomLeft ? offset.dy : null; final bottom = alignment == Alignment.topLeft ? offset.dy : null; - keepEditorFocusNotifier.value += 1; + keepEditorFocusNotifier.increase(); late OverlayEntry linkToPageMenuEntry; linkToPageMenuEntry = FullScreenOverlayEntry( top: top, bottom: bottom, left: offset.dx, - dismissCallback: () => keepEditorFocusNotifier.value -= 1, + dismissCallback: () => keepEditorFocusNotifier.decrease(), builder: (context) => Material( color: Colors.transparent, child: LinkToPageMenu( diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/find_and_replace/find_and_replace_menu.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/find_and_replace/find_and_replace_menu.dart index aded39f614..cd85509179 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/find_and_replace/find_and_replace_menu.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/find_and_replace/find_and_replace_menu.dart @@ -24,7 +24,7 @@ class FindAndReplaceMenuWidget extends StatefulWidget { class _FindAndReplaceMenuWidgetState extends State { bool showReplaceMenu = false; - late SearchServiceV2 searchService = SearchServiceV2( + late SearchServiceV3 searchService = SearchServiceV3( editorState: widget.editorState, ); @@ -72,7 +72,7 @@ class FindMenu extends StatefulWidget { final EditorState editorState; final VoidCallback onDismiss; - final SearchServiceV2 searchService; + final SearchServiceV3 searchService; final void Function(bool value) onShowReplace; @override @@ -93,7 +93,7 @@ class _FindMenuState extends State { void initState() { super.initState(); - widget.searchService.matchedPositions.addListener(_setState); + widget.searchService.matchWrappers.addListener(_setState); widget.searchService.currentSelectedIndex.addListener(_setState); findTextEditingController.addListener(_searchPattern); @@ -105,7 +105,7 @@ class _FindMenuState extends State { @override void dispose() { - widget.searchService.matchedPositions.removeListener(_setState); + widget.searchService.matchWrappers.removeListener(_setState); widget.searchService.currentSelectedIndex.removeListener(_setState); widget.searchService.dispose(); findTextEditingController.removeListener(_searchPattern); @@ -117,7 +117,7 @@ class _FindMenuState extends State { Widget build(BuildContext context) { // the selectedIndex from searchService is 0-based final selectedIndex = widget.searchService.selectedIndex + 1; - final matches = widget.searchService.matchedPositions.value; + final matches = widget.searchService.matchWrappers.value; return Row( children: [ const HSpace(4.0), @@ -232,7 +232,7 @@ class ReplaceMenu extends StatefulWidget { /// The localizations of the find and replace menu final FindReplaceLocalizations? localizations; - final SearchServiceV2 searchService; + final SearchServiceV3 searchService; @override State createState() => _ReplaceMenuState(); 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 6f91d7bdc9..ea041a6cdd 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 @@ -9,7 +9,7 @@ final customizeFontToolbarItem = ToolbarItem( id: 'editor.font', group: 4, isActive: onlyShowInTextType, - builder: (context, editorState, highlightColor) { + builder: (context, editorState, highlightColor, _) { final selection = editorState.selection!; final popoverController = PopoverController(); return MouseRegion( @@ -18,8 +18,8 @@ final customizeFontToolbarItem = ToolbarItem( currentFontFamily: '', offset: const Offset(0, 12), popoverController: popoverController, - onOpen: () => keepEditorFocusNotifier.value += 1, - onClose: () => keepEditorFocusNotifier.value -= 1, + onOpen: () => keepEditorFocusNotifier.increase(), + onClose: () => keepEditorFocusNotifier.decrease(), showResetButton: true, onFontFamilyChanged: (fontFamily) async { popoverController.close(); diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/inline_math_equation/inline_math_equation_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/inline_math_equation/inline_math_equation_toolbar_item.dart index 21a8568a07..08c23df05b 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/inline_math_equation/inline_math_equation_toolbar_item.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/inline_math_equation/inline_math_equation_toolbar_item.dart @@ -3,14 +3,13 @@ import 'package:appflowy/generated/locale_keys.g.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart'; import 'package:appflowy_editor/appflowy_editor.dart'; import 'package:easy_localization/easy_localization.dart'; - import 'package:flutter/material.dart'; final ToolbarItem inlineMathEquationItem = ToolbarItem( id: 'editor.inline_math_equation', group: 2, isActive: onlyShowInSingleSelectionAndTextType, - builder: (context, editorState, highlightColor) { + builder: (context, editorState, highlightColor, _) { final selection = editorState.selection!; final nodes = editorState.getNodesInSelection(selection); final isHighlight = nodes.allSatisfyInSelection(selection, (delta) { diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_toolbar_item.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_toolbar_item.dart index b96ac36ec1..10e09f9263 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_toolbar_item.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/smart_edit_toolbar_item.dart @@ -14,7 +14,7 @@ final ToolbarItem smartEditItem = ToolbarItem( id: 'appflowy.editor.smart_edit', group: 0, isActive: onlyShowInSingleSelectionAndTextType, - builder: (context, editorState, _) => SmartEditActionList( + builder: (context, editorState, _, __) => SmartEditActionList( editorState: editorState, ), ); @@ -55,9 +55,9 @@ class _SmartEditActionListState extends State { actions: SmartEditAction.values .map((action) => SmartEditActionWrapper(action)) .toList(), - onClosed: () => keepEditorFocusNotifier.value -= 1, + onClosed: () => keepEditorFocusNotifier.decrease(), buildChild: (controller) { - keepEditorFocusNotifier.value += 1; + keepEditorFocusNotifier.increase(); return FlowyIconButton( hoverColor: Colors.transparent, tooltipText: isOpenAIEnabled diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart index 6569a5a8d7..a9ff605b03 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart @@ -163,16 +163,19 @@ class _ToggleListBlockComponentWidgetState textDirection: textDirection, children: [ // the emoji picker button for the note - FlowyIconButton( - width: 24.0, - icon: Icon( - collapsed ? Icons.arrow_right : Icons.arrow_drop_down, + Container( + constraints: const BoxConstraints(minWidth: 26, minHeight: 22), + padding: const EdgeInsets.only(right: 4.0), + child: FlowyIconButton( + width: 18.0, + icon: Icon( + collapsed ? Icons.arrow_right : Icons.arrow_drop_down, + size: 18.0, + ), + onPressed: onCollapsed, ), - onPressed: onCollapsed, - ), - const SizedBox( - width: 4.0, ), + Flexible( child: AppFlowyRichText( key: forwardKey, diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart index 8742a48c7c..8e4eb9d1f1 100644 --- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart +++ b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_style.dart @@ -1,11 +1,8 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_math_equation/inline_math_equation.dart'; import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_block.dart'; import 'package:appflowy/plugins/document/presentation/more/cubit/document_appearance_cubit.dart'; - import 'package:appflowy/plugins/inline_actions/inline_actions_menu.dart'; - import 'package:appflowy/util/google_font_family_extension.dart'; - import 'package:appflowy_editor/appflowy_editor.dart' hide Log; import 'package:collection/collection.dart'; import 'package:flutter/material.dart'; @@ -63,12 +60,13 @@ class EditorStyleCustomizer { color: theme.colorScheme.primary, decoration: TextDecoration.underline, ), - code: GoogleFonts.robotoMono( + code: GoogleFonts.arefRuqaaInk( textStyle: baseTextStyle(fontFamily).copyWith( fontSize: fontSize, fontWeight: FontWeight.normal, + fontStyle: FontStyle.italic, color: Colors.red, - backgroundColor: theme.colorScheme.inverseSurface, + backgroundColor: theme.colorScheme.inverseSurface.withOpacity(0.8), ), ), ), @@ -102,7 +100,7 @@ class EditorStyleCustomizer { color: theme.colorScheme.primary, decoration: TextDecoration.underline, ), - code: GoogleFonts.robotoMono( + code: GoogleFonts.arefRuqaaInk( textStyle: baseTextStyle(fontFamily).copyWith( fontSize: fontSize, fontWeight: FontWeight.normal, diff --git a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/emoji_menu_item.dart b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/emoji_menu_item.dart index 4ea967b1f9..65ad4c642e 100644 --- a/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/emoji_menu_item.dart +++ b/frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/emoji_menu_item.dart @@ -36,12 +36,12 @@ void showEmojiPickerMenu( final top = alignment == Alignment.topLeft ? offset.dy : null; final bottom = alignment == Alignment.bottomLeft ? offset.dy : null; - keepEditorFocusNotifier.value += 1; + keepEditorFocusNotifier.increase(); final emojiPickerMenuEntry = FullScreenOverlayEntry( top: top, bottom: bottom, left: offset.dx, - dismissCallback: () => keepEditorFocusNotifier.value -= 1, + dismissCallback: () => keepEditorFocusNotifier.decrease(), builder: (context) => Material( type: MaterialType.transparency, child: Container( diff --git a/frontend/appflowy_flutter/pubspec.lock b/frontend/appflowy_flutter/pubspec.lock index 5b6d3c5b4a..4ba8b3df96 100644 --- a/frontend/appflowy_flutter/pubspec.lock +++ b/frontend/appflowy_flutter/pubspec.lock @@ -54,11 +54,11 @@ packages: dependency: "direct main" description: path: "." - ref: adb05d4 - resolved-ref: adb05d4c49fe2f518e5554cc7d6c2fbe3b01670d + ref: "194fe2f" + resolved-ref: "194fe2fec9ce00baa2d5f2afbbfe0a45b3a7b158" url: "https://github.com/AppFlowy-IO/appflowy-editor.git" source: git - version: "1.4.3" + version: "1.4.4" appflowy_popover: dependency: "direct main" description: diff --git a/frontend/appflowy_flutter/pubspec.yaml b/frontend/appflowy_flutter/pubspec.yaml index 4822b0e3ba..2f889bd8d5 100644 --- a/frontend/appflowy_flutter/pubspec.yaml +++ b/frontend/appflowy_flutter/pubspec.yaml @@ -47,7 +47,7 @@ dependencies: appflowy_editor: git: url: https://github.com/AppFlowy-IO/appflowy-editor.git - ref: "adb05d4" + ref: "194fe2f" appflowy_popover: path: packages/appflowy_popover