feat: improve reference menus (#4301)

* feat: improve reference menus

* fix: limit page results in reference menus

* fix: custom title for specific type refs

* fix: insert pages

* fix: enable scrolling on item focus change

* fix: enable shift+tab to navigate

* fix: properly offset menu

* fix: review comments

* fix: remove bottom padding on last group

Author: Xazin

frontend/appflowy_flutter/integration_test/document/document_inline_page_reference_test.dart

@@ -1,9 +1,10 @@
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart';
+import 'package:flutter/services.dart';
+
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/mention_page_block.dart';
+import 'package:appflowy/plugins/inline_actions/widgets/inline_actions_handler.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:flowy_infra/uuid.dart';
-import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -30,7 +31,7 @@ void main() {
 
       // Select result
       final optionFinder = find.descendant(
-        of: find.byType(LinkToPageMenu),
+        of: find.byType(InlineActionsHandler),
         matching: find.text(name),
       );
 

frontend/appflowy_flutter/integration_test/document/document_with_database_test.dart

@@ -1,9 +1,9 @@
 import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/plugins/inline_actions/widgets/inline_actions_handler.dart';
 import 'package:appflowy/plugins/database/board/presentation/board_page.dart';
 import 'package:appflowy/plugins/database/calendar/presentation/calendar_page.dart';
 import 'package:appflowy/plugins/database/grid/presentation/grid_page.dart';
 import 'package:appflowy/plugins/database/widgets/row/cells/text_cell/text_cell.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart';
 import 'package:appflowy/workspace/presentation/home/menu/view/view_item.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/protobuf.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
@@ -155,7 +155,7 @@ Future<void> insertReferenceDatabase(
     layout.referencedMenuName,
   );
 
-  final linkToPageMenu = find.byType(LinkToPageMenu);
+  final linkToPageMenu = find.byType(InlineActionsHandler);
   expect(linkToPageMenu, findsOneWidget);
   final referencedDatabase = find.descendant(
     of: linkToPageMenu,

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

@@ -73,6 +73,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     handlers: [
       InlinePageReferenceService(
         currentViewId: documentBloc.view.id,
+        limitResults: 5,
       ).inlinePageReferenceDelegate,
       DateReferenceService(context).dateReferenceDelegate,
       ReminderReferenceService(context).reminderReferenceDelegate,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/insert_page_command.dart

@@ -14,6 +14,7 @@ extension InsertDatabase on EditorState {
     if (selection == null || !selection.isCollapsed) {
       return;
     }
+
     final node = getNodeAtPath(selection.end.path);
     if (node == null) {
       return;
@@ -52,19 +53,9 @@ extension InsertDatabase on EditorState {
       );
     }
 
-    late Transaction transaction;
-    if (viewType == ViewLayoutPB.Document) {
-      transaction = await _insertDocumentReference(
-        childView,
-        selection,
-        node,
-      );
-    } else {
-      transaction = await _insertDatabaseReference(
-        childView,
-        selection.end.path,
-      );
-    }
+    final Transaction transaction = viewType == ViewLayoutPB.Document
+        ? await _insertDocumentReference(childView, selection, node)
+        : await _insertDatabaseReference(childView, selection.end.path);
 
     await apply(transaction);
   }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/link_to_page_widget.dart

@@ -1,252 +1,71 @@
+import 'package:flutter/material.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';
-import 'package:appflowy/workspace/presentation/widgets/dialogs.dart';
-import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
+import 'package:appflowy/plugins/inline_actions/handlers/inline_page_reference.dart';
+import 'package:appflowy/plugins/inline_actions/inline_actions_menu.dart';
+import 'package:appflowy/plugins/inline_actions/inline_actions_result.dart';
+import 'package:appflowy/plugins/inline_actions/inline_actions_service.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder/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';
 
-void showLinkToPageMenu(
-  OverlayState container,
+InlineActionsMenuService? _actionsMenuService;
+Future<void> showLinkToPageMenu(
   EditorState editorState,
   SelectionMenuService menuService,
   ViewLayoutPB pageType,
-) {
+) async {
   menuService.dismiss();
+  _actionsMenuService?.dismiss();
 
-  final alignment = menuService.alignment;
-  final offset = menuService.offset;
-  final top = alignment == Alignment.topLeft ? offset.dy : null;
-  final bottom = alignment == Alignment.bottomLeft ? offset.dy : null;
-
-  keepEditorFocusNotifier.increase();
-  late OverlayEntry linkToPageMenuEntry;
-  linkToPageMenuEntry = FullScreenOverlayEntry(
-    top: top,
-    bottom: bottom,
-    left: offset.dx,
-    dismissCallback: () => keepEditorFocusNotifier.decrease(),
-    builder: (context) => Material(
-      color: Colors.transparent,
-      child: LinkToPageMenu(
-        editorState: editorState,
-        layoutType: pageType,
-        hintText: pageType.toHintText(),
-        onSelected: (appPB, viewPB) async {
-          try {
-            await editorState.insertReferencePage(viewPB, pageType);
-            linkToPageMenuEntry.remove();
-          } on FlowyError catch (e) {
-            if (context.mounted) {
-              Dialogs.show(
-                child: FlowyErrorPage.message(
-                  e.msg,
-                  howToFix: LocaleKeys.errorDialog_howToFixFallback.tr(),
-                ),
-                context,
-              );
-            }
-          }
-        },
-      ),
-    ),
-  ).build();
-  container.insert(linkToPageMenuEntry);
-}
-
-class LinkToPageMenu extends StatefulWidget {
-  const LinkToPageMenu({
-    super.key,
-    required this.editorState,
-    required this.layoutType,
-    required this.hintText,
-    required this.onSelected,
-  });
-
-  final EditorState editorState;
-  final ViewLayoutPB layoutType;
-  final String hintText;
-  final void Function(ViewPB view, ViewPB childView) onSelected;
-
-  @override
-  State<LinkToPageMenu> createState() => _LinkToPageMenuState();
-}
-
-class _LinkToPageMenuState extends State<LinkToPageMenu> {
-  final _focusNode = FocusNode(debugLabel: 'reference_list_widget');
-  EditorStyle get style => widget.editorState.editorStyle;
-  int _selectedIndex = 0;
-  final int _totalItems = 0;
-  Future<List<ViewPB>>? _availableLayout;
-  final List<ViewPB> _items = [];
-
-  Future<List<ViewPB>> fetchItems() async {
-    final items =
-        await ViewBackendService().fetchViewsWithLayoutType(widget.layoutType);
-    _items
-      ..clear()
-      ..addAll(items);
-    return items;
-  }
-
-  @override
-  void initState() {
-    _availableLayout = fetchItems();
-    WidgetsBinding.instance.addPostFrameCallback((_) {
-      _focusNode.requestFocus();
-    });
-    super.initState();
+  final rootContext = editorState.document.root.context;
+  if (rootContext == null) {
+    return;
   }
 
-  @override
-  void dispose() {
-    _focusNode.dispose();
-    super.dispose();
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    final theme = Theme.of(context);
-    return Focus(
-      focusNode: _focusNode,
-      onKey: _onKey,
-      child: Container(
-        width: 300,
-        padding: const EdgeInsets.fromLTRB(10, 6, 10, 6),
-        decoration: BoxDecoration(
-          color: theme.cardColor,
-          boxShadow: [
-            BoxShadow(
-              blurRadius: 5,
-              spreadRadius: 1,
-              color: Colors.black.withOpacity(0.1),
-            ),
-          ],
-          borderRadius: BorderRadius.circular(6.0),
-        ),
-        child: _buildListWidget(
-          context,
-          _selectedIndex,
-          _availableLayout,
-        ),
-      ),
-    );
-  }
-
-  KeyEventResult _onKey(FocusNode node, RawKeyEvent event) {
-    if (event is! RawKeyDownEvent ||
-        _availableLayout == null ||
-        _items.isEmpty) {
-      return KeyEventResult.ignored;
-    }
-
-    final acceptedKeys = [
-      LogicalKeyboardKey.arrowUp,
-      LogicalKeyboardKey.arrowDown,
-      LogicalKeyboardKey.tab,
-      LogicalKeyboardKey.enter,
-    ];
-
-    if (!acceptedKeys.contains(event.logicalKey)) {
-      return KeyEventResult.handled;
+  final service = InlineActionsService(
+    context: rootContext,
+    handlers: [
+      InlinePageReferenceService(
+        currentViewId: "",
+        viewLayout: pageType,
+        customTitle: titleFromPageType(pageType),
+        insertPage: pageType != ViewLayoutPB.Document,
+        limitResults: 15,
+      ).inlinePageReferenceDelegate,
+    ],
+  );
+
+  final List<InlineActionsResult> initialResults = [];
+  for (final handler in service.handlers) {
+    final group = await handler();
+
+    if (group.results.isNotEmpty) {
+      initialResults.add(group);
     }
-
-    var newSelectedIndex = _selectedIndex;
-    if (event.logicalKey == LogicalKeyboardKey.arrowDown &&
-        newSelectedIndex != _totalItems - 1) {
-      newSelectedIndex += 1;
-    } else if (event.logicalKey == LogicalKeyboardKey.arrowUp &&
-        newSelectedIndex != 0) {
-      newSelectedIndex -= 1;
-    } else if (event.logicalKey == LogicalKeyboardKey.tab) {
-      newSelectedIndex += 1;
-      newSelectedIndex %= _totalItems;
-    } else if (event.logicalKey == LogicalKeyboardKey.enter) {
-      widget.onSelected(
-        _items[_selectedIndex],
-        _items[_selectedIndex],
-      );
-    }
-
-    setState(() {
-      _selectedIndex = newSelectedIndex;
-    });
-
-    return KeyEventResult.handled;
   }
 
-  Widget _buildListWidget(
-    BuildContext context,
-    int selectedIndex,
-    Future<List<ViewPB>>? items,
-  ) {
-    int index = 0;
-    return FutureBuilder<List<ViewPB>>(
-      future: items,
-      builder: (context, snapshot) {
-        if (snapshot.hasData &&
-            snapshot.connectionState == ConnectionState.done) {
-          final views = snapshot.data;
-          final List<Widget> children = [
-            Padding(
-              padding: const EdgeInsets.symmetric(vertical: 4),
-              child: FlowyText.regular(
-                widget.hintText,
-                fontSize: 10,
-                color: Colors.grey,
-              ),
-            ),
-          ];
-
-          if (views != null && views.isNotEmpty) {
-            for (final view in views) {
-              children.add(
-                FlowyButton(
-                  isSelected: index == _selectedIndex,
-                  leftIcon: view.defaultIcon(),
-                  text: FlowyText.regular(view.name),
-                  onTap: () => widget.onSelected(view, view),
-                ),
-              );
-
-              index += 1;
-            }
-          }
-
-          return Column(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: children,
-          );
-        }
-
-        return const Center(child: CircularProgressIndicator());
-      },
+  if (rootContext.mounted) {
+    _actionsMenuService = InlineActionsMenu(
+      context: rootContext,
+      editorState: editorState,
+      service: service,
+      initialResults: initialResults,
+      style: Theme.of(editorState.document.root.context!).brightness ==
+              Brightness.light
+          ? const InlineActionsMenuStyle.light()
+          : const InlineActionsMenuStyle.dark(),
+      startCharAmount: 0,
     );
-  }
-}
 
-extension on ViewLayoutPB {
-  String toHintText() {
-    switch (this) {
-      case ViewLayoutPB.Grid:
-        return LocaleKeys.document_slashMenu_grid_selectAGridToLinkTo.tr();
-      case ViewLayoutPB.Board:
-        return LocaleKeys.document_slashMenu_board_selectABoardToLinkTo.tr();
-      case ViewLayoutPB.Calendar:
-        return LocaleKeys.document_slashMenu_calendar_selectACalendarToLinkTo
-            .tr();
-      case ViewLayoutPB.Document:
-        return LocaleKeys.document_slashMenu_document_selectADocumentToLinkTo
-            .tr();
-      default:
-        throw Exception('Unknown layout type');
-    }
+    _actionsMenuService?.show();
   }
 }
+
+String titleFromPageType(ViewLayoutPB layout) => switch (layout) {
+      ViewLayoutPB.Grid => LocaleKeys.inlineActions_gridReference.tr(),
+      ViewLayoutPB.Document => LocaleKeys.inlineActions_docReference.tr(),
+      ViewLayoutPB.Board => LocaleKeys.inlineActions_boardReference.tr(),
+      ViewLayoutPB.Calendar => LocaleKeys.inlineActions_calReference.tr(),
+      _ => LocaleKeys.inlineActions_pageReference.tr(),
+    };