feat: support overriding i18n (AppFlowy-IO#550)

lib/appflowy_editor.dart

@@ -10,6 +10,7 @@ export 'src/editor/block_component/rich_text/default_selectable_mixin.dart';
 // editor part, including editor component, block component, etc.
 export 'src/editor/editor.dart';
 export 'src/editor/find_replace_menu/find_and_replace.dart';
+export 'src/editor/l10n/appflowy_editor_l10n.dart';
 export 'src/editor/selection_menu/selection_menu.dart';
 // editor state
 export 'src/editor_state.dart';

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: AppFlowyEditorLocalizations.current.divider,
+  name: AppFlowyEditorL10n.current.divider,
   icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
     icon: Icons.horizontal_rule,
     isSelected: isSelected,

lib/src/editor/block_component/image_block_component/image_upload_widget.dart

@@ -133,8 +133,8 @@ class _UploadImageMenuState extends State<UploadImageMenu> {
                 height: 36,
                 child: TabBar(
                   tabs: [
-                    Tab(text: AppFlowyEditorLocalizations.current.uploadImage),
-                    Tab(text: AppFlowyEditorLocalizations.current.urlImage),
+                    Tab(text: AppFlowyEditorL10n.current.uploadImage),
+                    Tab(text: AppFlowyEditorL10n.current.urlImage),
                   ],
                   labelColor: widget.headerColor,
                   unselectedLabelColor: Colors.grey,
@@ -204,7 +204,7 @@ class _UploadImageMenuState extends State<UploadImageMenu> {
 
   Widget _buildInvalidLinkText() {
     return Text(
-      AppFlowyEditorLocalizations.current.incorrectLink,
+      AppFlowyEditorL10n.current.incorrectLink,
       style: const TextStyle(color: Colors.red, fontSize: 12),
     );
   }
@@ -240,7 +240,7 @@ class _UploadImageMenuState extends State<UploadImageMenu> {
           }
         },
         child: Text(
-          AppFlowyEditorLocalizations.current.upload,
+          AppFlowyEditorL10n.current.upload,
           style: TextStyle(
             color: Theme.of(context).colorScheme.onPrimary,
             fontSize: 14.0,
@@ -339,7 +339,7 @@ class _UploadImageMenuState extends State<UploadImageMenu> {
                       ),
                       const SizedBox(height: 8.0),
                       Text(
-                        AppFlowyEditorLocalizations.current.chooseImage,
+                        AppFlowyEditorL10n.current.chooseImage,
                         style: const TextStyle(
                           fontSize: 14.0,
                           color: Color(0xff00BCF0),

lib/src/editor/block_component/image_block_component/resizable_image.dart

@@ -147,7 +147,7 @@ class _ResizableImageState extends State<ResizableImage> {
           SizedBox.fromSize(
             size: const Size(10, 10),
           ),
-          Text(AppFlowyEditorLocalizations.current.loading),
+          Text(AppFlowyEditorL10n.current.loading),
         ],
       ),
     );
@@ -163,7 +163,7 @@ class _ResizableImageState extends State<ResizableImage> {
         borderRadius: const BorderRadius.all(Radius.circular(4.0)),
         border: Border.all(width: 1, color: Colors.black),
       ),
-      child: Text(AppFlowyEditorLocalizations.current.imageLoadFailed),
+      child: Text(AppFlowyEditorL10n.current.imageLoadFailed),
     );
   }
 

lib/src/editor/block_component/standard_block_components.dart

@@ -8,7 +8,7 @@ final Map<String, BlockComponentBuilder> standardBlockComponentBuilderMap = {
   ParagraphBlockKeys.type: ParagraphBlockComponentBuilder(
     configuration: standardBlockComponentConfiguration.copyWith(
       placeholderText: (_) => PlatformExtension.isDesktopOrWeb
-          ? AppFlowyEditorLocalizations.current.slashPlaceHolder
+          ? AppFlowyEditorL10n.current.slashPlaceHolder
           : ' ',
     ),
   ),

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

@@ -1,7 +1,7 @@
-import 'package:flutter/material.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
-import 'package:appflowy_editor/src/editor/toolbar/desktop/items/utils/overlay_util.dart';
 import 'package:appflowy_editor/src/editor/block_component/table_block_component/util.dart';
+import 'package:appflowy_editor/src/editor/toolbar/desktop/items/utils/overlay_util.dart';
+import 'package:flutter/material.dart';
 
 void showActionMenu(
   BuildContext context,
@@ -41,8 +41,8 @@ void showActionMenu(
           _menuItem(
               context,
               dir == TableDirection.col
-                  ? AppFlowyEditorLocalizations.current.colAddAfter
-                  : AppFlowyEditorLocalizations.current.rowAddAfter,
+                  ? AppFlowyEditorL10n.current.colAddAfter
+                  : AppFlowyEditorL10n.current.rowAddAfter,
               dir == TableDirection.col
                   ? Icons.last_page
                   : Icons.vertical_align_bottom, () {
@@ -52,8 +52,8 @@ void showActionMenu(
           _menuItem(
               context,
               dir == TableDirection.col
-                  ? AppFlowyEditorLocalizations.current.colAddBefore
-                  : AppFlowyEditorLocalizations.current.rowAddBefore,
+                  ? AppFlowyEditorL10n.current.colAddBefore
+                  : AppFlowyEditorL10n.current.rowAddBefore,
               dir == TableDirection.col
                   ? Icons.first_page
                   : Icons.vertical_align_top, () {
@@ -63,24 +63,24 @@ void showActionMenu(
           _menuItem(
               context,
               dir == TableDirection.col
-                  ? AppFlowyEditorLocalizations.current.colRemove
-                  : AppFlowyEditorLocalizations.current.rowRemove,
+                  ? AppFlowyEditorL10n.current.colRemove
+                  : AppFlowyEditorL10n.current.rowRemove,
               Icons.delete, () {
             TableActions.delete(node, position, editorState, dir);
             dismissOverlay();
           }),
           _menuItem(
               context,
               dir == TableDirection.col
-                  ? AppFlowyEditorLocalizations.current.colDuplicate
-                  : AppFlowyEditorLocalizations.current.rowDuplicate,
+                  ? AppFlowyEditorL10n.current.colDuplicate
+                  : AppFlowyEditorL10n.current.rowDuplicate,
               Icons.content_copy, () {
             TableActions.duplicate(node, position, editorState, dir);
             dismissOverlay();
           }),
           _menuItem(
             context,
-            AppFlowyEditorLocalizations.current.backgroundColor,
+            AppFlowyEditorL10n.current.backgroundColor,
             Icons.format_color_fill,
             () {
               final cell = dir == TableDirection.col
@@ -112,8 +112,8 @@ void showActionMenu(
           _menuItem(
               context,
               dir == TableDirection.col
-                  ? AppFlowyEditorLocalizations.current.colClear
-                  : AppFlowyEditorLocalizations.current.rowClear,
+                  ? AppFlowyEditorL10n.current.colClear
+                  : AppFlowyEditorL10n.current.rowClear,
               Icons.clear, () {
             TableActions.clear(node, position, editorState, dir);
             dismissOverlay();
@@ -180,14 +180,14 @@ void _showColorMenu(
     left: left,
     builder: (context) {
       return ColorPicker(
-        title: AppFlowyEditorLocalizations.current.highlightColor,
+        title: AppFlowyEditorL10n.current.highlightColor,
         selectedColorHex: selectedColorHex,
         colorOptions: generateHighlightColorOptions(),
         onSubmittedColorHex: (color) {
           action(color);
           dismissOverlay();
         },
-        resetText: AppFlowyEditorLocalizations.current.clearHighlightColor,
+        resetText: AppFlowyEditorL10n.current.clearHighlightColor,
         resetIconName: 'clear_highlight_color',
       );
     },

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: AppFlowyEditorLocalizations.current.table,
+  name: AppFlowyEditorL10n.current.table,
   icon: (editorState, isSelected, style) => SelectionMenuIconWidget(
     icon: Icons.table_view,
     isSelected: isSelected,

lib/src/editor/editor_component/style/mobile_text_span_decorator_for_attribute.dart

@@ -2,7 +2,6 @@ import 'dart:async';
 
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:flutter/gestures.dart';
-
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 
@@ -52,7 +51,7 @@ TextSpan mobileTextSpanDecoratorForAttribute(
           context: context,
           builder: (BuildContext context) {
             return AlertDialog(
-              title: Text(AppFlowyEditorLocalizations.current.editLink),
+              title: Text(AppFlowyEditorL10n.current.editLink),
               shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(4),
               ),
@@ -122,12 +121,12 @@ class _LinkEditFormState extends State<LinkEditForm> {
             keyboardType: TextInputType.text,
             validator: (value) {
               if (value == null || value.isEmpty) {
-                return AppFlowyEditorLocalizations.current.linkTextHint;
+                return AppFlowyEditorL10n.current.linkTextHint;
               }
               return null;
             },
             decoration: InputDecoration(
-              hintText: AppFlowyEditorLocalizations.current.linkText,
+              hintText: AppFlowyEditorL10n.current.linkText,
               suffixIcon: IconButton(
                 icon: const Icon(
                   Icons.clear_rounded,
@@ -143,12 +142,12 @@ class _LinkEditFormState extends State<LinkEditForm> {
             keyboardType: TextInputType.url,
             validator: (value) {
               if (value == null || value.isEmpty) {
-                return AppFlowyEditorLocalizations.current.linkAddressHint;
+                return AppFlowyEditorL10n.current.linkAddressHint;
               }
               return null;
             },
             decoration: InputDecoration(
-              hintText: AppFlowyEditorLocalizations.current.urlHint,
+              hintText: AppFlowyEditorL10n.current.urlHint,
               suffixIcon: IconButton(
                 icon: const Icon(
                   Icons.clear_rounded,
@@ -164,7 +163,7 @@ class _LinkEditFormState extends State<LinkEditForm> {
             children: [
               TextButton(
                 child: Text(
-                  AppFlowyEditorLocalizations.current.removeLink,
+                  AppFlowyEditorL10n.current.removeLink,
                   style: TextStyle(color: Theme.of(context).colorScheme.error),
                 ),
                 onPressed: () async {
@@ -184,7 +183,7 @@ class _LinkEditFormState extends State<LinkEditForm> {
                 style: TextButton.styleFrom(
                   textStyle: Theme.of(context).textTheme.labelLarge,
                 ),
-                child: Text(AppFlowyEditorLocalizations.current.done),
+                child: Text(AppFlowyEditorL10n.current.done),
                 onPressed: () async {
                   if (_formKey.currentState!.validate()) {
                     final bool textChanged =

lib/src/editor/find_replace_menu/find_replace_widget.dart

@@ -1,7 +1,8 @@
 import 'package:appflowy_editor/appflowy_editor.dart';
-import 'find_replace_menu_icon_button.dart';
 import 'package:flutter/material.dart';
 
+import 'find_replace_menu_icon_button.dart';
+
 const double _iconButtonSize = 30;
 
 class FindAndReplaceMenuWidget extends StatefulWidget {
@@ -239,8 +240,7 @@ class _FindMenuState extends State<FindMenu> {
               });
             },
             decoration: _buildInputDecoration(
-              widget.localizations?.find ??
-                  AppFlowyEditorLocalizations.current.find,
+              widget.localizations?.find ?? AppFlowyEditorL10n.current.find,
             ),
           ),
         ),
@@ -261,22 +261,22 @@ class _FindMenuState extends State<FindMenu> {
           onPressed: () => widget.searchService.navigateToMatch(moveUp: true),
           icon: const Icon(Icons.arrow_upward),
           tooltip: widget.localizations?.previousMatch ??
-              AppFlowyEditorLocalizations.current.previousMatch,
+              AppFlowyEditorL10n.current.previousMatch,
         ),
         // next match button
         FindAndReplaceMenuIconButton(
           iconButtonKey: const Key('nextMatchButton'),
           onPressed: () => widget.searchService.navigateToMatch(),
           icon: const Icon(Icons.arrow_downward),
           tooltip: widget.localizations?.nextMatch ??
-              AppFlowyEditorLocalizations.current.nextMatch,
+              AppFlowyEditorL10n.current.nextMatch,
         ),
         FindAndReplaceMenuIconButton(
           iconButtonKey: const Key('closeButton'),
           onPressed: widget.onDismiss,
           icon: const Icon(Icons.close),
           tooltip: widget.localizations?.close ??
-              AppFlowyEditorLocalizations.current.closeFind,
+              AppFlowyEditorL10n.current.closeFind,
         ),
         // regex button
         if (showRegexButton)
@@ -294,7 +294,7 @@ class _FindMenuState extends State<FindMenu> {
               height: 20,
               color: widget.searchService.regex ? Colors.black : Colors.grey,
             ),
-            tooltip: AppFlowyEditorLocalizations.current.regex,
+            tooltip: AppFlowyEditorL10n.current.regex,
           ),
         // case sensitive button
         if (showCaseSensitiveButton)
@@ -315,7 +315,7 @@ class _FindMenuState extends State<FindMenu> {
                   ? Colors.black
                   : Colors.grey,
             ),
-            tooltip: AppFlowyEditorLocalizations.current.caseSensitive,
+            tooltip: AppFlowyEditorL10n.current.caseSensitive,
           ),
       ],
     );
@@ -384,7 +384,7 @@ class _ReplaceMenuState extends State<ReplaceMenu> {
             },
             decoration: _buildInputDecoration(
               widget.localizations?.replace ??
-                  AppFlowyEditorLocalizations.current.replace,
+                  AppFlowyEditorL10n.current.replace,
             ),
           ),
         ),
@@ -393,7 +393,7 @@ class _ReplaceMenuState extends State<ReplaceMenu> {
           onPressed: _replaceSelectedWord,
           icon: const Icon(Icons.find_replace),
           tooltip: widget.localizations?.replace ??
-              AppFlowyEditorLocalizations.current.replace,
+              AppFlowyEditorL10n.current.replace,
         ),
         FindAndReplaceMenuIconButton(
           iconButtonKey: const Key('replaceAllButton'),
@@ -402,7 +402,7 @@ class _ReplaceMenuState extends State<ReplaceMenu> {
           ),
           icon: const Icon(Icons.change_circle_outlined),
           tooltip: widget.localizations?.replaceAll ??
-              AppFlowyEditorLocalizations.current.replaceAll,
+              AppFlowyEditorL10n.current.replaceAll,
         ),
       ],
     );

lib/src/editor/l10n/appflowy_editor_l10n.dart

@@ -0,0 +1,5 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+
+class AppFlowyEditorL10n extends AppFlowyEditorLocalizations {
+  static AppFlowyEditorLocalizations current = AppFlowyEditorL10n();
+}