fix: callout emoji size should follow the document font size (#6590)

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/base/emoji_picker_button.dart

@@ -21,6 +21,7 @@ class EmojiPickerButton extends StatelessWidget {
     this.showBorder = true,
     this.enable = true,
     this.margin,
+    this.buttonSize,
   });
 
   final String emoji;
@@ -35,10 +36,66 @@ class EmojiPickerButton extends StatelessWidget {
   final bool showBorder;
   final bool enable;
   final EdgeInsets? margin;
+  final Size? buttonSize;
 
   @override
   Widget build(BuildContext context) {
     if (UniversalPlatform.isDesktopOrWeb) {
+      return _DesktopEmojiPickerButton(
+        emoji: emoji,
+        onSubmitted: onSubmitted,
+        emojiPickerSize: emojiPickerSize,
+        emojiSize: emojiSize,
+        defaultIcon: defaultIcon,
+        offset: offset,
+        direction: direction,
+        title: title,
+        showBorder: showBorder,
+        enable: enable,
+        buttonSize: buttonSize,
+      );
+    }
+
+    return _MobileEmojiPickerButton(
+      emoji: emoji,
+      onSubmitted: onSubmitted,
+      emojiSize: emojiSize,
+      enable: enable,
+      title: title,
+      margin: margin,
+    );
+  }
+}
+
+class _DesktopEmojiPickerButton extends StatelessWidget {
+  _DesktopEmojiPickerButton({
+    required this.emoji,
+    required this.onSubmitted,
+    this.emojiPickerSize = const Size(360, 380),
+    this.emojiSize = 18.0,
+    this.defaultIcon,
+    this.offset,
+    this.direction,
+    this.title,
+    this.showBorder = true,
+    this.enable = true,
+    this.buttonSize,
+  });
+
+  final String emoji;
+  final double emojiSize;
+  final Size emojiPickerSize;
+  final void Function(String emoji, PopoverController? controller) onSubmitted;
+  final PopoverController popoverController = PopoverController();
+  final Widget? defaultIcon;
+  final Offset? offset;
+  final PopoverDirection? direction;
+  final String? title;
+  final bool showBorder;
+  final bool enable;
+  final Size? buttonSize;
+  @override
+  Widget build(BuildContext context) {
     return AppFlowyPopover(
       controller: popoverController,
       constraints: BoxConstraints.expand(
@@ -58,8 +115,8 @@ class EmojiPickerButton extends StatelessWidget {
         ),
       ),
       child: Container(
-          width: 30.0,
+        width: buttonSize?.width ?? 30.0,
-          height: 30.0,
+        height: buttonSize?.height ?? 30.0,
         decoration: BoxDecoration(
           borderRadius: BorderRadius.circular(8),
           border: showBorder
@@ -81,7 +138,27 @@ class EmojiPickerButton extends StatelessWidget {
       ),
     );
   }
+}
 
+class _MobileEmojiPickerButton extends StatelessWidget {
+  const _MobileEmojiPickerButton({
+    required this.emoji,
+    required this.onSubmitted,
+    this.emojiSize = 18.0,
+    this.enable = true,
+    this.title,
+    this.margin,
+  });
+
+  final String emoji;
+  final double emojiSize;
+  final void Function(String emoji, PopoverController? controller) onSubmitted;
+  final String? title;
+  final bool enable;
+  final EdgeInsets? margin;
+
+  @override
+  Widget build(BuildContext context) {
     return FlowyButton(
       useIntrinsicWidth: true,
       margin:

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

@@ -173,6 +173,7 @@ class _CalloutBlockComponentWidgetState
     final textDirection = calculateTextDirection(
       layoutDirection: Directionality.maybeOf(context),
     );
+    final (emojiSize, emojiButtonSize) = calculateEmojiSize();
 
     Widget child = Container(
       decoration: BoxDecoration(
@@ -190,14 +191,14 @@ class _CalloutBlockComponentWidgetState
           if (UniversalPlatform.isDesktopOrWeb) const HSpace(4.0),
           // the emoji picker button for the note
           EmojiPickerButton(
-            key: ValueKey(
+            // force to refresh the popover state
-              emoji.toString(),
+            key: ValueKey(widget.node.id + emoji),
-            ), // force to refresh the popover state
             enable: editorState.editable,
             title: '',
             emoji: emoji,
-            emojiSize: 15.0,
+            emojiSize: emojiSize,
             showBorder: false,
+            buttonSize: emojiButtonSize,
             onSubmitted: (emoji, controller) {
               setEmoji(emoji);
               controller?.close();
@@ -277,4 +278,15 @@ class _CalloutBlockComponentWidgetState
       );
     await editorState.apply(transaction);
   }
+
+  (double, Size) calculateEmojiSize() {
+    const double defaultEmojiSize = 16.0;
+    const Size defaultEmojiButtonSize = Size(30.0, 30.0);
+    final double emojiSize =
+        editorState.editorStyle.textStyleConfiguration.text.fontSize ??
+            defaultEmojiSize;
+    final emojiButtonSize =
+        defaultEmojiButtonSize * emojiSize / defaultEmojiSize;
+    return (emojiSize, emojiButtonSize);
+  }
 }