fix: icon and emoji doesn't align in mention page menu

Author: LucasXu0

frontend/appflowy_flutter/lib/mobile/presentation/inline_actions/mobile_inline_actions_menu_group.dart

@@ -102,7 +102,7 @@ class MobileInlineActionsWidget extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final hasIcon = item.icon != null;
+    final hasIcon = item.iconBuilder != null;
     return Container(
       height: 36,
       decoration: BoxDecoration(
@@ -119,7 +119,7 @@ class MobileInlineActionsWidget extends StatelessWidget {
             child: Row(
               children: [
                 if (hasIcon) ...[
-                  item.icon!.call(isSelected),
+                  item.iconBuilder!.call(isSelected),
                   SizedBox(width: 12),
                 ],
                 Flexible(

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/header/emoji_icon_widget.dart

@@ -8,6 +8,7 @@ import 'package:appflowy/shared/icon_emoji_picker/icon_picker.dart';
 import 'package:appflowy/user/application/user_service.dart';
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/user_profile.pb.dart';
+import 'package:flowy_infra_ui/style_widget/text.dart';
 import 'package:flowy_svg/flowy_svg.dart';
 import 'package:flutter/material.dart';
 import 'package:string_validator/string_validator.dart';
@@ -113,24 +114,21 @@ class _RawEmojiIconWidgetState extends State<RawEmojiIconWidget> {
     try {
       switch (widget.emoji.type) {
         case FlowyIconType.emoji:
-          return EmojiText(
-            emoji: widget.emoji.emoji,
+          return FlowyText.emoji(
+            widget.emoji.emoji,
             fontSize: widget.emojiSize,
             textAlign: TextAlign.justify,
             lineHeight: widget.lineHeight,
           );
         case FlowyIconType.icon:
-          IconsData iconData =
-              IconsData.fromJson(jsonDecode(widget.emoji.emoji));
+          IconsData iconData = IconsData.fromJson(
+            jsonDecode(widget.emoji.emoji),
+          );
           if (!widget.enableColor) {
             iconData = iconData.noColor();
           }
 
-          /// Under the same width conditions, icons on macOS seem to appear
-          /// larger than emojis, so 0.9 is used here to slightly reduce the
-          /// size of the icons
-          final iconSize =
-              Platform.isMacOS ? widget.emojiSize * 0.9 : widget.emojiSize;
+          final iconSize = widget.emojiSize;
           return IconWidget(
             iconsData: iconData,
             size: iconSize,

frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/child_page.dart

@@ -24,7 +24,7 @@ class InlineChildPageService extends InlineActionsDelegate {
       results.add(
         InlineActionsMenuItem(
           label: LocaleKeys.inlineActions_createPage.tr(args: [search]),
-          icon: (_) => const FlowySvg(FlowySvgs.add_s),
+          iconBuilder: (_) => const FlowySvg(FlowySvgs.add_s),
           onSelected: (context, editorState, service, replacement) =>
               _onSelected(context, editorState, service, replacement, search),
         ),

frontend/appflowy_flutter/lib/plugins/inline_actions/handlers/inline_page_reference.dart

@@ -235,12 +235,19 @@ class InlinePageReferenceService extends InlineActionsDelegate {
   InlineActionsMenuItem _fromView(ViewPB view) => InlineActionsMenuItem(
         keywords: [view.nameOrDefault.toLowerCase()],
         label: view.nameOrDefault,
-        icon: (onSelected) => view.icon.value.isNotEmpty
-            ? RawEmojiIconWidget(
-                emoji: view.icon.toEmojiIconData(),
-                emojiSize: 14,
-              )
-            : view.defaultIcon(),
+        iconBuilder: (onSelected) {
+          final child = view.icon.value.isNotEmpty
+              ? RawEmojiIconWidget(
+                  emoji: view.icon.toEmojiIconData(),
+                  emojiSize: 16.0,
+                  lineHeight: 18.0 / 16.0,
+                )
+              : view.defaultIcon(size: const Size(16, 16));
+          return SizedBox(
+            width: 16,
+            child: child,
+          );
+        },
         onSelected: (context, editorState, menu, replace) => insertPage
             ? _onInsertPageRef(view, context, editorState, replace)
             : _onInsertLinkRef(view, context, editorState, menu, replace),

frontend/appflowy_flutter/lib/plugins/inline_actions/inline_actions_result.dart

@@ -12,13 +12,13 @@ typedef SelectItemHandler = void Function(
 class InlineActionsMenuItem {
   InlineActionsMenuItem({
     required this.label,
-    this.icon,
+    this.iconBuilder,
     this.keywords,
     this.onSelected,
   });
 
   final String label;
-  final Widget Function(bool onSelected)? icon;
+  final Widget Function(bool onSelected)? iconBuilder;
   final List<String>? keywords;
   final SelectItemHandler? onSelected;
 }

frontend/appflowy_flutter/lib/plugins/inline_actions/widgets/inline_actions_menu_group.dart

@@ -92,8 +92,8 @@ class InlineActionsWidget extends StatefulWidget {
 class _InlineActionsWidgetState extends State<InlineActionsWidget> {
   @override
   Widget build(BuildContext context) {
-    final icon = widget.item.icon;
-    final hasIcon = icon != null;
+    final iconBuilder = widget.item.iconBuilder;
+    final hasIcon = iconBuilder != null;
     return Padding(
       padding: const EdgeInsets.symmetric(vertical: 2),
       child: SizedBox(
@@ -104,7 +104,7 @@ class _InlineActionsWidgetState extends State<InlineActionsWidget> {
           text: Row(
             children: [
               if (hasIcon) ...[
-                icon.call(widget.isSelected),
+                iconBuilder.call(widget.isSelected),
                 SizedBox(width: 12),
               ],
               Flexible(

frontend/appflowy_flutter/lib/workspace/presentation/home/menu/view/view_item.dart

@@ -632,7 +632,11 @@ class _SingleInnerViewItemState extends State<SingleInnerViewItem> {
   Widget _buildViewIconButton() {
     final iconData = widget.view.icon.toEmojiIconData();
     final icon = iconData.isNotEmpty
-        ? RawEmojiIconWidget(emoji: iconData, emojiSize: 16.0)
+        ? RawEmojiIconWidget(
+            emoji: iconData,
+            emojiSize: 16.0,
+            lineHeight: 18.0 / 16.0,
+          )
         : Opacity(opacity: 0.6, child: widget.view.defaultIcon());
 
     final Widget child = AppFlowyPopover(