feat(grid): add keyboard arrow navigation and edit modes to grid view

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/editable_cell_builder.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
 
 import 'package:appflowy/plugins/database/application/cell/cell_controller.dart';
@@ -284,6 +285,24 @@ abstract class GridCellState<T extends EditableCellWidget> extends State<T> {
   void initState() {
     super.initState();
     widget.requestFocus.addListener(onRequestFocus);
+    widget.shortcutHandlers[CellKeyboardKey.onCopy] = () {
+      final s = onCopy();
+      if (s != null) {
+        Clipboard.setData(ClipboardData(text: s));
+      }
+    };
+    widget.shortcutHandlers[CellKeyboardKey.onCut] = () {
+      final s = onCut();
+      if (s != null) {
+        Clipboard.setData(ClipboardData(text: s));
+      }
+    };
+    widget.shortcutHandlers[CellKeyboardKey.onPaste] = () async {
+      await onPaste();
+    };
+    widget.shortcutHandlers[CellKeyboardKey.onDelete] = () {
+      onDelete();
+    };
   }
 
   @override
@@ -306,6 +325,9 @@ abstract class GridCellState<T extends EditableCellWidget> extends State<T> {
   void onRequestFocus();
 
   String? onCopy() => null;
+  String? onCut() => null;
+  Future<void> onPaste() async {}
+  void onDelete() {}
 }
 
 abstract class GridEditableTextCell<T extends EditableCellWidget>

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/editable_cell_skeleton/number.dart

@@ -7,6 +7,7 @@ import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
 import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import '../desktop_grid/desktop_grid_number_cell.dart';
@@ -112,6 +113,26 @@ class _NumberCellState extends GridEditableTextCell<EditableNumberCell> {
   @override
   String? onCopy() => cellBloc.state.content;
 
+  @override
+  String? onCut() {
+    final text = cellBloc.state.content;
+    cellBloc.add(const NumberCellEvent.updateCell(''));
+    return text;
+  }
+
+  @override
+  Future<void> onPaste() async {
+    final clipboardData = await Clipboard.getData(Clipboard.kTextPlain);
+    if (clipboardData?.text != null) {
+      cellBloc.add(NumberCellEvent.updateCell(clipboardData!.text!));
+    }
+  }
+
+  @override
+  void onDelete() {
+    cellBloc.add(const NumberCellEvent.updateCell(''));
+  }
+
   @override
   Future<void> focusChanged() async {
     if (mounted &&

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/editable_cell_skeleton/relation.dart

@@ -93,4 +93,12 @@ class _RelationCellState extends GridCellState<EditableRelationCell> {
 
   @override
   String? onCopy() => "";
+
+  @override
+  void onDelete() {
+    final rows = cellBloc.state.rows;
+    for (final row in rows) {
+      cellBloc.add(RelationCellEvent.selectRow(row.rowId));
+    }
+  }
 }

frontend/appflowy_flutter/lib/plugins/database/widgets/cell/editable_cell_skeleton/text.dart

@@ -7,6 +7,7 @@ import 'package:appflowy/plugins/database/application/database_controller.dart';
 import 'package:appflowy/plugins/database/widgets/cell/editable_cell_builder.dart';
 import 'package:appflowy/plugins/database/widgets/row/cells/cell_container.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import '../desktop_grid/desktop_grid_text_cell.dart';
@@ -115,6 +116,26 @@ class _TextCellState extends GridEditableTextCell<EditableTextCell> {
   @override
   String? onCopy() => cellBloc.state.content;
 
+  @override
+  String? onCut() {
+    final text = cellBloc.state.content;
+    cellBloc.add(const TextCellEvent.updateText(''));
+    return text;
+  }
+
+  @override
+  Future<void> onPaste() async {
+    final clipboardData = await Clipboard.getData(Clipboard.kTextPlain);
+    if (clipboardData?.text != null) {
+      cellBloc.add(TextCellEvent.updateText(clipboardData!.text!));
+    }
+  }
+
+  @override
+  void onDelete() {
+    cellBloc.add(const TextCellEvent.updateText(''));
+  }
+
   @override
   Future<void> focusChanged() {
     if (mounted &&

frontend/appflowy_flutter/lib/plugins/database/widgets/row/accessory/cell_shortcuts.dart

@@ -8,6 +8,9 @@ typedef CellKeyboardAction = dynamic Function();
 enum CellKeyboardKey {
   onEnter,
   onCopy,
+  onCut,
+  onPaste,
+  onDelete,
   onInsert,
 }
 
@@ -43,13 +46,37 @@ class GridCellShortcuts extends StatelessWidget {
                 : LogicalKeyboardKey.control,
             LogicalKeyboardKey.keyC,
           ): const GridCellCopyIntent(),
+        if (shouldAddKeyboardKey(CellKeyboardKey.onCut))
+          LogicalKeySet(
+            Platform.isMacOS
+                ? LogicalKeyboardKey.meta
+                : LogicalKeyboardKey.control,
+            LogicalKeyboardKey.keyX,
+          ): const GridCellCutIntent(),
+        if (shouldAddKeyboardKey(CellKeyboardKey.onPaste))
+          LogicalKeySet(
+            Platform.isMacOS
+                ? LogicalKeyboardKey.meta
+                : LogicalKeyboardKey.control,
+            LogicalKeyboardKey.keyV,
+          ): const GridCellPasteIntent(),
+        if (shouldAddKeyboardKey(CellKeyboardKey.onDelete))
+          LogicalKeySet(LogicalKeyboardKey.delete): const GridCellDeleteIntent(),
+        if (shouldAddKeyboardKey(CellKeyboardKey.onDelete))
+          LogicalKeySet(LogicalKeyboardKey.backspace): const GridCellDeleteIntent(),
       };
 
   Map<Type, Action<Intent>> get actions => {
         if (shouldAddKeyboardKey(CellKeyboardKey.onEnter))
           GridCellEnterIdent: GridCellEnterAction(child: child),
         if (shouldAddKeyboardKey(CellKeyboardKey.onCopy))
           GridCellCopyIntent: GridCellCopyAction(child: child),
+        if (shouldAddKeyboardKey(CellKeyboardKey.onCut))
+          GridCellCutIntent: GridCellCutAction(child: child),
+        if (shouldAddKeyboardKey(CellKeyboardKey.onPaste))
+          GridCellPasteIntent: GridCellPasteAction(child: child),
+        if (shouldAddKeyboardKey(CellKeyboardKey.onDelete))
+          GridCellDeleteIntent: GridCellDeleteAction(child: child),
       };
 
   bool shouldAddKeyboardKey(CellKeyboardKey key) =>
@@ -86,13 +113,54 @@ class GridCellCopyAction extends Action<GridCellCopyIntent> {
   @override
   void invoke(covariant GridCellCopyIntent intent) {
     final callback = child.shortcutHandlers[CellKeyboardKey.onCopy];
-    if (callback == null) {
-      return;
-    }
+    if (callback != null) callback();
+  }
+}
 
-    final s = callback();
-    if (s is String) {
-      Clipboard.setData(ClipboardData(text: s));
-    }
+class GridCellCutIntent extends Intent {
+  const GridCellCutIntent();
+}
+
+class GridCellCutAction extends Action<GridCellCutIntent> {
+  GridCellCutAction({required this.child});
+
+  final CellShortcuts child;
+
+  @override
+  void invoke(covariant GridCellCutIntent intent) {
+    final callback = child.shortcutHandlers[CellKeyboardKey.onCut];
+    if (callback != null) callback();
+  }
+}
+
+class GridCellPasteIntent extends Intent {
+  const GridCellPasteIntent();
+}
+
+class GridCellPasteAction extends Action<GridCellPasteIntent> {
+  GridCellPasteAction({required this.child});
+
+  final CellShortcuts child;
+
+  @override
+  Future<void> invoke(covariant GridCellPasteIntent intent) async {
+    final callback = child.shortcutHandlers[CellKeyboardKey.onPaste];
+    if (callback != null) await callback();
+  }
+}
+
+class GridCellDeleteIntent extends Intent {
+  const GridCellDeleteIntent();
+}
+
+class GridCellDeleteAction extends Action<GridCellDeleteIntent> {
+  GridCellDeleteAction({required this.child});
+
+  final CellShortcuts child;
+
+  @override
+  void invoke(covariant GridCellDeleteIntent intent) {
+    final callback = child.shortcutHandlers[CellKeyboardKey.onDelete];
+    if (callback != null) callback();
   }
 }

frontend/appflowy_flutter/lib/plugins/database/widgets/row/cells/cell_container.dart

@@ -1,5 +1,6 @@
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:provider/provider.dart';
 import 'package:styled_widget/styled_widget.dart';
 
@@ -9,7 +10,7 @@ import '../../cell/editable_cell_builder.dart';
 import '../accessory/cell_accessory.dart';
 import '../accessory/cell_shortcuts.dart';
 
-class CellContainer extends StatelessWidget {
+class CellContainer extends StatefulWidget {
   const CellContainer({
     super.key,
     required this.child,
@@ -23,56 +24,119 @@ class CellContainer extends StatelessWidget {
   final double width;
   final bool isPrimary;
 
+  @override
+  State<CellContainer> createState() => _CellContainerState();
+}
+
+class _CellContainerState extends State<CellContainer> {
+  late final FocusNode _focusNode;
+
+  @override
+  void initState() {
+    super.initState();
+    _focusNode = FocusNode();
+    _focusNode.addListener(_onFocusChange);
+  }
+
+  @override
+  void dispose() {
+    _focusNode.removeListener(_onFocusChange);
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  void _onFocusChange() {
+    if (mounted) {
+      setState(() {});
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return ChangeNotifierProvider.value(
-      value: child.cellContainerNotifier,
+      value: widget.child.cellContainerNotifier,
       child: Selector<CellContainerNotifier, bool>(
         selector: (context, notifier) => notifier.isFocus,
-        builder: (providerContext, isFocus, _) {
-          Widget container = Center(child: GridCellShortcuts(child: child));
+        builder: (providerContext, isChildFocus, _) {
+          Widget container = Center(child: GridCellShortcuts(child: widget.child));
 
-          if (accessoryBuilder != null) {
-            final accessories = accessoryBuilder!.call(
+          if (widget.accessoryBuilder != null) {
+            final accessories = widget.accessoryBuilder!.call(
               GridCellAccessoryBuildContext(
                 anchorContext: context,
-                isCellEditing: isFocus,
+                isCellEditing: isChildFocus,
               ),
             );
 
             if (accessories.isNotEmpty) {
               container = _GridCellEnterRegion(
                 accessories: accessories,
-                isPrimary: isPrimary,
+                isPrimary: widget.isPrimary,
                 child: container,
               );
             }
           }
 
-          return GestureDetector(
-            behavior: HitTestBehavior.opaque,
-            onTap: () {
-              if (!isFocus) {
-                child.requestFocus.notify();
+          final isSelected = _focusNode.hasFocus;
+          final isEditing = isChildFocus;
+
+          return Focus(
+            focusNode: _focusNode,
+            onKeyEvent: (node, event) {
+              if (event is KeyDownEvent) {
+                if (event.logicalKey == LogicalKeyboardKey.enter) {
+                  widget.child.requestFocus.notify();
+                  return KeyEventResult.handled;
+                }
               }
+              return KeyEventResult.ignored;
             },
-            child: Container(
-              constraints: BoxConstraints(maxWidth: width, minHeight: 32),
-              decoration: _makeBoxDecoration(context, isFocus),
-              child: container,
+            child: GestureDetector(
+              behavior: HitTestBehavior.opaque,
+              onTap: () {
+                if (!isEditing) {
+                  _focusNode.requestFocus();
+                }
+              },
+              onDoubleTap: () {
+                if (!isEditing) {
+                  widget.child.requestFocus.notify();
+                }
+              },
+              child: Container(
+                constraints: BoxConstraints(maxWidth: widget.width, minHeight: 32),
+                decoration: _makeBoxDecoration(
+                  context,
+                  isSelected: isSelected,
+                  isEditing: isEditing,
+                ),
+                child: container,
+              ),
             ),
           );
         },
       ),
     );
   }
 
-  BoxDecoration _makeBoxDecoration(BuildContext context, bool isFocus) {
-    if (isFocus) {
+  BoxDecoration _makeBoxDecoration(
+    BuildContext context, {
+    required bool isSelected,
+    required bool isEditing,
+  }) {
+    if (isEditing) {
       final borderSide = BorderSide(
         color: Theme.of(context).colorScheme.primary,
+        width: 1.5,
       );
+      return BoxDecoration(border: Border.fromBorderSide(borderSide));
+    }
 
+    if (isSelected) {
+      final borderSide = BorderSide(
+        color: Theme.of(context).colorScheme.primary,
+        width: 1.5,
+      );
       return BoxDecoration(border: Border.fromBorderSide(borderSide));
     }