chore: localize more items (#680)

* fix: localize tooltips from toolbar items

* fix: Localize shortcut descriptions

* refactor: reorder able menu entries

* fix: update translation if locale changes

* feat: translate all pt-BR

* docs: explain how to change locales

* ci: fix failing unit test

assets/images/toolbar/text_direction_ltr.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.4974 12.8863C11.3319 13.0609 11.0574 13.072 10.8782 12.9113V12.9113C10.6893 12.7419 10.6805 12.4488 10.8588 12.2683L11.4771 11.6424H3.68272C3.41613 11.6424 3.20001 11.4263 3.20001 11.1597V11.1597C3.20001 10.894 3.41474 10.6783 3.68044 10.677L11.4 10.6405L10.8419 10.0824C10.6595 9.90005 10.6762 9.59963 10.8776 9.4385V9.4385C11.045 9.30458 11.2852 9.3134 11.4423 9.45923L12.8963 10.8087C13.0635 10.9639 13.0719 11.2257 12.9149 11.3912L11.4974 12.8863Z" fill="white"/>
+<path d="M6.85 9.89999C6.54624 9.89999 6.30001 9.65375 6.30001 9.35V7.72187C5.62308 7.72187 5.08206 7.38204 4.6 6.89999C4.11795 6.41794 4 5.97691 4 5.29999C4 4.62307 4.21795 4.10513 4.70001 3.62307C5.03075 3.29233 5.92308 3 6.60001 3H10.8346C11.1469 3 11.4 3.25313 11.4 3.56538V3.56538C11.4 3.87764 11.1469 4.13077 10.8346 4.13077H9.8V9.36152C9.8 9.65891 9.55892 9.89999 9.26153 9.89999V9.89999C8.96414 9.89999 8.72306 9.65891 8.72306 9.36152V4.13077H7.39999V9.35C7.39999 9.65375 7.15375 9.89999 6.85 9.89999V9.89999ZM6.30001 6.5923V4.13077C5.96154 4.13077 5.63332 4.25128 5.39229 4.4923C5.15127 4.73333 5.03075 5.02307 5.03075 5.36154C5.03075 5.7 5.15127 5.98974 5.39229 6.23077C5.63332 6.47179 5.96154 6.5923 6.30001 6.5923Z" fill="white"/>
+</svg>

assets/images/toolbar/text_direction_rtl.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.70001 9.35C6.70001 9.65375 6.94625 9.89999 7.25 9.89999C7.55375 9.89999 7.79999 9.65375 7.79999 9.35V4.13077H9.12307V9.36152C9.12307 9.65891 9.36415 9.89999 9.66154 9.89999C9.95893 9.89999 10.2 9.65891 10.2 9.36152V4.13077H11.2346C11.5469 4.13077 11.8 3.87764 11.8 3.56538C11.8 3.25313 11.5469 3 11.2346 3H7.00001C6.32309 3 5.43076 3.29233 5.10001 3.62307C4.61796 4.10513 4.40001 4.62307 4.40001 5.29999C4.40001 5.97691 4.51796 6.41794 5.00001 6.89999C5.48206 7.38204 6.02309 7.72187 6.70001 7.72187V9.35ZM5.7923 4.4923C6.03333 4.25128 6.36155 4.13077 6.70001 4.13077V6.5923C6.36155 6.5923 6.03333 6.47179 5.7923 6.23077C5.55128 5.98974 5.43076 5.7 5.43076 5.36154C5.43076 5.02307 5.55128 4.73333 5.7923 4.4923Z" fill="white"/>
+<path d="M5.32179 9.49412C5.14266 9.33343 4.86817 9.34453 4.7026 9.51916L3.2851 11.0142C3.12814 11.1798 3.13651 11.4416 3.30372 11.5968L4.75774 12.9462C4.91486 13.0921 5.15507 13.1009 5.32247 12.967C5.52387 12.8058 5.54051 12.5054 5.35813 12.323L4.80002 11.7649L12.5196 11.7284C12.7853 11.7272 13 11.5114 13 11.2457C13 10.9792 12.7839 10.763 12.5173 10.763L4.72295 10.763L5.34119 10.1372C5.51955 9.95662 5.51071 9.6636 5.32179 9.49412Z" fill="white"/>
+</svg>

documentation/translation.md

@@ -13,4 +13,47 @@ Translation files are located in: `lib/l10n/`
 1. Install the Visual Studio Code plugin: [Flutter intl](https://marketplace.visualstudio.com/items?itemName=localizely.flutter-intl)
 2. Copy the `intl_en.arb` as a base translation and rename the new file to `intl_<new_locale>.arb`
 3. Modify the new translation file.
-4. Save the file and the translation will be generated automatically.
+4. Save the file and the translation will be generated automatically.
+
+## Modify the locale of the editor
+
+If you want to try the changes you made, you can modify the locale of the editor by changing the `supportedLocales` variable in [example/lib/main.dart](../example/lib/main.dart) to the locale you want to test.
+
+```dart
+// example/lib/main.dart
+// Change this:
+supportedLocales: AppFlowyEditorLocalizations.delegate.supportedLocales,
+// to the locale you want to test, for example fr_FR:
+supportedLocales: const [Locale('fr', 'FR')],
+```
+
+Or you can do it interactively by adding a Floating Action Button to the page. Edit [example/lib/home_page.dart](../example/lib/home_page.dart):
+
+> You need to rebuild to see the changes of the translated strings.
+
+```dart
+// example/lib/home_page.dart
+class _HomePageState extends State<HomePage> {
+  // other code...
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      // other code...
+      floatingActionButton: FloatingActionButton(
+        onPressed: toggleLocale,
+        child: const Icon(Icons.language),
+      ),
+    );
+  }
+
+  void toggleLocale() {
+    final locale = Intl.getCurrentLocale();
+    if (locale == 'en_US') {
+      // Change to the locale you want to test
+      AppFlowyEditorLocalizations.load(const Locale('pt', 'BR')); 
+    } else {
+      AppFlowyEditorLocalizations.load(const Locale('en', 'US'));
+    }
+  }
+```

example/lib/main.dart

@@ -19,7 +19,7 @@ class MyApp extends StatelessWidget {
         GlobalWidgetsLocalizations.delegate,
         AppFlowyEditorLocalizations.delegate,
       ],
-      supportedLocales: const [Locale('en', 'US')],
+      supportedLocales: AppFlowyEditorLocalizations.delegate.supportedLocales,
       debugShowCheckedModeBanner: false,
       home: const HomePage(),
       theme: ThemeData.light(useMaterial3: true),

lib/l10n/intl_en.arb

@@ -1,79 +1,42 @@
 {
   "@@locale": "en",
   "bold": "Bold",
-  "@bold": {},
   "bulletedList": "Bulleted List",
-  "@bulletedList": {},
   "checkbox": "Checkbox",
-  "@checkbox": {},
   "embedCode": "Embed Code",
-  "@embedCode": {},
   "heading1": "H1",
-  "@heading1": {},
   "heading2": "H2",
-  "@heading2": {},
   "heading3": "H3",
-  "@heading3": {},
   "highlight": "Highlight",
-  "@highlight": {},
   "color": "Color",
-  "@color": {},
   "image": "Image",
-  "@image": {},
   "italic": "Italic",
-  "@italic": {},
   "link": "Link",
-  "@link": {},
   "numberedList": "Numbered List",
-  "@numberedList": {},
   "quote": "Quote",
-  "@quote": {},
   "strikethrough": "Strikethrough",
-  "@strikethrough": {},
   "text": "Text",
-  "@text": {},
   "underline": "Underline",
-  "@underline": {},
   "fontColorDefault": "Default",
-  "@fontColorDefault": {},
   "fontColorGray": "Gray",
-  "@fontColorGray": {},
   "fontColorBrown": "Brown",
-  "@fontColorBrown": {},
   "fontColorOrange": "Orange",
-  "@fontColorOrange": {},
   "fontColorYellow": "Yellow",
-  "@fontColorYellow": {},
   "fontColorGreen": "Green",
-  "@fontColorGreen": {},
   "fontColorBlue": "Blue",
-  "@fontColorBlue": {},
   "fontColorPurple": "Purple",
-  "@fontColorPurple": {},
   "fontColorPink": "Pink",
-  "@fontColorPink": {},
   "fontColorRed": "Red",
-  "@fontColorRed": {},
   "backgroundColorDefault": "Default background",
-  "@backgroundColorDefault": {},
   "backgroundColorGray": "Gray background",
-  "@backgroundColorGray": {},
   "backgroundColorBrown": "Brown background",
-  "@backgroundColorBrown": {},
   "backgroundColorOrange": "Orange background",
-  "@backgroundColorOrange": {},
   "backgroundColorYellow": "Yellow background",
-  "@backgroundColorYellow": {},
   "backgroundColorGreen": "Green background",
-  "@backgroundColorGreen": {},
   "backgroundColorBlue": "Blue background",
-  "@backgroundColorBlue": {},
   "backgroundColorPurple": "Purple background",
-  "@backgroundColorPurple": {},
   "backgroundColorPink": "Pink background",
-  "@backgroundColorPink": {},
   "backgroundColorRed": "Red background",
-  "@backgroundColorRed": {},
   "done": "Done",
   "cancel": "Cancel",
   "tint1": "Tint 1",
@@ -94,6 +57,8 @@
   "lightLightTint7": "Green",
   "lightLightTint8": "Aqua",
   "lightLightTint9": "Blue",
+  "listItemPlaceholder": "List item",
+  "toDoPlaceholder": "To-do",
   "urlHint": "URL",
   "mobileHeading1": "Heading 1",
   "mobileHeading2": "Heading 2",
@@ -108,7 +73,7 @@
   "linkText": "Text",
   "linkTextHint": "Please enter text",
   "linkAddressHint": "Please enter URL",
-  "highlightColor": "Highlight color",
+  "highlightColor": "Highlight Color",
   "clearHighlightColor": "Clear highlight color",
   "customColor": "Custom color",
   "hexValue": "Hex value",
@@ -131,8 +96,8 @@
   "regexError": "Regex Error",
   "noFindResult": "No result",
   "emptySearchBoxHint": "Enter a pattern",
-  "uploadImage": "Upload Image",
+  "uploadImage": "Upload",
-  "urlImage": "URL Image",
+  "urlImage": "URL",
   "incorrectLink": "Incorrect Link",
   "upload": "Upload",
   "chooseImage": "Choose an image",
@@ -150,5 +115,16 @@
   "rowDuplicate": "Duplicate",
   "colClear": "Clear Content",
   "rowClear": "Clear Content",
-  "slashPlaceHolder": "Enter a / to insert a block, or start typing"
+  "slashPlaceHolder": "Enter a / to insert a block, or start typing",
+  "textAlignLeft": "Align Left",
+  "textAlignCenter": "Align Center",
+  "textAlignRight": "Align Right",
+  "cmdDontAddNewLineInTableCell": "Don't add new line in table cell",
+  "cmdMoveToLeftCellIfItsAtStartOfCurrentCell": "Move to left cell if its at start of current cell",
+  "cmdMoveToRightCellIfItsAtTheEndOfCurrentCell": "Move to right cell if its at the end of current cell",
+  "cmdMoveToUpCellAtSameOffset": "Move to up cell at same offset",
+  "cmdMoveToDownCellAtSameOffset": "Move to down cell at same offset",
+  "cmdNavigateAroundTheCellsAtSameOffset": "Navigate around the cells at same offset",
+  "cmdNavigateAroundTheCellsAtSameOffsetInReverse": "Navigate around the cells at same offset in reverse",
+  "cmdStopAtTheBeginningOfTheCell": "Stop at the beginning of the cell"
 }

lib/l10n/intl_pt_BR.arb

@@ -1,35 +1,130 @@
 {
   "@@locale": "pt-BR",
+  "addYourLink": "Adicionar seu link",
+  "auto": "Automático",
+  "backgroundColor": "Cor de fundo",
+  "backgroundColorBlue": "Fundo azul",
+  "backgroundColorBrown": "Fundo marrom",
+  "backgroundColorDefault": "Fundo padrão",
+  "backgroundColorGray": "Fundo cinza",
+  "backgroundColorGreen": "Fundo verde",
+  "backgroundColorOrange": "Fundo laranja",
+  "backgroundColorPink": "Fundo rosa",
+  "backgroundColorPurple": "Fundo roxo",
+  "backgroundColorRed": "Fundo vermelho\n",
+  "backgroundColorYellow": "Fundo amarelo",
   "bold": "Negrito",
-  "@bold": {},
   "bulletedList": "Lista de marcadores",
-  "@bulletedList": {},
+  "cancel": "Cancelar",
+  "caseSensitive": "Diferenciar maiúsculas",
   "checkbox": "Caixa de seleção",
-  "@checkbox": {},
+  "chooseImage": "Selecionar imagem",
+  "clearHighlightColor": "Limpar cor de destaque",
+  "closeFind": "Fechar",
+  "cmdDontAddNewLineInTableCell": "Não adicionar nova linha na célula",
+  "cmdMoveToDownCellAtSameOffset": "Mover para a célula abaixo na mesma posição",
+  "cmdMoveToLeftCellIfItsAtStartOfCurrentCell": "Mover para a célula à esquerda se estiver no início da célula atual",
+  "cmdMoveToRightCellIfItsAtTheEndOfCurrentCell": "Mover para a célula à direita se estiver no final da célula atual",
+  "cmdMoveToUpCellAtSameOffset": "Mover para a célula acima na mesma posição",
+  "cmdNavigateAroundTheCellsAtSameOffset": "Navegar pelas células na mesma posição",
+  "cmdNavigateAroundTheCellsAtSameOffsetInReverse": "Navegar pelas células na mesma posição (reverso)",
+  "cmdStopAtTheBeginningOfTheCell": "Parar no início da célula",
+  "colAddAfter": "Inserir à direita",
+  "colAddBefore": "Inserir à esquerda",
+  "colClear": "Limpar coluna",
+  "colDuplicate": "Duplicar coluna",
+  "color": "Cor",
+  "colRemove": "Deletar coluna",
+  "copy": "Copiar",
+  "copyLink": "Copiar link",
+  "customColor": "Cor personalizada",
+  "cut": "Cortar",
+  "divider": "Separador",
+  "done": "Concluir",
+  "editLink": "Editar link",
   "embedCode": "Código incorporado",
-  "@embedCode": {},
+  "emptySearchBoxHint": "Localizar...",
-  "heading1": "H1",
+  "find": "Procurar",
-  "@heading1": {},
+  "fontColorBlue": "Azul",
-  "heading2": "H2",
+  "fontColorBrown": "Marrom",
-  "@heading2": {},
+  "fontColorDefault": "Padrão",
-  "heading3": "H3",
+  "fontColorGray": "Cinza",
-  "@heading3": {},
+  "fontColorGreen": "Verde",
+  "fontColorOrange": "Laranja",
+  "fontColorPink": "Rosa",
+  "fontColorPurple": "Roxo",
+  "fontColorRed": "Vermelho",
+  "fontColorYellow": "Amarelo",
+  "heading1": "Cabeçalho 1",
+  "heading2": "Cabeçalho 2",
+  "heading3": "Cabeçalho 3",
+  "hexValue": "HEX",
   "highlight": "Destacar",
-  "@highlight": {},
+  "highlightColor": "Cor de destaque",
   "image": "Imagem",
-  "@image": {},
+  "imageLoadFailed": "Não foi possível carregar a imagem",
+  "incorrectLink": "Link incorreto",
   "italic": "Itálico",
-  "@italic": {},
+  "lightLightTint1": "Roxo",
+  "lightLightTint2": "Rosa",
+  "lightLightTint3": "Rosa claro",
+  "lightLightTint4": "Laranja",
+  "lightLightTint5": "Amarelo",
+  "lightLightTint6": "Lima",
+  "lightLightTint7": "Verde",
+  "lightLightTint8": "Aqua",
+  "lightLightTint9": "Azul",
   "link": "Link",
-  "@link": {},
+  "linkAddressHint": "Insira a URL",
+  "linkText": "Texto",
+  "linkTextHint": "Insira o rótulo",
+  "listItemPlaceholder": "Item de lista",
+  "toDoPlaceholder": "Tarefa a fazer",
+  "loading": "Carregando",
+  "ltr": "Esquerda para Direita",
+  "mobileHeading1": "Cabeçalho 1",
+  "mobileHeading2": "Cabeçalho 2",
+  "mobileHeading3": "Cabeçalho 3",
+  "nextMatch": "Próximo",
+  "noFindResult": "Nenhum resultado encontrado",
   "numberedList": "Lista numerada",
-  "@numberedList": {},
+  "opacity": "Opacidade",
-  "quote": "Citar",
+  "openLink": "Abrir link",
-  "@quote": {},
+  "paste": "Colar",
+  "previousMatch": "Anterior",
+  "quote": "Citação",
+  "regex": "Regex",
+  "regexError": "Erro de Regex",
+  "removeLink": "Remover link",
+  "replace": "Substituir",
+  "replaceAll": "Substituir tudo",
+  "resetToDefaultColor": "Redefinir para cor padrão",
+  "rowAddAfter": "Inserir abaixo",
+  "rowAddBefore": "Inserir acima",
+  "rowClear": "Limpar linha",
+  "rowDuplicate": "Duplicar linha",
+  "rowRemove": "Deletar linha",
+  "rtl": "Direita para Esquerda",
+  "slashPlaceHolder": "Insira / para adicionar um bloco ou comece a escrever",
   "strikethrough": "Rasurar",
-  "@strikethrough": {},
+  "table": "Tabela",
   "text": "Texto",
-  "@text": {},
+  "textAlignCenter": "Alinhar ao centro",
+  "textAlignLeft": "Alinhar à esquerda",
+  "textAlignRight": "Alinhar à direita",
+  "textColor": "Cor do texto",
+  "tint1": "Matiz 1",
+  "tint2": "Matiz 2",
+  "tint3": "Matiz 3",
+  "tint4": "Matiz 4",
+  "tint5": "Matiz 5",
+  "tint6": "Matiz 6",
+  "tint7": "Matiz 7",
+  "tint8": "Matiz 8",
+  "tint9": "Matiz 9",
   "underline": "Sublinhar",
-  "@underline": {}
+  "upload": "Enviar",
-}
+  "uploadImage": "Enviar",
+  "urlHint": "URL",
+  "urlImage": "URL"
+}

lib/l10n/intl_pt_PT.arb

@@ -8,11 +8,11 @@
   "@checkbox": {},
   "embedCode": "Código embutido",
   "@embedCode": {},
-  "heading1": "Cabeçallho 1",
+  "heading1": "Cabeçalho 1",
   "@heading1": {},
-  "heading2": "Cabeçallho 2",
+  "heading2": "Cabeçalho 2",
   "@heading2": {},
-  "heading3": "Cabeçallho 3",
+  "heading3": "Cabeçalho 3",
   "@heading3": {},
   "highlight": "realçar",
   "@highlight": {},
@@ -31,5 +31,21 @@
   "text": "texto",
   "@text": {},
   "underline": "sublinhado",
-  "@underline": {}
+  "@underline": {},
-}
+  "ltr": "Esquerda para Direita",
+  "rtl": "Direita para Esquerda",
+  "auto": "Automático",
+  "highlightColor": "Cor de destaque",
+  "textColor": "Cor do texto",
+  "textAlignLeft": "Alinhar à esquerda",
+  "textAlignCenter": "Alinhar ao centro",
+  "textAlignRight": "Alinhar à direita",
+  "cmdDontAddNewLineInTableCell": "Não adicionar nova linha na célula",
+  "cmdMoveToLeftCellIfItsAtStartOfCurrentCell": "Mover para a célula à esquerda se estiver no início da célula atual",
+  "cmdMoveToRightCellIfItsAtTheEndOfCurrentCell": "Mover para a célula à direita se estiver no final da célula atual",
+  "cmdMoveToUpCellAtSameOffset": "Mover para a célula acima na mesma posição",
+  "cmdMoveToDownCellAtSameOffset": "Mover para a célula abaixo na mesma posição",
+  "cmdNavigateAroundTheCellsAtSameOffset": "Navegar pelas células na mesma posição",
+  "cmdNavigateAroundTheCellsAtSameOffsetInReverse": "Navegar pelas células na mesma posição (reverso)",
+  "cmdStopAtTheBeginningOfTheCell": "Parar no início da célula"
+}

lib/src/editor/block_component/divider_block_component/divider_menu_item.dart

@@ -2,7 +2,7 @@ import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/material.dart';
 
 SelectionMenuItem dividerMenuItem = SelectionMenuItem(
-  name: AppFlowyEditorL10n.current.divider,
+  getName: () => AppFlowyEditorL10n.current.divider,
   icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
     icon: Icons.horizontal_rule,
     isSelected: isSelected,

lib/src/editor/block_component/standard_block_components.dart

@@ -15,7 +15,7 @@ final Map<String, BlockComponentBuilder> standardBlockComponentBuilderMap = {
   ),
   TodoListBlockKeys.type: TodoListBlockComponentBuilder(
     configuration: standardBlockComponentConfiguration.copyWith(
-      placeholderText: (_) => 'To-do',
+      placeholderText: (_) => AppFlowyEditorL10n.current.toDoPlaceholder,
     ),
     toggleChildrenTriggers: [
       LogicalKeyboardKey.shift,
@@ -25,17 +25,17 @@ final Map<String, BlockComponentBuilder> standardBlockComponentBuilderMap = {
   ),
   BulletedListBlockKeys.type: BulletedListBlockComponentBuilder(
     configuration: standardBlockComponentConfiguration.copyWith(
-      placeholderText: (_) => 'List',
+      placeholderText: (_) => AppFlowyEditorL10n.current.listItemPlaceholder,
     ),
   ),
   NumberedListBlockKeys.type: NumberedListBlockComponentBuilder(
     configuration: standardBlockComponentConfiguration.copyWith(
-      placeholderText: (_) => 'List',
+      placeholderText: (_) => AppFlowyEditorL10n.current.listItemPlaceholder,
     ),
   ),
   QuoteBlockKeys.type: QuoteBlockComponentBuilder(
     configuration: standardBlockComponentConfiguration.copyWith(
-      placeholderText: (_) => 'Quote',
+      placeholderText: (_) => AppFlowyEditorL10n.current.quote,
     ),
   ),
   HeadingBlockKeys.type: HeadingBlockComponentBuilder(

lib/src/editor/block_component/table_block_component/table_action_menu.dart

@@ -38,17 +38,6 @@ void showActionMenu(
         width: 200,
         height: 230,
         children: [
-          _menuItem(
-              context,
-              dir == TableDirection.col
-                  ? AppFlowyEditorL10n.current.colAddAfter
-                  : AppFlowyEditorL10n.current.rowAddAfter,
-              dir == TableDirection.col
-                  ? Icons.last_page
-                  : Icons.vertical_align_bottom, () {
-            TableActions.add(node, position + 1, editorState, dir);
-            dismissOverlay();
-          }),
           _menuItem(
               context,
               dir == TableDirection.col
@@ -60,6 +49,17 @@ void showActionMenu(
             TableActions.add(node, position, editorState, dir);
             dismissOverlay();
           }),
+          _menuItem(
+              context,
+              dir == TableDirection.col
+                  ? AppFlowyEditorL10n.current.colAddAfter
+                  : AppFlowyEditorL10n.current.rowAddAfter,
+              dir == TableDirection.col
+                  ? Icons.last_page
+                  : Icons.vertical_align_bottom, () {
+            TableActions.add(node, position + 1, editorState, dir);
+            dismissOverlay();
+          }),
           _menuItem(
               context,
               dir == TableDirection.col

lib/src/editor/block_component/table_block_component/table_block_component.dart

@@ -251,7 +251,7 @@ class _TableBlockComponentWidgetState extends State<TableBlockComponentWidget>
 }
 
 SelectionMenuItem tableMenuItem = SelectionMenuItem(
-  name: AppFlowyEditorL10n.current.table,
+  getName: () => AppFlowyEditorL10n.current.table,
   icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
     icon: Icons.table_view,
     isSelected: isSelected,

lib/src/editor/block_component/table_block_component/table_commands.dart

@@ -15,48 +15,62 @@ final List<CommandShortcutEvent> tableCommands = [
 
 final CommandShortcutEvent _enterInTableCell = CommandShortcutEvent(
   key: 'Don\'t add new line in table cell',
+  getDescription: () => AppFlowyEditorL10n.current.cmdDontAddNewLineInTableCell,
   command: 'enter',
   handler: _enterInTableCellHandler,
 );
 
 final CommandShortcutEvent _leftInTableCell = CommandShortcutEvent(
   key: 'Move to left cell if its at start of current cell',
+  getDescription: () =>
+      AppFlowyEditorL10n.current.cmdMoveToLeftCellIfItsAtStartOfCurrentCell,
   command: 'arrow left',
   handler: _leftInTableCellHandler,
 );
 
 final CommandShortcutEvent _rightInTableCell = CommandShortcutEvent(
   key: 'Move to right cell if its at the end of current cell',
+  getDescription: () =>
+      AppFlowyEditorL10n.current.cmdMoveToRightCellIfItsAtTheEndOfCurrentCell,
   command: 'arrow right',
   handler: _rightInTableCellHandler,
 );
 
 final CommandShortcutEvent _upInTableCell = CommandShortcutEvent(
   key: 'Move to up cell at same offset',
+  getDescription: () => AppFlowyEditorL10n.current.cmdMoveToUpCellAtSameOffset,
   command: 'arrow up',
   handler: _upInTableCellHandler,
 );
 
 final CommandShortcutEvent _downInTableCell = CommandShortcutEvent(
   key: 'Move to down cell at same offset',
+  getDescription: () =>
+      AppFlowyEditorL10n.current.cmdMoveToDownCellAtSameOffset,
   command: 'arrow down',
   handler: _downInTableCellHandler,
 );
 
 final CommandShortcutEvent _tabInTableCell = CommandShortcutEvent(
   key: 'Navigate around the cells at same offset',
+  getDescription: () =>
+      AppFlowyEditorL10n.current.cmdNavigateAroundTheCellsAtSameOffset,
   command: 'tab',
   handler: _tabInTableCellHandler,
 );
 
 final CommandShortcutEvent _shiftTabInTableCell = CommandShortcutEvent(
   key: 'Navigate around the cells at same offset in reverse',
+  getDescription: () =>
+      AppFlowyEditorL10n.current.cmdNavigateAroundTheCellsAtSameOffsetInReverse,
   command: 'shift+tab',
   handler: _shiftTabInTableCellHandler,
 );
 
 final CommandShortcutEvent _backSpaceInTableCell = CommandShortcutEvent(
   key: 'Stop at the beginning of the cell',
+  getDescription: () =>
+      AppFlowyEditorL10n.current.cmdStopAtTheBeginningOfTheCell,
   command: 'backspace',
   handler: _backspaceInTableCellHandler,
 );

lib/src/editor/editor_component/service/shortcuts/command_shortcut_event.dart

@@ -11,10 +11,11 @@ class CommandShortcutEvent {
     required this.key,
     required this.command,
     required this.handler,
+    getDescription,
     String? windowsCommand,
     String? macOSCommand,
     String? linuxCommand,
-  }) {
+  }) : _getDescription = getDescription {
     updateCommand(
       command: command,
       windowsCommand: windowsCommand,
@@ -46,11 +47,16 @@ class CommandShortcutEvent {
   ///
   String command;
 
+  /// Callback to return the localized description of the command.
+  final String Function()? _getDescription;
+
   final CommandShortcutEventHandler handler;
 
   List<Keybinding> get keybindings => _keybindings;
   List<Keybinding> _keybindings = [];
 
+  String get description => _getDescription != null ? _getDescription!() : key;
+
   void updateCommand({
     String? command,
     String? windowsCommand,

lib/src/editor/selection_menu/selection_menu_service.dart

@@ -238,7 +238,7 @@ class SelectionMenu extends SelectionMenuService {
 
 final List<SelectionMenuItem> standardSelectionMenuItems = [
   SelectionMenuItem(
-    name: AppFlowyEditorL10n.current.text,
+    getName: () => AppFlowyEditorL10n.current.text,
     icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
       name: 'text',
       isSelected: isSelected,
@@ -250,7 +250,7 @@ final List<SelectionMenuItem> standardSelectionMenuItems = [
     },
   ),
   SelectionMenuItem(
-    name: AppFlowyEditorL10n.current.heading1,
+    getName: () => AppFlowyEditorL10n.current.heading1,
     icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
       name: 'h1',
       isSelected: isSelected,
@@ -262,7 +262,7 @@ final List<SelectionMenuItem> standardSelectionMenuItems = [
     },
   ),
   SelectionMenuItem(
-    name: AppFlowyEditorL10n.current.heading2,
+    getName: () => AppFlowyEditorL10n.current.heading2,
     icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
       name: 'h2',
       isSelected: isSelected,
@@ -274,7 +274,7 @@ final List<SelectionMenuItem> standardSelectionMenuItems = [
     },
   ),
   SelectionMenuItem(
-    name: AppFlowyEditorL10n.current.heading3,
+    getName: () => AppFlowyEditorL10n.current.heading3,
     icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
       name: 'h3',
       isSelected: isSelected,
@@ -286,7 +286,7 @@ final List<SelectionMenuItem> standardSelectionMenuItems = [
     },
   ),
   SelectionMenuItem(
-    name: AppFlowyEditorL10n.current.image,
+    getName: () => AppFlowyEditorL10n.current.image,
     icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
       name: 'image',
       isSelected: isSelected,
@@ -299,7 +299,7 @@ final List<SelectionMenuItem> standardSelectionMenuItems = [
     },
   ),
   SelectionMenuItem(
-    name: AppFlowyEditorL10n.current.bulletedList,
+    getName: () => AppFlowyEditorL10n.current.bulletedList,
     icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
       name: 'bulleted_list',
       isSelected: isSelected,
@@ -311,7 +311,7 @@ final List<SelectionMenuItem> standardSelectionMenuItems = [
     },
   ),
   SelectionMenuItem(
-    name: AppFlowyEditorL10n.current.numberedList,
+    getName: () => AppFlowyEditorL10n.current.numberedList,
     icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
       name: 'number',
       isSelected: isSelected,
@@ -323,7 +323,7 @@ final List<SelectionMenuItem> standardSelectionMenuItems = [
     },
   ),
   SelectionMenuItem(
-    name: AppFlowyEditorL10n.current.checkbox,
+    getName: () => AppFlowyEditorL10n.current.checkbox,
     icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
       name: 'checkbox',
       isSelected: isSelected,
@@ -335,7 +335,7 @@ final List<SelectionMenuItem> standardSelectionMenuItems = [
     },
   ),
   SelectionMenuItem(
-    name: AppFlowyEditorL10n.current.quote,
+    getName: () => AppFlowyEditorL10n.current.quote,
     icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
       name: 'quote',
       isSelected: isSelected,

lib/src/editor/selection_menu/selection_menu_widget.dart

@@ -13,11 +13,11 @@ typedef SelectionMenuItemHandler = void Function(
 /// Selection Menu Item
 class SelectionMenuItem {
   SelectionMenuItem({
-    required this.name,
+    required String Function() getName,
     required this.icon,
     required this.keywords,
     required SelectionMenuItemHandler handler,
-  }) {
+  }) : _getName = getName {
     this.handler = (editorState, menuService, context) {
       if (deleteSlash) {
         _deleteSlash(editorState);
@@ -29,13 +29,15 @@ class SelectionMenuItem {
     };
   }
 
-  final String name;
+  final String Function() _getName;
   final Widget Function(
     EditorState editorState,
     bool onSelected,
     SelectionMenuStyle style,
   ) icon;
 
+  String get name => _getName();
+
   /// Customizes keywords for item.
   ///
   /// The keywords are used to quickly retrieve items.
@@ -97,7 +99,7 @@ class SelectionMenuItem {
     )? updateSelection,
   }) {
     return SelectionMenuItem(
-      name: name,
+      getName: () => name,
       icon: (editorState, onSelected, style) => Icon(
         iconData,
         color: onSelected

lib/src/editor/toolbar/desktop/items/alignment_toolbar_items.dart

@@ -1,22 +1,20 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/src/editor/toolbar/desktop/items/utils/tooltip_util.dart';
 
 final List<ToolbarItem> alignmentItems = [
   _AlignmentToolbarItem(
     id: 'align_left',
     name: 'left',
-    tooltip: 'left',
     align: 'left',
   ),
   _AlignmentToolbarItem(
     id: 'align_center',
     name: 'center',
-    tooltip: 'center',
     align: 'center',
   ),
   _AlignmentToolbarItem(
     id: 'align_right',
     name: 'right',
-    tooltip: 'right',
     align: 'right',
   ),
 ];
@@ -25,7 +23,6 @@ class _AlignmentToolbarItem extends ToolbarItem {
   _AlignmentToolbarItem({
     required String id,
     required String name,
-    required String tooltip,
     required String align,
   }) : super(
           id: 'editor.$id',
@@ -43,7 +40,7 @@ class _AlignmentToolbarItem extends ToolbarItem {
               isHighlight: isHighlight,
               highlightColor: highlightColor,
               iconColor: iconColor,
-              tooltip: tooltip,
+              tooltip: getTooltipText(id),
               onPressed: () => editorState.updateNode(
                 selection,
                 (node) => node.copyWith(

lib/src/editor/toolbar/desktop/items/format_toolbar_items.dart

@@ -5,32 +5,22 @@ final List<ToolbarItem> markdownFormatItems = [
   _FormatToolbarItem(
     id: 'underline',
     name: 'underline',
-    tooltip:
-        '${AppFlowyEditorL10n.current.underline}${shortcutTooltips('⌘ + U', 'CTRL + U', 'CTRL + U')}',
   ),
   _FormatToolbarItem(
     id: 'bold',
     name: 'bold',
-    tooltip:
-        '${AppFlowyEditorL10n.current.bold}${shortcutTooltips('⌘ + B', 'CTRL + B', 'CTRL + B')}',
   ),
   _FormatToolbarItem(
     id: 'italic',
     name: 'italic',
-    tooltip:
-        '${AppFlowyEditorL10n.current.italic}${shortcutTooltips('⌘ + I', 'CTRL + I', 'CTRL + I')}',
   ),
   _FormatToolbarItem(
     id: 'strikethrough',
     name: 'strikethrough',
-    tooltip:
-        '${AppFlowyEditorL10n.current.strikethrough}${shortcutTooltips('⌘ + SHIFT + S', 'CTRL + SHIFT + S', 'CTRL + SHIFT + S')}',
   ),
   _FormatToolbarItem(
     id: 'code',
     name: 'code',
-    tooltip:
-        '${AppFlowyEditorL10n.current.embedCode}${shortcutTooltips('⌘ + E', 'CTRL + E', 'CTRL + E')}',
   ),
 ];
 
@@ -38,7 +28,6 @@ class _FormatToolbarItem extends ToolbarItem {
   _FormatToolbarItem({
     required String id,
     required String name,
-    required String tooltip,
   }) : super(
           id: 'editor.$id',
           group: 2,
@@ -56,7 +45,7 @@ class _FormatToolbarItem extends ToolbarItem {
               isHighlight: isHighlight,
               highlightColor: highlightColor,
               iconColor: iconColor,
-              tooltip: tooltip,
+              tooltip: getTooltipText(id),
               onPressed: () => editorState.toggleAttribute(name),
             );
           },

lib/src/editor/toolbar/desktop/items/text_direction_toolbar_items.dart

@@ -1,23 +1,21 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
+import 'package:appflowy_editor/src/editor/toolbar/desktop/items/utils/tooltip_util.dart';
 
 final List<ToolbarItem> textDirectionItems = [
   _TextDirectionToolbarItem(
     id: 'text_direction_auto',
     name: blockComponentTextDirectionAuto,
-    tooltip: AppFlowyEditorL10n.current.auto,
     iconName: 'text_direction_auto',
   ),
   _TextDirectionToolbarItem(
     id: 'text_direction_ltr',
     name: blockComponentTextDirectionLTR,
-    tooltip: AppFlowyEditorL10n.current.ltr,
+    iconName: 'text_direction_ltr',
-    iconName: 'text_direction_left',
   ),
   _TextDirectionToolbarItem(
     id: 'text_direction_rtl',
     name: blockComponentTextDirectionRTL,
-    tooltip: AppFlowyEditorL10n.current.rtl,
+    iconName: 'text_direction_rtl',
-    iconName: 'text_direction_right',
   ),
 ];
 
@@ -25,7 +23,6 @@ class _TextDirectionToolbarItem extends ToolbarItem {
   _TextDirectionToolbarItem({
     required String id,
     required String name,
-    required String tooltip,
     required String iconName,
   }) : super(
           id: 'editor.$id',
@@ -42,7 +39,7 @@ class _TextDirectionToolbarItem extends ToolbarItem {
               isHighlight: isHighlight,
               highlightColor: highlightColor,
               iconColor: iconColor,
-              tooltip: tooltip,
+              tooltip: getTooltipText(id),
               onPressed: () => editorState.updateNode(
                 selection,
                 (node) => node.copyWith(

lib/src/editor/toolbar/desktop/items/utils/tooltip_util.dart

@@ -1,5 +1,6 @@
 import 'dart:io';
 
+import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/foundation.dart';
 
 String shortcutTooltips(
@@ -17,3 +18,32 @@ String shortcutTooltips(
   }
   return '';
 }
+
+String getTooltipText(String id) {
+  switch (id) {
+    case 'underline':
+      return '${AppFlowyEditorL10n.current.underline}${shortcutTooltips('⌘ + U', 'CTRL + U', 'CTRL + U')}';
+    case 'bold':
+      return '${AppFlowyEditorL10n.current.bold}${shortcutTooltips('⌘ + B', 'CTRL + B', 'CTRL + B')}';
+    case 'italic':
+      return '${AppFlowyEditorL10n.current.italic}${shortcutTooltips('⌘ + I', 'CTRL + I', 'CTRL + I')}';
+    case 'strikethrough':
+      return '${AppFlowyEditorL10n.current.strikethrough}${shortcutTooltips('⌘ + SHIFT + S', 'CTRL + SHIFT + S', 'CTRL + SHIFT + S')}';
+    case 'code':
+      return '${AppFlowyEditorL10n.current.embedCode}${shortcutTooltips('⌘ + E', 'CTRL + E', 'CTRL + E')}';
+    case 'align_left':
+      return AppFlowyEditorL10n.current.textAlignLeft;
+    case 'align_center':
+      return AppFlowyEditorL10n.current.textAlignCenter;
+    case 'align_right':
+      return AppFlowyEditorL10n.current.textAlignRight;
+    case 'text_direction_auto':
+      return AppFlowyEditorL10n.current.auto;
+    case 'text_direction_ltr':
+      return AppFlowyEditorL10n.current.ltr;
+    case 'text_direction_rtl':
+      return AppFlowyEditorL10n.current.rtl;
+    default:
+      return '';
+  }
+}

lib/src/l10n/intl/messages_en.dart

@@ -55,6 +55,26 @@ class MessageLookup extends MessageLookupByLibrary {
         "clearHighlightColor":
             MessageLookupByLibrary.simpleMessage("Clear highlight color"),
         "closeFind": MessageLookupByLibrary.simpleMessage("Close"),
+        "cmdDontAddNewLineInTableCell": MessageLookupByLibrary.simpleMessage(
+            "Don\'t add new line in table cell"),
+        "cmdMoveToDownCellAtSameOffset": MessageLookupByLibrary.simpleMessage(
+            "Move to down cell at same offset"),
+        "cmdMoveToLeftCellIfItsAtStartOfCurrentCell":
+            MessageLookupByLibrary.simpleMessage(
+                "Move to left cell if its at start of current cell"),
+        "cmdMoveToRightCellIfItsAtTheEndOfCurrentCell":
+            MessageLookupByLibrary.simpleMessage(
+                "Move to right cell if its at the end of current cell"),
+        "cmdMoveToUpCellAtSameOffset": MessageLookupByLibrary.simpleMessage(
+            "Move to up cell at same offset"),
+        "cmdNavigateAroundTheCellsAtSameOffset":
+            MessageLookupByLibrary.simpleMessage(
+                "Navigate around the cells at same offset"),
+        "cmdNavigateAroundTheCellsAtSameOffsetInReverse":
+            MessageLookupByLibrary.simpleMessage(
+                "Navigate around the cells at same offset in reverse"),
+        "cmdStopAtTheBeginningOfTheCell": MessageLookupByLibrary.simpleMessage(
+            "Stop at the beginning of the cell"),
         "colAddAfter": MessageLookupByLibrary.simpleMessage("Add after"),
         "colAddBefore": MessageLookupByLibrary.simpleMessage("Add before"),
         "colClear": MessageLookupByLibrary.simpleMessage("Clear Content"),
@@ -88,7 +108,7 @@ class MessageLookup extends MessageLookupByLibrary {
         "hexValue": MessageLookupByLibrary.simpleMessage("Hex value"),
         "highlight": MessageLookupByLibrary.simpleMessage("Highlight"),
         "highlightColor":
-            MessageLookupByLibrary.simpleMessage("Highlight color"),
+            MessageLookupByLibrary.simpleMessage("Highlight Color"),
         "image": MessageLookupByLibrary.simpleMessage("Image"),
         "imageLoadFailed":
             MessageLookupByLibrary.simpleMessage("Could not load the image"),
@@ -109,6 +129,8 @@ class MessageLookup extends MessageLookupByLibrary {
         "linkText": MessageLookupByLibrary.simpleMessage("Text"),
         "linkTextHint":
             MessageLookupByLibrary.simpleMessage("Please enter text"),
+        "listItemPlaceholder":
+            MessageLookupByLibrary.simpleMessage("List item"),
         "loading": MessageLookupByLibrary.simpleMessage("Loading"),
         "ltr": MessageLookupByLibrary.simpleMessage("LTR"),
         "mobileHeading1": MessageLookupByLibrary.simpleMessage("Heading 1"),
@@ -140,6 +162,9 @@ class MessageLookup extends MessageLookupByLibrary {
         "strikethrough": MessageLookupByLibrary.simpleMessage("Strikethrough"),
         "table": MessageLookupByLibrary.simpleMessage("Table"),
         "text": MessageLookupByLibrary.simpleMessage("Text"),
+        "textAlignCenter": MessageLookupByLibrary.simpleMessage("Align Center"),
+        "textAlignLeft": MessageLookupByLibrary.simpleMessage("Align Left"),
+        "textAlignRight": MessageLookupByLibrary.simpleMessage("Align Right"),
         "textColor": MessageLookupByLibrary.simpleMessage("Text Color"),
         "tint1": MessageLookupByLibrary.simpleMessage("Tint 1"),
         "tint2": MessageLookupByLibrary.simpleMessage("Tint 2"),
@@ -150,10 +175,11 @@ class MessageLookup extends MessageLookupByLibrary {
         "tint7": MessageLookupByLibrary.simpleMessage("Tint 7"),
         "tint8": MessageLookupByLibrary.simpleMessage("Tint 8"),
         "tint9": MessageLookupByLibrary.simpleMessage("Tint 9"),
+        "toDoPlaceholder": MessageLookupByLibrary.simpleMessage("To-do"),
         "underline": MessageLookupByLibrary.simpleMessage("Underline"),
         "upload": MessageLookupByLibrary.simpleMessage("Upload"),
-        "uploadImage": MessageLookupByLibrary.simpleMessage("Upload Image"),
+        "uploadImage": MessageLookupByLibrary.simpleMessage("Upload"),
         "urlHint": MessageLookupByLibrary.simpleMessage("URL"),
-        "urlImage": MessageLookupByLibrary.simpleMessage("URL Image")
+        "urlImage": MessageLookupByLibrary.simpleMessage("URL")
       };
 }