chore: enable more editor text to be translated (#4426)

frontend/appflowy_flutter/lib/plugins/document/document_page.dart

@@ -39,17 +39,12 @@ class _DocumentPageState extends State<DocumentPage> {
   @override
   void initState() {
     super.initState();
-
-    // The appflowy editor use Intl as localization, set the default language as fallback.
-    Intl.defaultLocale = 'en_US';
-
     EditorNotification.addListener(_onEditorNotification);
   }
 
   @override
   void dispose() {
     EditorNotification.removeListener(_onEditorNotification);
-
     super.dispose();
   }
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/align_toolbar_item/custom_text_align_command.dart

@@ -1,5 +1,7 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 
 final List<CommandShortcutEvent> customTextAlignCommands = [
@@ -19,7 +21,7 @@ final List<CommandShortcutEvent> customTextAlignCommands = [
 final CommandShortcutEvent customTextLeftAlignCommand = CommandShortcutEvent(
   key: 'Align text to the left',
   command: 'ctrl+shift+l',
-  getDescription: () => 'Align text to the left',
+  getDescription: LocaleKeys.settings_shortcuts_commands_textAlignLeft.tr,
   handler: (editorState) => _textAlignHandler(editorState, leftAlignmentKey),
 );
 
@@ -34,7 +36,7 @@ final CommandShortcutEvent customTextLeftAlignCommand = CommandShortcutEvent(
 final CommandShortcutEvent customTextCenterAlignCommand = CommandShortcutEvent(
   key: 'Align text to the center',
   command: 'ctrl+shift+e',
-  getDescription: () => 'Align text to the center',
+  getDescription: LocaleKeys.settings_shortcuts_commands_textAlignCenter.tr,
   handler: (editorState) => _textAlignHandler(editorState, centerAlignmentKey),
 );
 
@@ -49,7 +51,7 @@ final CommandShortcutEvent customTextCenterAlignCommand = CommandShortcutEvent(
 final CommandShortcutEvent customTextRightAlignCommand = CommandShortcutEvent(
   key: 'Align text to the right',
   command: 'ctrl+shift+r',
-  getDescription: () => 'Align text to the right',
+  getDescription: LocaleKeys.settings_shortcuts_commands_textAlignRight.tr,
   handler: (editorState) => _textAlignHandler(editorState, rightAlignmentKey),
 );
 

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

@@ -1,5 +1,8 @@
+import 'package:appflowy/generated/locale_keys.g.dart' show LocaleKeys;
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart'
+    show StringTranslateExtension;
 import 'package:easy_localization/easy_localization.dart' hide TextDirection;
 import 'package:flowy_infra/theme_extension.dart';
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
@@ -49,7 +52,7 @@ Node calloutNode({
 
 // defining the callout block menu item in selection menu
 SelectionMenuItem calloutItem = SelectionMenuItem.node(
-  getName: () => LocaleKeys.document_plugins_callout.tr(),
+  getName: LocaleKeys.document_plugins_callout.tr,
   iconData: Icons.note,
   keywords: [CalloutBlockKeys.type],
   nodeBuilder: (editorState, context) =>

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_component.dart

@@ -107,7 +107,7 @@ Node codeBlockNode({
 
 // defining the callout block menu item for selection
 SelectionMenuItem codeBlockItem = SelectionMenuItem.node(
-  getName: () => LocaleKeys.document_selectionMenu_codeBlock.tr(),
+  getName: LocaleKeys.document_selectionMenu_codeBlock.tr,
   iconData: Icons.abc,
   keywords: ['code', 'codeblock'],
   nodeBuilder: (editorState, _) => codeBlockNode(),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/code_block/code_block_shortcut_event.dart

@@ -1,5 +1,7 @@
+import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 
 final List<CharacterShortcutEvent> codeBlockCharacterEvents = [
@@ -59,7 +61,8 @@ final CommandShortcutEvent insertNewParagraphNextToCodeBlockCommand =
     CommandShortcutEvent(
   key: 'insert a new paragraph next to the code block',
   command: 'shift+enter',
-  getDescription: () => 'Insert a new paragraph next to the code block',
+  getDescription:
+      LocaleKeys.settings_shortcuts_commands_codeBlockNewParagraph.tr,
   handler: _insertNewParagraphNextToCodeBlockCommandHandler,
 );
 
@@ -72,7 +75,8 @@ final CommandShortcutEvent tabToInsertSpacesInCodeBlockCommand =
     CommandShortcutEvent(
   key: 'tab to insert two spaces at the line start in code block',
   command: 'tab',
-  getDescription: () => 'Insert two spaces at the line start in code block',
+  getDescription:
+      LocaleKeys.settings_shortcuts_commands_codeBlockAddTwoSpaces.tr,
   handler: _tabToInsertSpacesInCodeBlockCommandHandler,
 );
 
@@ -85,7 +89,8 @@ final CommandShortcutEvent tabToDeleteSpacesInCodeBlockCommand =
     CommandShortcutEvent(
   key: 'shift + tab to delete two spaces at the line start in code block',
   command: 'shift+tab',
-  getDescription: () => 'Delete two spaces at the line start in code block',
+  getDescription:
+      LocaleKeys.settings_shortcuts_commands_codeBlockDeleteTwoSpaces.tr,
   handler: _tabToDeleteSpacesInCodeBlockCommandHandler,
 );
 
@@ -98,7 +103,7 @@ final CommandShortcutEvent selectAllInCodeBlockCommand = CommandShortcutEvent(
   key: 'ctrl + a to select all content inside a code block',
   command: 'ctrl+a',
   macOSCommand: 'meta+a',
-  getDescription: () => 'Select all content inside a code block',
+  getDescription: LocaleKeys.settings_shortcuts_commands_codeBlockSelectAll.tr,
   handler: _selectAllInCodeBlockCommandHandler,
 );
 
@@ -111,7 +116,7 @@ final CommandShortcutEvent pasteInCodeblock = CommandShortcutEvent(
   key: 'paste in codeblock',
   command: 'ctrl+v',
   macOSCommand: 'cmd+v',
-  getDescription: () => 'Paste text in codeblock',
+  getDescription: LocaleKeys.settings_shortcuts_commands_codeBlockPasteText.tr,
   handler: _pasteInCodeBlock,
 );
 

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/context_menu/custom_context_menu.dart

@@ -6,15 +6,15 @@ import 'package:easy_localization/easy_localization.dart';
 final List<List<ContextMenuItem>> customContextMenuItems = [
   [
     ContextMenuItem(
-      getName: () => LocaleKeys.document_plugins_contextMenu_copy.tr(),
+      getName: LocaleKeys.document_plugins_contextMenu_copy.tr,
       onPressed: (editorState) => customCopyCommand.execute(editorState),
     ),
     ContextMenuItem(
-      getName: () => LocaleKeys.document_plugins_contextMenu_paste.tr(),
+      getName: LocaleKeys.document_plugins_contextMenu_paste.tr,
       onPressed: (editorState) => customPasteCommand.execute(editorState),
     ),
     ContextMenuItem(
-      getName: () => LocaleKeys.document_plugins_contextMenu_cut.tr(),
+      getName: LocaleKeys.document_plugins_contextMenu_cut.tr,
       onPressed: (editorState) => customCutCommand.execute(editorState),
     ),
   ],

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/copy_and_paste/custom_copy_command.dart

@@ -13,8 +13,8 @@ import 'package:flutter/material.dart';
 ///   - mobile
 ///
 final CommandShortcutEvent customCopyCommand = CommandShortcutEvent(
-  key: 'copy the selected content (with formatting)',
-  getDescription: () => 'copy the selected content (with formatting)',
+  key: 'copy the selected content',
+  getDescription: () => AppFlowyEditorL10n.current.cmdCopySelection,
   command: 'ctrl+c',
   macOSCommand: 'cmd+c',
   handler: _copyCommandHandler,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/copy_and_paste/custom_cut_command.dart

@@ -11,8 +11,8 @@ import 'package:flutter/material.dart';
 ///   - mobile
 ///
 final CommandShortcutEvent customCutCommand = CommandShortcutEvent(
-  key: 'cut the selected content (with formatting)',
-  getDescription: () => 'cut the selected content (with formatting)',
+  key: 'cut the selected content',
+  getDescription: () => AppFlowyEditorL10n.current.cmdCutSelection,
   command: 'ctrl+x',
   macOSCommand: 'cmd+x',
   handler: _cutCommandHandler,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/copy_and_paste/custom_paste_command.dart

@@ -18,8 +18,8 @@ import 'package:string_validator/string_validator.dart';
 ///   - mobile
 ///
 final CommandShortcutEvent customPasteCommand = CommandShortcutEvent(
-  key: 'paste the content (with formatting)',
-  getDescription: () => 'paste the content (with formatting)',
+  key: 'paste the content',
+  getDescription: () => AppFlowyEditorL10n.current.cmdPasteContent,
   command: 'ctrl+v',
   macOSCommand: 'cmd+v',
   handler: _pasteCommandHandler,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/database/inline_database_menu_item.dart

@@ -10,7 +10,7 @@ import 'package:easy_localization/easy_localization.dart';
 
 SelectionMenuItem inlineGridMenuItem(DocumentBloc documentBloc) =>
     SelectionMenuItem(
-      getName: () => LocaleKeys.document_slashMenu_grid_createANewGrid.tr(),
+      getName: LocaleKeys.document_slashMenu_grid_createANewGrid.tr,
       icon: (editorState, onSelected, style) => SelectableSvgWidget(
         data: FlowySvgs.grid_s,
         isSelected: onSelected,
@@ -31,7 +31,7 @@ SelectionMenuItem inlineGridMenuItem(DocumentBloc documentBloc) =>
 
 SelectionMenuItem inlineBoardMenuItem(DocumentBloc documentBloc) =>
     SelectionMenuItem(
-      getName: () => LocaleKeys.document_slashMenu_board_createANewBoard.tr(),
+      getName: LocaleKeys.document_slashMenu_board_createANewBoard.tr,
       icon: (editorState, onSelected, style) => SelectableSvgWidget(
         data: FlowySvgs.board_s,
         isSelected: onSelected,
@@ -52,8 +52,7 @@ SelectionMenuItem inlineBoardMenuItem(DocumentBloc documentBloc) =>
 
 SelectionMenuItem inlineCalendarMenuItem(DocumentBloc documentBloc) =>
     SelectionMenuItem(
-      getName: () =>
-          LocaleKeys.document_slashMenu_calendar_createANewCalendar.tr(),
+      getName: LocaleKeys.document_slashMenu_calendar_createANewCalendar.tr,
       icon: (editorState, onSelected, style) => SelectableSvgWidget(
         data: FlowySvgs.date_s,
         isSelected: onSelected,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/database/referenced_database_menu_item.dart

@@ -9,7 +9,7 @@ import 'package:easy_localization/easy_localization.dart';
 // Document Reference
 
 SelectionMenuItem referencedDocumentMenuItem = SelectionMenuItem(
-  getName: () => LocaleKeys.document_plugins_referencedDocument.tr(),
+  getName: LocaleKeys.document_plugins_referencedDocument.tr,
   icon: (editorState, onSelected, style) => SelectableSvgWidget(
     data: FlowySvgs.document_s,
     isSelected: onSelected,
@@ -23,7 +23,7 @@ SelectionMenuItem referencedDocumentMenuItem = SelectionMenuItem(
 // Database References
 
 SelectionMenuItem referencedGridMenuItem = SelectionMenuItem(
-  getName: () => LocaleKeys.document_plugins_referencedGrid.tr(),
+  getName: LocaleKeys.document_plugins_referencedGrid.tr,
   icon: (editorState, onSelected, style) => SelectableSvgWidget(
     data: FlowySvgs.grid_s,
     isSelected: onSelected,
@@ -35,7 +35,7 @@ SelectionMenuItem referencedGridMenuItem = SelectionMenuItem(
 );
 
 SelectionMenuItem referencedBoardMenuItem = SelectionMenuItem(
-  getName: () => LocaleKeys.document_plugins_referencedBoard.tr(),
+  getName: LocaleKeys.document_plugins_referencedBoard.tr,
   icon: (editorState, onSelected, style) => SelectableSvgWidget(
     data: FlowySvgs.board_s,
     isSelected: onSelected,
@@ -47,7 +47,7 @@ SelectionMenuItem referencedBoardMenuItem = SelectionMenuItem(
 );
 
 SelectionMenuItem referencedCalendarMenuItem = SelectionMenuItem(
-  getName: () => LocaleKeys.document_plugins_referencedCalendar.tr(),
+  getName: LocaleKeys.document_plugins_referencedCalendar.tr,
   icon: (editorState, onSelected, style) => SelectableSvgWidget(
     data: FlowySvgs.date_s,
     isSelected: onSelected,

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/math_equation/math_equation_block_component.dart

@@ -36,7 +36,7 @@ Node mathEquationNode({
 
 // defining the callout block menu item for selection
 SelectionMenuItem mathEquationItem = SelectionMenuItem.node(
-  getName: () => LocaleKeys.document_plugins_mathEquation_name.tr(),
+  getName: LocaleKeys.document_plugins_mathEquation_name.tr,
   iconData: Icons.text_fields_rounded,
   keywords: ['tex, latex, katex', 'math equation', 'formula'],
   nodeBuilder: (editorState, _) => mathEquationNode(),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/mention/slash_menu_items.dart

@@ -5,7 +5,7 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:easy_localization/easy_localization.dart';
 
 SelectionMenuItem dateMenuItem = SelectionMenuItem(
-  getName: () => LocaleKeys.document_plugins_date.tr(),
+  getName: LocaleKeys.document_plugins_insertDate.tr,
   icon: (_, isSelected, style) => FlowySvg(
     FlowySvgs.date_s,
     color: isSelected

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/openai/widgets/auto_completion_node_widget.dart

@@ -43,7 +43,7 @@ Node autoCompletionNode({
 }
 
 SelectionMenuItem autoGeneratorMenuItem = SelectionMenuItem.node(
-  getName: () => LocaleKeys.document_plugins_autoGeneratorMenuItemName.tr(),
+  getName: LocaleKeys.document_plugins_autoGeneratorMenuItemName.tr,
   iconData: Icons.generating_tokens,
   keywords: ['ai', 'openai' 'writer', 'autogenerator'],
   nodeBuilder: (editorState, _) {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/outline/outline_block_component.dart

@@ -19,7 +19,7 @@ class OutlineBlockKeys {
 
 // defining the callout block menu item for selection
 SelectionMenuItem outlineItem = SelectionMenuItem.node(
-  getName: () => LocaleKeys.document_selectionMenu_outline.tr(),
+  getName: LocaleKeys.document_selectionMenu_outline.tr,
   iconData: Icons.list_alt,
   keywords: ['outline', 'table of contents'],
   nodeBuilder: (editorState, _) => outlineBlockNode(),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_component.dart

@@ -46,7 +46,7 @@ Node toggleListBlockNode({
 
 // defining the toggle list block menu item
 SelectionMenuItem toggleListBlockItem = SelectionMenuItem.node(
-  getName: () => LocaleKeys.document_plugins_toggleList.tr(),
+  getName: LocaleKeys.document_plugins_toggleList.tr,
   iconData: Icons.arrow_right,
   keywords: ['collapsed list', 'toggle list', 'list'],
   nodeBuilder: (editorState, _) => toggleListBlockNode(),

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/toggle/toggle_block_shortcut_event.dart

@@ -110,7 +110,7 @@ CharacterShortcutEvent insertChildNodeInsideToggleList = CharacterShortcutEvent(
 // toggle the todo list
 final CommandShortcutEvent toggleToggleListCommand = CommandShortcutEvent(
   key: 'toggle the toggle list',
-  getDescription: () => 'Toggle the toggle list',
+  getDescription: () => AppFlowyEditorL10n.current.cmdToggleTodoList,
   command: 'ctrl+enter',
   macOSCommand: 'cmd+enter',
   handler: _toggleToggleListCommandHandler,

frontend/appflowy_flutter/lib/workspace/application/settings/appearance/appearance_cubit.dart

@@ -10,6 +10,8 @@ import 'package:appflowy/workspace/application/settings/appearance/base_appearan
 import 'package:appflowy_backend/log.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/date_time.pbenum.dart';
 import 'package:appflowy_backend/protobuf/flowy-user/user_setting.pb.dart';
+import 'package:appflowy_editor/appflowy_editor.dart'
+    show AppFlowyEditorLocalizations;
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flowy_infra/theme.dart';
 import 'package:flutter/material.dart';
@@ -193,6 +195,9 @@ class AppearanceSettingsCubit extends Cubit<AppearanceSettingsState> {
       Log.warn('Catch error in setLocale: $e}');
     });
 
+    // Sync the app's locale with the editor (initialization and update)
+    AppFlowyEditorLocalizations.load(newLocale);
+
     if (state.locale != newLocale) {
       _appearanceSettings.locale.languageCode = newLocale.languageCode;
       _appearanceSettings.locale.countryCode = newLocale.countryCode ?? "";

frontend/appflowy_flutter/lib/workspace/application/settings/shortcuts/settings_shortcuts_cubit.dart

@@ -39,8 +39,10 @@ class ShortcutsCubit extends Cubit<ShortcutsState> {
         commandShortcutEvents,
         customizeShortcuts,
       );
+
       //sort the shortcuts
       commandShortcutEvents.sort((a, b) => a.key.compareTo(b.key));
+
       emit(
         state.copyWith(
           status: ShortcutsStatus.success,

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/emoji_picker/emoji_menu_item.dart

@@ -8,7 +8,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 
 SelectionMenuItem emojiMenuItem = SelectionMenuItem(
-  getName: () => LocaleKeys.document_plugins_emoji.tr(),
+  getName: LocaleKeys.document_plugins_emoji.tr,
   icon: (editorState, onSelected, style) => SelectableIconWidget(
     icon: Icons.emoji_emotions_outlined,
     isSelected: onSelected,

frontend/appflowy_flutter/lib/workspace/presentation/settings/widgets/settings_customize_shortcuts_view.dart

@@ -117,7 +117,7 @@ class ShortcutsListTile extends StatelessWidget {
             Expanded(
               child: FlowyText.medium(
                 key: Key(shortcutEvent.key),
-                shortcutEvent.key.capitalize(),
+                shortcutEvent.description!.capitalize(),
                 overflow: TextOverflow.ellipsis,
               ),
             ),

frontend/resources/translations/en.json

@@ -514,7 +514,17 @@
       "shortcutIsAlreadyUsed": "This shortcut is already used for: {conflict}",
       "resetToDefault": "Reset to default keybindings",
       "couldNotLoadErrorMsg": "Could not load shortcuts, Try again",
-      "couldNotSaveErrorMsg": "Could not save shortcuts, Try again"
+      "couldNotSaveErrorMsg": "Could not save shortcuts, Try again",
+      "commands": {
+        "codeBlockNewParagraph": "Insert a new paragraph next to the code block",
+        "codeBlockAddTwoSpaces": "Insert two spaces at the line start in code block",
+        "codeBlockDeleteTwoSpaces": "Delete two spaces at the line start in code block",
+        "codeBlockSelectAll": "Select all content inside a code block",
+        "codeBlockPasteText": "Paste text in codeblock",
+        "textAlignLeft": "Align text to the left",
+        "textAlignCenter": "Align text to the center",
+        "textAlignRight": "Align text to the right"
+      }
     },
     "mobile": {
       "personalInfo": "Personal Information",
@@ -835,6 +845,8 @@
       "discardResponse": "Do you want to discard the AI responses?",
       "createInlineMathEquation": "Create equation",
       "fonts": "Fonts",
+      "insertDate": "Insert date",
+      "emoji": "Emoji",
       "toggleList": "Toggle list",
       "quoteList": "Quote list",
       "numberedList": "Numbered list",