feat: support exitting the link menu by pressing ESC

Author: vincenzoursano

lib/l10n/intl_en.arb

@@ -93,6 +93,7 @@
   "lightLightTint7": "Green",
   "lightLightTint8": "Aqua",
   "lightLightTint9": "Blue",
+  "urlHint": "URL",
   "mobileHeading1": "Heading 1",
   "mobileHeading2": "Heading 2",
   "mobileHeading3": "Heading 3",

lib/src/editor/toolbar/desktop/items/link/link_menu.dart

@@ -2,6 +2,7 @@ import 'package:appflowy_editor/src/editor_state.dart';
 import 'package:appflowy_editor/src/infra/flowy_svg.dart';
 import 'package:appflowy_editor/src/l10n/l10n.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:appflowy_editor/src/editor/toolbar/desktop/items/utils/overlay_util.dart';
 
 class LinkMenu extends StatefulWidget {
@@ -13,6 +14,7 @@ class LinkMenu extends StatefulWidget {
     required this.onOpenLink,
     required this.onCopyLink,
     required this.onRemoveLink,
+    required this.onDismiss,
   }) : super(key: key);
 
   final String? linkText;
@@ -21,6 +23,7 @@ class LinkMenu extends StatefulWidget {
   final VoidCallback onOpenLink;
   final VoidCallback onCopyLink;
   final VoidCallback onRemoveLink;
+  final VoidCallback onDismiss;
 
   @override
   State<LinkMenu> createState() => _LinkMenuState();
@@ -81,27 +84,36 @@ class _LinkMenuState extends State<LinkMenu> {
   }
 
   Widget _buildInput() {
-    return TextField(
-      focusNode: _focusNode,
-      textAlign: TextAlign.left,
-      controller: _textEditingController,
-      onSubmitted: widget.onSubmitted,
-      decoration: InputDecoration(
-        hintText: 'URL',
-        contentPadding: const EdgeInsets.all(16.0),
-        isDense: true,
-        suffixIcon: IconButton(
-          padding: const EdgeInsets.all(4.0),
-          icon: const FlowySvg(
-            name: 'clear',
-            width: 24,
-            height: 24,
+    return RawKeyboardListener(
+      focusNode: FocusNode(),
+      onKey: (key) {
+        if (key is RawKeyDownEvent &&
+            key.logicalKey == LogicalKeyboardKey.escape) {
+          widget.onDismiss();
+        }
+      },
+      child: TextField(
+        focusNode: _focusNode,
+        textAlign: TextAlign.left,
+        controller: _textEditingController,
+        onSubmitted: widget.onSubmitted,
+        decoration: InputDecoration(
+          hintText: AppFlowyEditorLocalizations.current.urlHint,
+          contentPadding: const EdgeInsets.all(16.0),
+          isDense: true,
+          suffixIcon: IconButton(
+            padding: const EdgeInsets.all(4.0),
+            icon: const FlowySvg(
+              name: 'clear',
+              width: 24,
+              height: 24,
+            ),
+            onPressed: _textEditingController.clear,
+            splashRadius: 5,
+          ),
+          border: const OutlineInputBorder(
+            borderRadius: BorderRadius.all(Radius.circular(12.0)),
           ),
-          onPressed: _textEditingController.clear,
-          splashRadius: 5,
-        ),
-        border: const OutlineInputBorder(
-          borderRadius: BorderRadius.all(Radius.circular(12.0)),
         ),
       ),
     );

lib/src/editor/toolbar/desktop/items/link/link_toolbar_item.dart

@@ -111,6 +111,7 @@ void showLinkMenu(
           editorState.apply(transaction);
           dismissOverlay();
         },
+        onDismiss: dismissOverlay,
       );
     },
   ).build();

lib/src/l10n/intl/messages_en.dart

@@ -106,6 +106,7 @@ class MessageLookup extends MessageLookupByLibrary {
         "tint7": MessageLookupByLibrary.simpleMessage("Tint 7"),
         "tint8": MessageLookupByLibrary.simpleMessage("Tint 8"),
         "tint9": MessageLookupByLibrary.simpleMessage("Tint 9"),
-        "underline": MessageLookupByLibrary.simpleMessage("Underline")
+        "underline": MessageLookupByLibrary.simpleMessage("Underline"),
+        "urlHint": MessageLookupByLibrary.simpleMessage("URL")
       };
 }

lib/src/l10n/l10n.dart

@@ -249,6 +249,7 @@ class _AppFlowySelectionState extends State<AppFlowySelection>
     currentSelectedNodes = [];
     currentSelection.value = null;
 
+    _clearToolbar();
     clearCursor();
     // clear selection areas
     _selectionAreas

lib/src/service/selection_service.dart

@@ -1,6 +1,7 @@
 import 'package:appflowy_editor/src/core/document/text_delta.dart';
 import 'package:appflowy_editor/src/editor/toolbar/desktop/items/link/link_menu.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_test/flutter_test.dart';
 import '../../../../infra/testable_editor.dart';
 
@@ -20,6 +21,7 @@ void main() async {
         onSubmitted: (text) {
           submittedText = text;
         },
+        onDismiss: () {},
       );
       final editor = tester.editor;
       await editor.startTesting();
@@ -92,5 +94,36 @@ void main() async {
 
       await editor.dispose();
     });
+
+    testWidgets('test dismiss link menu by pressing ESC', (tester) async {
+      var dismissed = false;
+
+      final linkMenu = LinkMenu(
+        onOpenLink: () {},
+        onCopyLink: () {},
+        onRemoveLink: () {},
+        onSubmitted: (text) {},
+        onDismiss: () {
+          dismissed = true;
+        },
+      );
+
+      await tester.pumpWidget(
+        MaterialApp(
+          home: Material(
+            child: linkMenu,
+          ),
+        ),
+      );
+
+      expect(find.byType(TextButton), findsNothing);
+      expect(find.byType(TextField), findsOneWidget);
+
+      // Simulate keyboard press event for the Escape key
+      await tester.sendKeyEvent(LogicalKeyboardKey.escape);
+      await tester.pumpAndSettle();
+
+      expect(dismissed, true);
+    });
   });
 }