feat: support enter to insert new line in callout (#5331)

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

@@ -1,8 +1,5 @@
 import 'dart:ui' as ui;
 
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
-
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/application/document_bloc.dart';
 import 'package:appflowy/plugins/document/presentation/editor_configuration.dart';
@@ -10,6 +7,7 @@ import 'package:appflowy/plugins/document/presentation/editor_plugins/align_tool
 import 'package:appflowy/plugins/document/presentation/editor_plugins/background_color/theme_background_color.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/format_arrow_character.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/base/page_reference_commands.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/callout/callout_block_shortcuts.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/i18n/editor_i18n.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/mention/slash_menu_items.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
@@ -29,6 +27,8 @@ import 'package:collection/collection.dart';
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 
 final codeBlockLocalization = CodeBlockLocalizations(
@@ -148,6 +148,9 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
         // code block
         ...codeBlockCharacterEvents,
 
+        // callout block
+        insertNewLineInCalloutBlock,
+
         // toggle list
         formatGreaterToToggleList,
         insertChildNodeInsideToggleList,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart

@@ -56,7 +56,7 @@ SelectionMenuItem calloutItem = SelectionMenuItem.node(
   iconData: Icons.note,
   keywords: [CalloutBlockKeys.type],
   nodeBuilder: (editorState, context) =>
-      calloutNode(defaultColor: AFThemeExtension.of(context).calloutBGColor),
+      calloutNode(defaultColor: Colors.transparent),
   replace: (_, node) => node.delta?.isEmpty ?? false,
   updateSelection: (_, path, __, ___) {
     return Selection.single(path: path, startOffset: 0);

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_shortcuts.dart

@@ -0,0 +1,41 @@
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
+import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flutter/services.dart';
+
+/// Pressing Enter in a callout block will insert a newline (\n) within the callout,
+/// while pressing Shift+Enter in a callout will insert a new paragraph next to the callout.
+///
+/// - support
+///   - desktop
+///   - mobile
+///   - web
+///
+final CharacterShortcutEvent insertNewLineInCalloutBlock =
+    CharacterShortcutEvent(
+  key: 'insert a new line in callout block',
+  character: '\n',
+  handler: _insertNewLineHandler,
+);
+
+CharacterShortcutEventHandler _insertNewLineHandler = (editorState) async {
+  final selection = editorState.selection?.normalized;
+  if (selection == null) {
+    return false;
+  }
+
+  final node = editorState.getNodeAtPath(selection.start.path);
+  if (node == null || node.type != CalloutBlockKeys.type) {
+    return false;
+  }
+
+  // delete the selection
+  await editorState.deleteSelection(selection);
+
+  if (HardwareKeyboard.instance.isShiftPressed) {
+    await editorState.insertNewLine();
+  } else {
+    await editorState.insertTextAtCurrentSelection('\n');
+  }
+
+  return true;
+};