Merge branch 'main' into android_integration_test

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

@@ -1,11 +1,18 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/outline/outline_block_component.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
+import 'package:appflowy/workspace/presentation/widgets/pop_up_action.dart';
 import 'package:easy_localization/easy_localization.dart';
+import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
 import '../../util/util.dart';
 
+const String heading1 = "Heading 1";
+const String heading2 = "Heading 2";
+const String heading3 = "Heading 3";
+
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
@@ -33,12 +40,8 @@ void main() {
       await tester.createNewPageWithNameUnderParent(
         name: 'outline_test',
       );
-      await tester.editor.tapLineOfEditorAt(0);
-
-      await tester.ime.insertText('# Heading 1\n');
-      await tester.ime.insertText('## Heading 2\n');
-      await tester.ime.insertText('### Heading 3\n');
 
+      await insertHeadingComponent(tester);
       /* Results in:
       * # Heading 1
       * ## Heading 2
@@ -51,7 +54,7 @@ void main() {
       expect(
         find.descendant(
           of: find.byType(OutlineBlockWidget),
-          matching: find.text('Heading 1'),
+          matching: find.text(heading1),
         ),
         findsOneWidget,
       );
@@ -60,7 +63,7 @@ void main() {
       expect(
         find.descendant(
           of: find.byType(OutlineBlockWidget),
-          matching: find.text('Heading 2'),
+          matching: find.text(heading2),
         ),
         findsOneWidget,
       );
@@ -69,7 +72,7 @@ void main() {
       expect(
         find.descendant(
           of: find.byType(OutlineBlockWidget),
-          matching: find.text('Heading 3'),
+          matching: find.text(heading3),
         ),
         findsOneWidget,
       );
@@ -80,10 +83,85 @@ void main() {
       expect(
         find.descendant(
           of: find.byType(OutlineBlockWidget),
-          matching: find.text('Heading 1Hello world'),
+          matching: find.text('${heading1}Hello world'),
+        ),
+        findsOneWidget,
+      );
+    });
+
+    testWidgets("control the depth of outline block", (tester) async {
+      await tester.initializeAppFlowy();
+      await tester.tapGoButton();
+
+      await tester.createNewPageWithNameUnderParent(
+        name: 'outline_test',
+      );
+
+      await insertHeadingComponent(tester);
+      /* Results in:
+        * # Heading 1
+        * ## Heading 2
+        * ### Heading 3
+      */
+
+      await tester.editor.tapLineOfEditorAt(3);
+      await insertOutlineInDocument(tester);
+
+      // expect to find only the `heading1` widget under the [OutlineBlockWidget]
+      await hoverAndClickDepthOptionAction(tester, [3], 1);
+      expect(
+        find.descendant(
+          of: find.byType(OutlineBlockWidget),
+          matching: find.text(heading2),
+        ),
+        findsNothing,
+      );
+      expect(
+        find.descendant(
+          of: find.byType(OutlineBlockWidget),
+          matching: find.text(heading3),
+        ),
+        findsNothing,
+      );
+      //////
+
+      /// expect to find only the 'heading1' and 'heading2' under the [OutlineBlockWidget]
+      await hoverAndClickDepthOptionAction(tester, [3], 2);
+      expect(
+        find.descendant(
+          of: find.byType(OutlineBlockWidget),
+          matching: find.text(heading3),
+        ),
+        findsNothing,
+      );
+      //////
+
+      // expect to find all the headings under the [OutlineBlockWidget]
+      await hoverAndClickDepthOptionAction(tester, [3], 3);
+      expect(
+        find.descendant(
+          of: find.byType(OutlineBlockWidget),
+          matching: find.text(heading1),
         ),
         findsOneWidget,
       );
+
+      expect(
+        find.descendant(
+          of: find.byType(OutlineBlockWidget),
+          matching: find.text(heading2),
+        ),
+        findsOneWidget,
+      );
+
+      expect(
+        find.descendant(
+          of: find.byType(OutlineBlockWidget),
+          matching: find.text(heading3),
+        ),
+        findsOneWidget,
+      );
+      //////
     });
   });
 }
@@ -97,3 +175,25 @@ Future<void> insertOutlineInDocument(WidgetTester tester) async {
   );
   await tester.pumpAndSettle();
 }
+
+Future<void> hoverAndClickDepthOptionAction(
+  WidgetTester tester,
+  List<int> path,
+  int level,
+) async {
+  await tester.editor.hoverAndClickOptionMenuButton([3]);
+  await tester.tap(find.byType(AppFlowyPopover).hitTestable().last);
+  await tester.pumpAndSettle();
+
+  // Find a total of 4 HoverButtons under the [BlockOptionButton],
+  // in addition to 3 HoverButtons under the [DepthOptionAction] - (child of BlockOptionButton)
+  await tester.tap(find.byType(HoverButton).hitTestable().at(3 + level));
+  await tester.pumpAndSettle();
+}
+
+Future<void> insertHeadingComponent(WidgetTester tester) async {
+  await tester.editor.tapLineOfEditorAt(0);
+  await tester.ime.insertText('# $heading1\n');
+  await tester.ime.insertText('## $heading2\n');
+  await tester.ime.insertText('### $heading3\n');
+}

frontend/appflowy_flutter/integration_test/desktop/emoji_shortcut_test.dart

@@ -1,13 +1,14 @@
 import 'dart:io';
+
 import 'package:appflowy/workspace/presentation/settings/widgets/emoji_picker/emoji_picker.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:appflowy_editor/src/editor/editor_component/service/editor.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
-import 'util/keyboard.dart';
-import 'util/util.dart';
+import '../util/keyboard.dart';
+import '../util/util.dart';
 
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
@@ -17,7 +18,7 @@ void main() {
         (tester) async {
       await tester.initializeAppFlowy();
       await tester.tapGoButton();
-      
+
       final Finder editor = find.byType(AppFlowyEditor);
       await tester.tap(editor);
       await tester.pumpAndSettle();

frontend/appflowy_flutter/integration_test/runner.dart

@@ -14,7 +14,6 @@ import 'mobile_runner.dart';
 /// as the test target.
 Future<void> main() async {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
-
   if (Platform.isLinux || Platform.isMacOS || Platform.isWindows) {
     await runIntegrationOnDesktop();
   } else if (Platform.isIOS || Platform.isAndroid) {

frontend/appflowy_flutter/integration_test/util/editor_test_operations.dart

@@ -6,6 +6,7 @@ import 'package:appflowy/plugins/base/emoji/emoji_picker.dart';
 import 'package:appflowy/plugins/base/emoji/emoji_skin_tone.dart';
 import 'package:appflowy/plugins/base/icon/icon_picker.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/block_action_add_button.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/actions/block_action_option_button.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/cover_editor.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/document_header_node_widget.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart';
@@ -241,4 +242,25 @@ class EditorOperations {
       },
     );
   }
+
+  /// hover and click on the option menu button beside the block component.
+  Future<void> hoverAndClickOptionMenuButton(Path path) async {
+    final optionMenuButton = find.byWidgetPredicate(
+      (widget) =>
+          widget is BlockComponentActionWrapper &&
+          widget.node.path.equals(path),
+    );
+    await tester.hoverOnWidget(
+      optionMenuButton,
+      onHover: () async {
+        await tester.tapButton(
+          find.byWidgetPredicate(
+            (widget) =>
+                widget is BlockOptionButton &&
+                widget.blockComponentContext.node.path.equals(path),
+          ),
+        );
+      },
+    );
+  }
 }

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

@@ -229,6 +229,10 @@ Map<String, BlockComponentBuilder> getEditorBuilderMap({
         ImageBlockKeys.type,
       ];
 
+      final supportDepthBuilderType = [
+        OutlineBlockKeys.type,
+      ];
+
       final colorAction = [
         OptionAction.divider,
         OptionAction.color,
@@ -239,10 +243,15 @@ Map<String, BlockComponentBuilder> getEditorBuilderMap({
         OptionAction.align,
       ];
 
+      final depthAction = [
+        OptionAction.depth,
+      ];
+
       final List<OptionAction> actions = [
         ...standardActions,
         if (supportColorBuilderTypes.contains(entry.key)) ...colorAction,
         if (supportAlignBuilderType.contains(entry.key)) ...alignAction,
+        if (supportDepthBuilderType.contains(entry.key)) ...depthAction,
       ];
 
       if (PlatformExtension.isDesktop) {

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

@@ -34,12 +34,15 @@ class BlockOptionButton extends StatelessWidget {
           return ColorOptionAction(editorState: editorState);
         case OptionAction.align:
           return AlignOptionAction(editorState: editorState);
+        case OptionAction.depth:
+          return DepthOptionAction(editorState: editorState);
         default:
           return OptionActionWrapper(e);
       }
     }).toList();
 
     return PopoverActionList<PopoverAction>(
+      popoverMutex: PopoverMutex(),
       direction:
           context.read<AppearanceSettingsCubit>().state.layoutDirection ==
                   LayoutDirection.rtlLayout
@@ -136,6 +139,7 @@ class BlockOptionButton extends StatelessWidget {
       case OptionAction.align:
       case OptionAction.color:
       case OptionAction.divider:
+      case OptionAction.depth:
         throw UnimplementedError();
     }
     editorState.apply(transaction);