fix: toolbar tooltip message is incorrect on Windows (#7572)

* fix: some toolbar text display error

* chore: change string id to enum string id

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_format_toolbar_items.dart

@@ -10,29 +10,30 @@ import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flutter/material.dart';
 
 import 'custom_placeholder_toolbar_item.dart';
+import 'toolbar_id_enum.dart';
 
 final List<ToolbarItem> customMarkdownFormatItems = [
   _FormatToolbarItem(
-    id: 'bold',
+    id: ToolbarId.bold,
     name: 'bold',
     svg: FlowySvgs.toolbar_bold_m,
   ),
   group1PaddingItem,
   _FormatToolbarItem(
-    id: 'underline',
+    id: ToolbarId.underline,
     name: 'underline',
     svg: FlowySvgs.toolbar_underline_m,
   ),
   group1PaddingItem,
   _FormatToolbarItem(
-    id: 'italic',
+    id: ToolbarId.italic,
     name: 'italic',
     svg: FlowySvgs.toolbar_inline_italic_m,
   ),
 ];
 
 final ToolbarItem customInlineCodeItem = _FormatToolbarItem(
-  id: 'code',
+  id: ToolbarId.code,
   name: 'code',
   svg: FlowySvgs.toolbar_inline_code_m,
   group: 2,
@@ -40,12 +41,12 @@ final ToolbarItem customInlineCodeItem = _FormatToolbarItem(
 
 class _FormatToolbarItem extends ToolbarItem {
   _FormatToolbarItem({
-    required String id,
+    required ToolbarId id,
     required String name,
     required FlowySvgData svg,
     super.group = 1,
   }) : super(
-          id: 'editor.$id',
+          id: id.id,
           isActive: showInAnyTextType,
           builder: (
             context,
@@ -89,8 +90,8 @@ class _FormatToolbarItem extends ToolbarItem {
             if (tooltipBuilder != null) {
               return tooltipBuilder(
                 context,
-                id,
+                id.id,
-                getTooltipText(id),
+                _getTooltipText(id),
                 child,
               );
             }
@@ -99,44 +100,32 @@ class _FormatToolbarItem extends ToolbarItem {
         );
 }
 
-String getTooltipText(String id) {
+String _getTooltipText(ToolbarId id) {
   switch (id) {
-    case 'underline':
+    case ToolbarId.underline:
       return '${LocaleKeys.toolbar_underline.tr()}${shortcutTooltips(
         '⌘ + U',
         'CTRL + U',
         'CTRL + U',
       )}';
-    case 'bold':
+    case ToolbarId.bold:
       return '${LocaleKeys.toolbar_bold.tr()}${shortcutTooltips(
         '⌘ + B',
         'CTRL + B',
         'CTRL + B',
       )}';
-    case 'italic':
+    case ToolbarId.italic:
       return '${LocaleKeys.toolbar_italic.tr()}${shortcutTooltips(
         '⌘ + I',
         'CTRL + I',
         'CTRL + I',
       )}';
-    case 'strikethrough':
+    case ToolbarId.code:
-      return '${LocaleKeys.toolbar_strike.tr()}${shortcutTooltips(
-        '⌘ + SHIFT + S',
-        'CTRL + SHIFT + S',
-        'CTRL + SHIFT + S',
-      )}';
-    case 'code':
       return '${LocaleKeys.document_toolbar_inlineCode.tr()}${shortcutTooltips(
         '⌘ + E',
         'CTRL + E',
         'CTRL + E',
       )}';
-    case 'align_left':
-      return LocaleKeys.document_toolbar_alignLeft.tr();
-    case 'align_center':
-      return LocaleKeys.document_toolbar_alignCenter.tr();
-    case 'align_right':
-      return LocaleKeys.document_toolbar_alignRight.tr();
     default:
       return '';
   }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_hightlight_color_toolbar_item.dart

@@ -6,11 +6,12 @@ import 'package:appflowy_editor/appflowy_editor.dart' hide ColorPicker;
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
-const _kHighlightColorItemId = 'editor.highlightColor';
+import 'toolbar_id_enum.dart';
+
 String? _customHighlightColorHex;
 
 final customHighlightColorItem = ToolbarItem(
-  id: _kHighlightColorItemId,
+  id: ToolbarId.highlightColor.id,
   group: 1,
   isActive: showInAnyTextType,
   builder: (context, editorState, highlightColor, iconColor, tooltipBuilder) =>
@@ -107,7 +108,7 @@ class _HighlightColorPickerWidgetState
 
     return widget.tooltipBuilder?.call(
           context,
-          _kHighlightColorItemId,
+          ToolbarId.highlightColor.id,
           AppFlowyEditorL10n.current.highlightColor,
           child,
         ) ??

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_link_toolbar_item.dart

@@ -4,10 +4,10 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra_ui/style_widget/icon_button.dart';
 import 'package:flutter/material.dart';
 
-const _kLinkItemId = 'editor.link';
+import 'toolbar_id_enum.dart';
 
 final customLinkItem = ToolbarItem(
-  id: _kLinkItemId,
+  id: ToolbarId.link.id,
   group: 4,
   isActive: onlyShowInSingleSelectionAndTextType,
   builder: (context, editorState, highlightColor, iconColor, tooltipBuilder) {
@@ -39,7 +39,7 @@ final customLinkItem = ToolbarItem(
     if (tooltipBuilder != null) {
       return tooltipBuilder(
         context,
-        _kLinkItemId,
+        ToolbarId.highlightColor.id,
         AppFlowyEditorL10n.current.link,
         child,
       );

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_placeholder_toolbar_item.dart

@@ -4,11 +4,10 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
-const placeholderItemId = 'editor.placeholder';
+import 'toolbar_id_enum.dart';
-const paddingPlaceholderItemId = 'editor.padding_placeholder';
 
 final ToolbarItem customPlaceholderItem = ToolbarItem(
-  id: placeholderItemId,
+  id: ToolbarId.placeholder.id,
   group: -1,
   isActive: (editorState) => true,
   builder: (context, __, ___, ____, _____) {
@@ -28,7 +27,7 @@ ToolbarItem buildPaddingPlaceholderItem(
   bool Function(EditorState editorState)? isActive,
 }) =>
     ToolbarItem(
-      id: paddingPlaceholderItemId,
+      id: ToolbarId.paddingPlaceHolder.id,
       group: group,
       isActive: isActive,
       builder: (context, __, ___, ____, _____) => HSpace(4),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_text_align_toolbar_item.dart

@@ -6,10 +6,10 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
-const _kTextAlignItemId = 'editor.text_align';
+import 'toolbar_id_enum.dart';
 
 final ToolbarItem customTextAlignItem = ToolbarItem(
-  id: _kTextAlignItemId,
+  id: ToolbarId.textAlign.id,
   group: 4,
   isActive: onlyShowInSingleSelectionAndTextType,
   builder: (
@@ -114,7 +114,7 @@ class _TextAlignActionListState extends State<TextAlignActionList> {
 
     return widget.tooltipBuilder?.call(
           context,
-          _kTextAlignItemId,
+          ToolbarId.textAlign.id,
           LocaleKeys.document_toolbar_textAlign.tr(),
           child,
         ) ??

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/custom_text_color_toolbar_item.dart

@@ -7,12 +7,12 @@ import 'package:appflowy_editor/appflowy_editor.dart' hide ColorPicker;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
+import 'toolbar_id_enum.dart';
 
-const _kTextColorItemId = 'editor.textColor';
 String? _customColorHex;
 
 final customTextColorItem = ToolbarItem(
-  id: _kTextColorItemId,
+  id: ToolbarId.textColor.id,
   group: 1,
   isActive: showInAnyTextType,
   builder: (context, editorState, highlightColor, iconColor, tooltipBuilder) =>
@@ -106,8 +106,8 @@ class _TextColorPickerWidgetState extends State<TextColorPickerWidget> {
 
     return widget.tooltipBuilder?.call(
           context,
-          _kTextColorItemId,
+          ToolbarId.textColor.id,
-          AppFlowyEditorL10n.current.textColor,
+          LocaleKeys.document_toolbar_textColor.tr(),
           child,
         ) ??
         child;

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/more_option_toolbar_item.dart

@@ -165,8 +165,8 @@ class _MoreOptionActionListState extends State<MoreOptionActionList> {
             rightIcon: FlowyText(
               shortcutTooltips(
                 '⌘⇧S',
-                'CTRL+SHIFT+S',
+                'Ctrl⇧S',
-                'CTRL+SHIFT+S',
+                'Ctrl⇧S',
               ).trim(),
               color: fontColor,
               fontSize: 12,
@@ -180,8 +180,8 @@ class _MoreOptionActionListState extends State<MoreOptionActionList> {
               rightIcon: FlowyText(
                 shortcutTooltips(
                   '⌘⇧E',
-                  'CTRL+SHIFT+E',
+                  'Ctrl⇧E',
-                  'CTRL+SHIFT+E',
+                  'Ctrl⇧E',
                 ).trim(),
                 color: fontColor,
                 fontSize: 12,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/text_heading_toolbar_item.dart

@@ -8,10 +8,10 @@ import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
 import 'package:flutter/material.dart';
 
-const _kTextHeadingItemId = 'editor.text_heading';
+import 'toolbar_id_enum.dart';
 
 final ToolbarItem customTextHeadingItem = ToolbarItem(
-  id: _kTextHeadingItemId,
+  id: ToolbarId.textHeading.id,
   group: 1,
   isActive: onlyShowInSingleTextTypeSelectionAndExcludeTable,
   builder: (
@@ -109,7 +109,7 @@ class _TextHeadingActionListState extends State<TextHeadingActionList> {
 
     return widget.tooltipBuilder?.call(
           context,
-          _kTextHeadingItemId,
+          ToolbarId.textHeading.id,
           LocaleKeys.document_toolbar_textSize.tr(),
           child,
         ) ??

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/text_suggestions_toolbar_item.dart

@@ -14,8 +14,7 @@ import 'package:flowy_infra_ui/style_widget/hover.dart';
 import 'package:flutter/material.dart';
 
 import 'text_heading_toolbar_item.dart';
-
+import 'toolbar_id_enum.dart';
-const _kSuggestionsItemId = 'editor.suggestions';
 
 @visibleForTesting
 const kSuggestionsItemKey = ValueKey('SuggestionsItem');
@@ -24,7 +23,7 @@ const kSuggestionsItemKey = ValueKey('SuggestionsItem');
 const kSuggestionsItemListKey = ValueKey('SuggestionsItemList');
 
 final ToolbarItem suggestionsItem = ToolbarItem(
-  id: _kSuggestionsItemId,
+  id: ToolbarId.suggestions.id,
   group: 3,
   isActive: enableSuggestions,
   builder: (
@@ -159,7 +158,7 @@ class _SuggestionsActionListState extends State<SuggestionsActionList> {
 
     return widget.tooltipBuilder?.call(
           context,
-          _kSuggestionsItemId,
+          ToolbarId.suggestions.id,
           currentSuggestionItem.title,
           child,
         ) ??

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toolbar_item/toolbar_id_enum.dart

@@ -0,0 +1,19 @@
+enum ToolbarId {
+  bold,
+  underline,
+  italic,
+  code,
+  highlightColor,
+  textColor,
+  link,
+  placeholder,
+  paddingPlaceHolder,
+  textAlign,
+  moreOption,
+  textHeading,
+  suggestions,
+}
+
+extension ToolbarIdExtension on ToolbarId {
+  String get id => 'editor.$name';
+}

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

@@ -550,7 +550,7 @@ class EditorStyleCustomizer {
           style: context.tooltipTextStyle(),
         ),
         TextSpan(
-          text: (Platform.isMacOS ? '⌘+' : 'Ctrl+\\') + tooltip.$2,
+          text: (Platform.isMacOS ? '⌘+' : 'Ctrl+') + tooltip.$2,
           style: context.tooltipTextStyle()?.copyWith(
                 color: Theme.of(context).hintColor,
               ),

frontend/resources/translations/en.json

@@ -2118,7 +2118,6 @@
       "moreOptions": "More options",
       "font": "Font",
       "inlineCode": "Inline code",
-
       "suggestions": "Suggestions",
       "turnInto": "Turn into",
       "equation": "Equation"