feat: toggle highlight using ctrl/cmd + shift + h

example/lib/pages/editor.dart

@@ -125,7 +125,17 @@ class Editor extends StatelessWidget {
       scrollController: scrollController,
       blockComponentBuilders: customBlockComponentBuilders,
       commandShortcutEvents: [
-        ...standardCommandShortcutEvents,
+        customToggleHighlightCommand(
+          style: ToggleColorsStyle(
+            highlightColor: Theme.of(context).highlightColor,
+          ),
+        ),
+        ...[
+          ...standardCommandShortcutEvents
+            ..removeWhere(
+              (el) => el == toggleHighlightCommand,
+            ),
+        ],
         ...findAndReplaceCommands(
           context: context,
           localizations: FindReplaceLocalizations(

lib/src/editor/block_component/standard_block_components.dart

@@ -111,6 +111,7 @@ final List<CommandShortcutEvent> standardCommandShortcutEvents = [
   //
   toggleTodoListCommand,
   ...toggleMarkdownCommands,
+  toggleHighlightCommand,
   showLinkMenuCommand,
 
   //

lib/src/editor/editor_component/service/shortcuts/command_shortcut_events/command_shortcut_events.dart

@@ -17,4 +17,5 @@ export 'remove_word_command.dart';
 export 'find_replace_command.dart';
 export 'select_all_command.dart';
 export 'show_link_menu_command.dart';
+export 'toggle_colors_command.dart';
 export 'undo_redo_command.dart';

lib/src/editor/editor_component/service/shortcuts/command_shortcut_events/markdown_commands.dart

@@ -60,7 +60,7 @@
   String key,
 ) {
   if (PlatformExtension.isMobile) {
-    assert(false, 'homeCommand is not supported on mobile platform.');
+    assert(false, 'toggle attribute is not supported on mobile platform.');
     return KeyEventResult.ignored;
   }
 

lib/src/editor/editor_component/service/shortcuts/command_shortcut_events/toggle_colors_command.dart

@@ -0,0 +1,80 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/material.dart';
+
+/// Toggle Color Commands
+///
+/// Cmd / Ctrl + Shift + H: toggle highlight color
+/// Cmd / Ctrl + Shift + T: toggle text color
+/// - support
+///   - desktop
+///   - web
+
+List<CommandShortcutEvent> toggleColorCommands({
+  ToggleColorsStyle? style,
+}) =>
+    [
+      customToggleHighlightCommand(
+        style: style ?? ToggleColorsStyle(),
+      ),
+    ];
+
+class ToggleColorsStyle {
+  ToggleColorsStyle({
+    this.highlightColor = const Color(0x60FFCE00),
+  });
+
+  final Color highlightColor;
+}
+
+final CommandShortcutEvent toggleHighlightCommand = CommandShortcutEvent(
+  key: 'toggle highlight',
+  command: 'ctrl+shift+h',
+  macOSCommand: 'cmd+shift+h',
+  handler: (editorState) => _toggleHighlight(
+    editorState,
+    style: ToggleColorsStyle(),
+  ),
+);
+
+CommandShortcutEvent customToggleHighlightCommand({
+  required ToggleColorsStyle style,
+}) =>
+    CommandShortcutEvent(
+      key: 'toggle highlight',
+      command: 'ctrl+shift+h',
+      macOSCommand: 'cmd+shift+h',
+      handler: (editorState) => _toggleHighlight(editorState, style: style),
+    );
+
+KeyEventResult _toggleHighlight(
+  EditorState editorState, {
+  required ToggleColorsStyle style,
+}) {
+  if (PlatformExtension.isMobile) {
+    assert(false, 'toggle highlight is not supported on mobile platform.');
+    return KeyEventResult.ignored;
+  }
+
+  final selection = editorState.selection;
+  if (selection == null || selection.isCollapsed) {
+    return KeyEventResult.ignored;
+  }
+
+  //check if already highlighted
+  final nodes = editorState.getNodesInSelection(selection);
+  final isHighlighted = nodes.allSatisfyInSelection(selection, (delta) {
+    return delta.everyAttributes(
+      (attributes) => attributes[AppFlowyRichTextKeys.highlightColor] != null,
+    );
+  });
+
+  editorState.formatDelta(
+    selection,
+    {
+      AppFlowyRichTextKeys.highlightColor:
+          isHighlighted ? null : style.highlightColor.toHex(),
+    },
+  );
+
+  return KeyEventResult.handled;
+}

test/new/service/shortcuts/command_shortcut_events/toggle_color_commands_test.dart

@@ -0,0 +1,141 @@
+import 'dart:io';
+
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+
+import '../../../infra/testable_editor.dart';
+
+void main() async {
+  setUpAll(() {
+    TestWidgetsFlutterBinding.ensureInitialized();
+  });
+
+  group('toggle_color_commands.dart', () {
+    testWidgets('Presses Command + Shift + H to update text style - highlight',
+        (tester) async {
+      await _testUpdateTextColorByCommandX(
+        tester,
+        AppFlowyRichTextKeys.highlightColor,
+        LogicalKeyboardKey.keyH,
+      );
+    });
+  });
+}
+
+Future<void> _testUpdateTextColorByCommandX(
+  WidgetTester tester,
+  String matchStyle,
+  LogicalKeyboardKey key,
+) async {
+  const text = 'Welcome to Appflowy 😁';
+  final editor = tester.editor..addParagraphs(3, initialText: text);
+  await editor.startTesting();
+
+  var selection = Selection.single(
+    path: [1],
+    startOffset: 2,
+    endOffset: text.length - 2,
+  );
+  await editor.updateSelection(selection);
+  await editor.pressKey(
+    key: key,
+    isShiftPressed: true,
+    isMetaPressed: Platform.isMacOS,
+    isControlPressed: Platform.isWindows || Platform.isLinux,
+  );
+  var node = editor.nodeAtPath([1]);
+  expect(
+    node?.allSatisfyInSelection(selection, (delta) {
+      return delta
+          .whereType<TextInsert>()
+          .every((element) => element.attributes?[matchStyle] != null);
+    }),
+    true,
+  );
+
+  selection = Selection.single(
+    path: [1],
+    startOffset: 0,
+    endOffset: text.length,
+  );
+  await editor.updateSelection(selection);
+  await editor.pressKey(
+    key: key,
+    isShiftPressed: true,
+    isMetaPressed: Platform.isMacOS,
+    isControlPressed: Platform.isWindows || Platform.isLinux,
+  );
+  node = editor.nodeAtPath([1]);
+  expect(
+    node?.allSatisfyInSelection(selection, (delta) {
+      return delta
+          .whereType<TextInsert>()
+          .every((element) => element.attributes?[matchStyle] != null);
+    }),
+    true,
+  );
+
+  // clear the style
+  await editor.updateSelection(selection);
+  await editor.pressKey(
+    key: key,
+    isShiftPressed: true,
+    isMetaPressed: Platform.isMacOS,
+    isControlPressed: Platform.isWindows || Platform.isLinux,
+  );
+  node = editor.nodeAtPath([1]);
+  expect(
+    node?.allSatisfyInSelection(selection, (delta) {
+      return delta
+          .whereType<TextInsert>()
+          .every((element) => element.attributes?[matchStyle] == null);
+    }),
+    true,
+  );
+  selection = Selection(
+    start: Position(path: [0], offset: 0),
+    end: Position(path: [2], offset: text.length),
+  );
+  await editor.updateSelection(selection);
+  await editor.pressKey(
+    key: key,
+    isShiftPressed: true,
+    isMetaPressed: Platform.isMacOS,
+    isControlPressed: Platform.isWindows || Platform.isLinux,
+  );
+  var nodes = editor.editorState.getNodesInSelection(selection);
+  expect(nodes.length, 3);
+  for (final node in nodes) {
+    expect(
+      node.allSatisfyInSelection(selection, (delta) {
+        return delta
+            .whereType<TextInsert>()
+            .every((element) => element.attributes?[matchStyle] != null);
+      }),
+      true,
+    );
+  }
+
+  await editor.updateSelection(selection);
+  await editor.pressKey(
+    key: key,
+    isShiftPressed: true,
+    isMetaPressed: Platform.isMacOS,
+    isControlPressed: Platform.isWindows || Platform.isLinux,
+  );
+  nodes = editor.editorState.getNodesInSelection(selection);
+  expect(nodes.length, 3);
+  for (final node in nodes) {
+    expect(
+      node.allSatisfyInSelection(selection, (delta) {
+        return delta
+            .whereType<TextInsert>()
+            .every((element) => element.attributes?[matchStyle] == null);
+      }),
+      true,
+    );
+  }
+
+  await editor.dispose();
+}