From eb0c9d32648911a84454ce1f8f619acc7f1b4251 Mon Sep 17 00:00:00 2001
From: "Lucas.Xu" <lucas.xu@appflowy.io>
Date: Tue, 14 May 2024 15:35:01 +0800
Subject: [PATCH] feat: support enter to insert new line in callout (#5331)

---
 .../document/presentation/editor_page.dart    |  9 ++--
 .../callout/callout_block_component.dart      |  2 +-
 .../callout/callout_block_shortcuts.dart      | 41 +++++++++++++++++++
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_shortcuts.dart

diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
index 0fe6347acc..0b7a473176 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_page.dart
+++ b/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,
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart
index 7b561e1ef1..e025dd6d27 100644
--- a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_component.dart
+++ b/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);
diff --git a/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_shortcuts.dart b/frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/callout/callout_block_shortcuts.dart
new file mode 100644
index 0000000000..3c50661071
--- /dev/null
+++ b/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;
+};