feat: callout improvement (#3090)

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

@@ -5,6 +5,7 @@ import 'package:appflowy/workspace/application/settings/shortcuts/settings_short
 import 'package:appflowy/plugins/document/presentation/editor_plugins/inline_page/inline_page_reference.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:collection/collection.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_bloc/flutter_bloc.dart';
@@ -185,6 +186,8 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
       // OptionAction.moveDown,
     ];
 
+    final calloutBGColor = AFThemeExtension.of(context).calloutBGColor;
+
     final configuration = BlockComponentConfiguration(
       padding: (_) => const EdgeInsets.symmetric(vertical: 5.0),
     );
@@ -250,6 +253,7 @@ class _AppFlowyEditorPageState extends State<AppFlowyEditorPage> {
       ),
       CalloutBlockKeys.type: CalloutBlockComponentBuilder(
         configuration: configuration,
+        defaultColor: calloutBGColor,
       ),
       DividerBlockKeys.type: DividerBlockComponentBuilder(
         configuration: configuration,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/actions/option_action.dart

@@ -16,6 +16,8 @@ enum OptionAction {
   turnInto,
   moveUp,
   moveDown,
+
+  /// callout background color
   color,
   divider,
   align;
@@ -241,11 +243,12 @@ class ColorOptionAction extends PopoverActionCell {
         final bgColor =
             node.attributes[blockComponentBackgroundColor] as String?;
         final selectedColor = bgColor?.toColor();
-
+        // get default background color from themeExtension
+        final defaultColor = AFThemeExtension.of(context).calloutBGColor;
         final colors = [
-          // clear background color.
+          // reset to default background color
           FlowyColorOption(
-            color: Colors.transparent,
+            color: defaultColor,
             name: LocaleKeys.document_plugins_optionAction_defaultColor.tr(),
           ),
           ...FlowyTint.values.map(
@@ -265,8 +268,7 @@ class ColorOptionAction extends PopoverActionCell {
           ),
           onTap: (color, index) async {
             final transaction = editorState.transaction;
-            final backgroundColor =
-                color == Colors.transparent ? null : color.toHex();
+            final backgroundColor = color.toHex();
             transaction.updateNode(node, {
               blockComponentBackgroundColor: backgroundColor,
             });

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

@@ -1,4 +1,5 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
@@ -26,16 +27,16 @@ class CalloutBlockKeys {
   static const String icon = 'icon';
 }
 
-// creating a new callout node
+// The one is inserted through selection menu
 Node calloutNode({
   Delta? delta,
   String emoji = '📌',
-  String backgroundColor = '#F0F0F0',
+  Color? defaultColor,
 }) {
   final attributes = {
     CalloutBlockKeys.delta: (delta ?? Delta()).toJson(),
     CalloutBlockKeys.icon: emoji,
-    CalloutBlockKeys.backgroundColor: backgroundColor,
+    CalloutBlockKeys.backgroundColor: defaultColor?.toHex() ?? '#f2f2f2',
   };
   return Node(
     type: CalloutBlockKeys.type,
@@ -43,12 +44,13 @@ Node calloutNode({
   );
 }
 
-// defining the callout block menu item for selection
+// defining the callout block menu item in selection menu
 SelectionMenuItem calloutItem = SelectionMenuItem.node(
   name: 'Callout',
   iconData: Icons.note,
-  keywords: ['callout'],
-  nodeBuilder: (editorState, _) => calloutNode(),
+  keywords: [CalloutBlockKeys.type],
+  nodeBuilder: (editorState, context) =>
+      calloutNode(defaultColor: AFThemeExtension.of(context).calloutBGColor),
   replace: (_, node) => node.delta?.isEmpty ?? false,
   updateSelection: (_, path, __, ___) {
     return Selection.single(path: path, startOffset: 0);
@@ -59,17 +61,21 @@ SelectionMenuItem calloutItem = SelectionMenuItem.node(
 class CalloutBlockComponentBuilder extends BlockComponentBuilder {
   CalloutBlockComponentBuilder({
     this.configuration = const BlockComponentConfiguration(),
+    required this.defaultColor,
   });
 
   @override
   final BlockComponentConfiguration configuration;
 
+  final Color defaultColor;
+
   @override
   BlockComponentWidget build(BlockComponentContext blockComponentContext) {
     final node = blockComponentContext.node;
     return CalloutBlockComponentWidget(
       key: node.key,
       node: node,
+      defaultColor: defaultColor,
       configuration: configuration,
       showActions: showActions(node),
       actionBuilder: (context, state) => actionBuilder(
@@ -96,8 +102,11 @@ class CalloutBlockComponentWidget extends BlockComponentStatefulWidget {
     super.showActions,
     super.actionBuilder,
     super.configuration = const BlockComponentConfiguration(),
+    required this.defaultColor,
   });
 
+  final Color defaultColor;
+
   @override
   State<CalloutBlockComponentWidget> createState() =>
       _CalloutBlockComponentWidgetState();
@@ -128,17 +137,8 @@ class _CalloutBlockComponentWidgetState
   // get the background color of the note block from the node's attributes
   Color get backgroundColor {
     final colorString =
-        node.attributes[CalloutBlockKeys.backgroundColor] as String?;
-    if (colorString == null) {
-      return Colors.transparent;
-    }
-
-    final brightness = Theme.of(context).brightness;
-    final bool isDarkMode = brightness == Brightness.dark;
-
-    final Color bgColor = colorString.toColor();
-
-    return isDarkMode ? bgColor.withOpacity(0.3) : bgColor;
+        node.attributes[CalloutBlockKeys.backgroundColor] as String;
+    return colorString.toColor();
   }
 
   // get the emoji of the note block from the node's attributes or default to '📌'
@@ -162,9 +162,9 @@ class _CalloutBlockComponentWidgetState
           // the emoji picker button for the note
           Padding(
             padding: const EdgeInsets.only(
-              top: 6.0,
-              left: 2.0,
-              right: 2.0,
+              top: 8.0,
+              left: 4.0,
+              right: 4.0,
             ),
             child: EmojiPickerButton(
               key: ValueKey(
@@ -183,7 +183,7 @@ class _CalloutBlockComponentWidgetState
               child: buildCalloutBlockComponent(context),
             ),
           ),
-          const VSpace(10),
+          const HSpace(8.0),
         ],
       ),
     );