fix: accept multi-key combination for customizing shortcuts & removes duplicates (#5414)

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

@@ -56,7 +56,18 @@ final List<CommandShortcutEvent> commandShortcutEvents = [
   customPasteCommand,
   customCutCommand,
   ...customTextAlignCommands,
-  ...standardCommandShortcutEvents,
+
+  // remove standard shortcuts for copy, cut, paste, todo
+  ...standardCommandShortcutEvents
+    ..removeWhere(
+      (shortcut) => [
+        copyCommand,
+        cutCommand,
+        pasteCommand,
+        toggleTodoListCommand,
+      ].contains(shortcut),
+    ),
+
   emojiShortcutEvent,
 ];
 
@@ -90,7 +101,6 @@ class AppFlowyEditorPage extends StatefulWidget {
   final String Function(Node)? placeholderText;
 
   /// Used to provide an initial selection on Page-load
-  ///
   final Selection? initialSelection;
 
   final bool useViewInfoBloc;
@@ -111,15 +121,8 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     ],
   );
 
-  late final List<CommandShortcutEvent> commandShortcutEvents = [
-    toggleToggleListCommand,
-    ...localizedCodeBlockCommands,
-    customCopyCommand,
-    customPasteCommand,
-    customCutCommand,
-    ...customTextAlignCommands,
-    ...standardCommandShortcutEvents,
-    emojiShortcutEvent,
+  late final List<CommandShortcutEvent> cmdShortcutEvents = [
+    ...commandShortcutEvents,
     ..._buildFindAndReplaceCommands(),
   ];
 
@@ -309,7 +312,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
         ),
         // customize the shortcuts
         characterShortcutEvents: characterShortcutEvents,
-        commandShortcutEvents: commandShortcutEvents,
+        commandShortcutEvents: cmdShortcutEvents,
         // customize the context menu items
         contextMenuItems: customContextMenuItems,
         // customize the header and footer.
@@ -401,7 +404,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
     final customizeShortcuts =
         await settingsShortcutService.getCustomizeShortcuts();
     await settingsShortcutService.updateCommandShortcuts(
-      commandShortcutEvents,
+      cmdShortcutEvents,
       customizeShortcuts,
     );
   }

frontend/appflowy_flutter/lib/workspace/application/settings/shortcuts/settings_shortcuts_cubit.dart

@@ -32,6 +32,7 @@ class ShortcutsCubit extends Cubit<ShortcutsState> {
         error: '',
       ),
     );
+
     try {
       final customizeShortcuts = await service.getCustomizeShortcuts();
       await service.updateCommandShortcuts(
@@ -40,7 +41,9 @@ class ShortcutsCubit extends Cubit<ShortcutsState> {
       );
 
       //sort the shortcuts
-      commandShortcutEvents.sort((a, b) => a.key.compareTo(b.key));
+      commandShortcutEvents.sort(
+        (a, b) => a.key.toLowerCase().compareTo(b.key.toLowerCase()),
+      );
 
       emit(
         state.copyWith(
@@ -104,11 +107,11 @@ class ShortcutsCubit extends Cubit<ShortcutsState> {
     }
   }
 
-  ///Checks if the new command is conflicting with other shortcut
-  ///We also check using the key, whether this command is a codeblock
-  ///shortcut, if so we only check a conflict with other codeblock shortcut.
+  /// Checks if the new command is conflicting with other shortcut
+  /// We also check using the key, whether this command is a codeblock
+  /// shortcut, if so we only check a conflict with other codeblock shortcut.
   String getConflict(CommandShortcutEvent currentShortcut, String command) {
-    //check if currentShortcut is a codeblock shortcut.
+    // check if currentShortcut is a codeblock shortcut.
     final isCodeBlockCommand = currentShortcut.isCodeBlockCommand;
 
     for (final e in state.commandShortcutEvents) {

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_customize_shortcuts_view.dart

@@ -84,7 +84,7 @@ class ShortcutsListView extends StatelessWidget {
   }
 }
 
-class ShortcutsListTile extends StatelessWidget {
+class ShortcutsListTile extends StatefulWidget {
   const ShortcutsListTile({
     super.key,
     required this.shortcutEvent,
@@ -92,6 +92,25 @@ class ShortcutsListTile extends StatelessWidget {
 
   final CommandShortcutEvent shortcutEvent;
 
+  @override
+  State<ShortcutsListTile> createState() => _ShortcutsListTileState();
+}
+
+class _ShortcutsListTileState extends State<ShortcutsListTile> {
+  late final TextEditingController controller;
+
+  @override
+  void initState() {
+    controller = TextEditingController(text: widget.shortcutEvent.command);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Column(
@@ -100,16 +119,16 @@ class ShortcutsListTile extends StatelessWidget {
           children: [
             Expanded(
               child: FlowyText.medium(
-                key: Key(shortcutEvent.key),
-                shortcutEvent.description!.capitalize(),
+                key: Key(widget.shortcutEvent.key),
+                widget.shortcutEvent.description!.capitalize(),
                 overflow: TextOverflow.ellipsis,
               ),
             ),
             FlowyTextButton(
-              shortcutEvent.command,
+              widget.shortcutEvent.command,
               fontColor: AFThemeExtension.of(context).textColor,
               fillColor: Colors.transparent,
-              onPressed: () => showKeyListenerDialog(context),
+              onPressed: () => showKeyListenerDialog(context, controller),
             ),
           ],
         ),
@@ -120,8 +139,10 @@ class ShortcutsListTile extends StatelessWidget {
     );
   }
 
-  void showKeyListenerDialog(BuildContext widgetContext) {
-    final controller = TextEditingController(text: shortcutEvent.command);
+  void showKeyListenerDialog(
+    BuildContext widgetContext,
+    TextEditingController controller,
+  ) {
     showDialog(
       context: widgetContext,
       builder: (builderContext) {
@@ -131,9 +152,10 @@ class ShortcutsListTile extends StatelessWidget {
           content: KeyboardListener(
             focusNode: FocusNode(),
             onKeyEvent: (key) {
+              if (key is! KeyDownEvent) return;
               if (key.logicalKey == LogicalKeyboardKey.enter &&
                   !HardwareKeyboard.instance.isShiftPressed) {
-                if (controller.text == shortcutEvent.command) {
+                if (controller.text == widget.shortcutEvent.command) {
                   _dismiss(builderContext);
                 }
                 if (formKey.currentState!.validate()) {
@@ -166,12 +188,12 @@ class ShortcutsListTile extends StatelessWidget {
           ),
         );
       },
-    ).then((_) => controller.dispose());
+    );
   }
 
   String? _validateForConflicts(BuildContext context, String command) {
     final conflict = BlocProvider.of<ShortcutsCubit>(context).getConflict(
-      shortcutEvent,
+      widget.shortcutEvent,
       command,
     );
     if (conflict.isEmpty) return null;
@@ -182,7 +204,7 @@ class ShortcutsListTile extends StatelessWidget {
   }
 
   void _updateKey(BuildContext context, String command) {
-    shortcutEvent.updateCommand(command: command);
+    widget.shortcutEvent.updateCommand(command: command);
     BlocProvider.of<ShortcutsCubit>(context).updateAllShortcuts();
   }