feat: support toggling the markdown style by shortcuts (#3674)

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();
 

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 {

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);

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart

@@ -240,7 +240,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
 
     final customBlockComponentBuilderMap = {
       PageBlockKeys.type: PageBlockComponentBuilder(),
-      ParagraphBlockKeys.type: TextBlockComponentBuilder(
+      ParagraphBlockKeys.type: ParagraphBlockComponentBuilder(
         configuration: configuration,
       ),
       TodoListBlockKeys.type: TodoListBlockComponentBuilder(

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) {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/editor_action_wrapper.dart

@@ -1 +0,0 @@
-

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,

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,
     );

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(

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<FindAndReplaceMenuWidget> {
   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<FindMenu> {
   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<FindMenu> {
 
   @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<FindMenu> {
   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<ReplaceMenu> createState() => _ReplaceMenuState();

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();

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) {

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<SmartEditActionList> {
       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

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,

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,

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(

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:

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