chore: highlight cell when edit

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/date_cell.dart

@@ -1,5 +1,6 @@
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/application/grid/prelude.dart';
+import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/cell/cell_container.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flutter/widgets.dart';
@@ -7,7 +8,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:table_calendar/table_calendar.dart';
 import 'package:window_size/window_size.dart';
 
-class DateCell extends StatefulWidget {
+class DateCell extends GridCell {
   final CellData cellData;
 
   const DateCell({
@@ -37,10 +38,16 @@ class _DateCellState extends State<DateCell> {
           return SizedBox.expand(
             child: GestureDetector(
               behavior: HitTestBehavior.opaque,
-              onTap: () => _CellCalendar.show(
-                context,
-                onSelected: (day) => context.read<DateCellBloc>().add(DateCellEvent.selectDay(day)),
-              ),
+              onTap: () {
+                widget.setFocus(context, true);
+                _CellCalendar.show(
+                  context,
+                  onSelected: (day) {
+                    widget.setFocus(context, false);
+                    context.read<DateCellBloc>().add(DateCellEvent.selectDay(day));
+                  },
+                );
+              },
               child: MouseRegion(
                 opaque: false,
                 cursor: SystemMouseCursors.click,

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/number_cell.dart

@@ -6,7 +6,7 @@ import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/cell/c
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
-class NumberCell extends StatefulWidget {
+class NumberCell extends GridCell {
   final CellData cellData;
 
   const NumberCell({

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_cell.dart

@@ -1,12 +1,13 @@
 import 'package:app_flowy/startup/startup.dart';
 import 'package:app_flowy/workspace/application/grid/prelude.dart';
+import 'package:app_flowy/workspace/presentation/plugins/grid/src/widgets/cell/cell_container.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 import 'extension.dart';
 import 'selection_editor.dart';
 
-class SingleSelectCell extends StatefulWidget {
+class SingleSelectCell extends GridCell {
   final CellData cellData;
 
   const SingleSelectCell({
@@ -37,7 +38,14 @@ class _SingleSelectCellState extends State<SingleSelectCell> {
           return SizedBox.expand(
             child: InkWell(
               onTap: () {
-                SelectOptionCellEditor.show(context, state.cellData, state.options, state.selectedOptions);
+                widget.setFocus(context, true);
+                SelectOptionCellEditor.show(
+                  context,
+                  state.cellData,
+                  state.options,
+                  state.selectedOptions,
+                  () => widget.setFocus(context, false),
+                );
               },
               child: Row(children: children),
             ),
@@ -55,7 +63,7 @@ class _SingleSelectCellState extends State<SingleSelectCell> {
 }
 
 //----------------------------------------------------------------
-class MultiSelectCell extends StatefulWidget {
+class MultiSelectCell extends GridCell {
   final CellData cellData;
 
   const MultiSelectCell({
@@ -86,11 +94,13 @@ class _MultiSelectCellState extends State<MultiSelectCell> {
           return SizedBox.expand(
             child: InkWell(
               onTap: () {
+                widget.setFocus(context, true);
                 SelectOptionCellEditor.show(
                   context,
                   state.cellData,
                   state.options,
                   state.selectedOptions,
+                  () => widget.setFocus(context, false),
                 );
               },
               child: Row(children: children),

frontend/app_flowy/lib/workspace/presentation/plugins/grid/src/widgets/cell/selection_cell/selection_editor.dart

@@ -28,11 +28,13 @@ class SelectOptionCellEditor extends StatelessWidget with FlowyOverlayDelegate {
   final CellData cellData;
   final List<SelectOption> options;
   final List<SelectOption> selectedOptions;
+  final VoidCallback onDismissed;
 
   const SelectOptionCellEditor({
     required this.cellData,
     required this.options,
     required this.selectedOptions,
+    required this.onDismissed,
     Key? key,
   }) : super(key: key);
 
@@ -67,12 +69,14 @@ class SelectOptionCellEditor extends StatelessWidget with FlowyOverlayDelegate {
     CellData cellData,
     List<SelectOption> options,
     List<SelectOption> selectedOptions,
+    VoidCallback onDismissed,
   ) {
     SelectOptionCellEditor.remove(context);
     final editor = SelectOptionCellEditor(
       cellData: cellData,
       options: options,
       selectedOptions: selectedOptions,
+      onDismissed: onDismissed,
     );
 
     //
@@ -98,6 +102,9 @@ class SelectOptionCellEditor extends StatelessWidget with FlowyOverlayDelegate {
 
   @override
   bool asBarrier() => true;
+
+  @override
+  void didRemove() => onDismissed();
 }
 
 class _OptionList extends StatelessWidget {