Migrate to flutter_localizations (#1522)

* Migrate to flutter_localizations

* Update documentation and remove unused parameters

* Update automated publishing

* Add development notes page

* Update to flutter_quill/translations.dart

* Remove unused package

* Fix missing translations

.github/workflows/publish.yml

@@ -31,5 +31,8 @@ jobs:
       # Here you can insert custom steps you need
       # - run: dart tool/generate-code.dart
 
+      - name: Re-generate the translations
+        run: ./scripts/renegerate-translations.sh
+
       - name: Publish
         run: flutter pub publish --force

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [8.5.0]
+- Migrate to `flutter_localizations` for the translations
+- Fix: Translate all the untranslated localizations
+- Fix: Translate missing translations
+- Fix: Add default Chinese fallback translation
+- Remove: unused parameters `items` in `QuillToolbarFontFamilyButtonOptions` and `QuillToolbarFontSizeButtonOptions`
+- Update: documentation
+
 ## [8.4.4]
 - Update `.pubignore` to ignore unnecessary files and folders
 

README.md

@@ -26,19 +26,21 @@
 
 FlutterQuill is a rich text editor and a [Quill] component for [Flutter].
 
-This library is a WYSIWYG editor built for the modern Android, iOS, web and desktop platforms. Check out our [Youtube Playlist] or [Code Introduction] to take a detailed walkthrough of the code base. You can join our [Slack Group] for discussion.
+This library is a WYSIWYG editor built for the modern Android, iOS, web and desktop platforms. Check out our [Youtube Playlist] or [Code Introduction](./doc/code_introduction.md) to take a detailed walkthrough of the code base. You can join our [Slack Group] for discussion.
 
 Pub: [FlutterQuill]
 
 ## Table of contents
 - [Flutter Quill](#flutter-quill)
   - [Table of contents](#table-of-contents)
   - [Installation](#installation)
+  - [Screenshots](#screenshots)
   - [Usage](#usage)
   - [Migration](#migration)
   - [Input / Output](#input--output)
   - [Configurations](#configurations)
     - [Using Custom App Widget](#using-custom-app-widget)
+    - [Localizations setup](#localizations-setup)
     - [Font Size](#font-size)
     - [Font Family](#font-family)
     - [Custom Buttons](#custom-buttons)
@@ -75,6 +77,20 @@ dependencies:
 > If the latest version of [FlutterQuill Extensions] is pre-release, then please use it in order to work with the latest stable version of [FlutterQuill]
 >
 
+## Screenshots
+
+<details>
+<summary>Tap to show/hide screenshots</summary>
+
+<br>
+
+<img src="./example/assets/images/1.png" width="150" alt="Screenshot 1">
+<img src="./example/assets/images/2.png" width="150" alt="Screenshot 2">
+<img src="./example/assets/images/3.png" width="150" alt="Screenshot 3">
+<img src="./example/assets/images/4.png" width="150" alt="Screenshot 4">
+
+</details>
+
 ## Usage
 
 See the `example` directory for a minimal example of how to use FlutterQuill.  You typically just need to instantiate a controller:
@@ -176,10 +192,36 @@ localizationsDelegates: const [
 ],
 ```
 
-in addition to the required delegates by this library
-
 Note: In the latest versions of `FluentApp` you no longer need to add the `localizationsDelegates` but this is just an example, for more [info](https://github.com/bdlukaa/fluent_ui/pull/946)
 
+There are additonal notes in [Localizations](#localizations) section
+
+### Localizations setup
+in addition to the required delegatess which mentioned above in [Using custom app widget](#using-custom-app-widget)
+
+which are:
+```dart
+localizationsDelegates: const [
+    DefaultCupertinoLocalizations.delegate,
+    DefaultMaterialLocalizations.delegate,
+    DefaultWidgetsLocalizations.delegate,
+],
+```
+which are used by offical flutter widgets
+
+The library also needs the 
+```dart
+// Required localizations delegates ...
+FlutterQuillLocalizations.delegate
+```
+
+To offer the default localizations.
+
+But **you don't have to** since we have wraped the `QuillEditor` and `QuillToolbar` with `FlutterQuillLocalizationsWidget` which will check if it sets then it will go, if not, then it will be provided only for them, so it's not really required, but if you are overriding the `localizationsDelegates` you could also add the `FlutterQuillLocalizations.delegate`
+which won't change anything
+
+please read the [Translation](./doc/translation.md) section
+
 ### Font Size
 
 Within the editor toolbar, a drop-down with font-sizing capabilities is available. This can be enabled or disabled with `showFontSize`.
@@ -302,6 +344,8 @@ We welcome contributions!
 
 Please follow these guidelines when contributing to the project. See [CONTRIBUTING.md](./doc/CONTRIBUTING.md) for more details. <br>
 
+We must mention that the `CONTRIBUTING.md` have a development notes, so if you planning on contribtuing to the repo, please read it.
+
 You can check the [Todo](./doc/todo.md) list if you want to
 
 [Quill]: https://quilljs.com/docs/formats
@@ -312,6 +356,6 @@ You can check the [Todo](./doc/todo.md) list if you want to
 [Youtube Playlist]: https://youtube.com/playlist?list=PLbhaS_83B97vONkOAWGJrSXWX58et9zZ2
 [Slack Group]: https://join.slack.com/t/bulletjournal1024/shared_invite/zt-fys7t9hi-ITVU5PGDen1rNRyCjdcQ2g
 [Sample Page]: https://github.com/singerdmx/flutter-quill/blob/master/example/lib/pages/home_page.dart
-[Code Introduction]: https://github.com/singerdmx/flutter-quill/blob/master/doc/CodeIntroduction.md
+<!-- [Code Introduction]: https://github.com/singerdmx/flutter-quill/blob/master/doc/code_introduction.md -->
 [FluentUI]: https://pub.dev/packages/fluent_ui
 

doc/CONTRIBUTING.md

@@ -59,3 +59,6 @@ git push origin your-branch-name
 ```
 
 Thank you for your time and efforts in this open-source community project!!
+
+## Development Notes
+Please read the [Development Notes](./development_notes.md) as they are important while development

doc/development_notes.md

@@ -0,0 +1,3 @@
+# Development notes
+
+- When update the translations or localizations in the app, please take a look at the [Translation](./translation.md) page as it have important notes in order to work, if you also adding a feature that add new localizations then you need to the instructions of it in order for the translations to take affect

doc/readme/cn.md

@@ -24,7 +24,7 @@
 
 ---
 
-> This documentation is outdated. Please check the English version.
+> This documentation is outdated. Please check the [English version](../../README.md).
 
 `FlutterQuill` 是一个富文本编辑器，也是 [Quill](https://quilljs.com/docs/formats) 在 [Flutter](https://github.com/flutter/flutter) 的版本
 

doc/translation.md

@@ -1,13 +1,13 @@
 # Translation
 
-The package offers translations for the quill toolbar and editor, it will follow the system locale unless you set your own locale with:
+The package offers translations for the quill toolbar and editor, it will follow the locale that is defined in your `WidgetsApp` for example `MaterialApp` which usually follow the system local and it  unless you set your own locale with:
 
 ```dart
  QuillProvider(
   configurations: QuillConfigurations(
     controller: _controller,
     sharedConfigurations: const QuillSharedConfigurations(
-      locale: Locale('fr'),
+      locale: Locale('fr'), // will take affect only if FlutterQuillLocalizations.delegate is not defined in the Widget app
     ),
   ),
   child: Column(
@@ -38,4 +38,27 @@ Currently, translations are available for these 31 locales:
 
 #### Contributing to translations
 
-The translation file is located at [toolbar.i18n.dart](lib/src/translations/toolbar.i18n.dart). Feel free to contribute your own translations, just copy the English translations map and replace the values with your translations. Then open a pull request so everyone can benefit from your translations!
+The translation files is located at [l10n folder](../lib/src/l10n/). Feel free to contribute your own translations, just copy the [English translations](../lib/src/l10n/quill_en.arb) map and replace the values with your translations.
+
+Add new file in the l10n folder with the following name
+`quill_${localName}.arb` for example `quill_de.arb`
+paste the English version and replace the values
+
+Also you can take a look at the [untranslated](../lib/src/l10n/untranslated.json) json file, which is a generated file that tell you which keys hasn't with which locales hasn't translated so you can translate the missings
+
+After you are done and want to test the changes, run the following in the root folder (preferred):
+
+```
+flutter gen-l10n
+```
+
+or:
+
+```
+./scripts/renegerate-translations.sh
+```
+
+
+This will generate the new dart files from the arb files in order to take affect, otherwise you won't notice a difference
+
+ Then open a pull request so everyone can benefit from your translations!

example/analysis_options.yaml

@@ -11,7 +11,7 @@ linter:
     annotate_overrides: true
     avoid_empty_else: true
     avoid_escaping_inner_quotes: true
-    avoid_print: true
+    avoid_print: false
     avoid_redundant_argument_values: true
     avoid_types_on_closure_parameters: true
     avoid_void_async: true

example/lib/main.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
+import 'package:flutter_quill/translations.dart';
 
 import 'pages/home_page.dart';
 
@@ -32,11 +33,10 @@ class MyApp extends StatelessWidget {
         GlobalMaterialLocalizations.delegate,
         GlobalWidgetsLocalizations.delegate,
         GlobalCupertinoLocalizations.delegate,
+        FlutterQuillLocalizations.delegate,
       ],
-      supportedLocales: const [
-        Locale('en', 'US'),
-        Locale('zh', 'HK'),
-      ],
+      locale: const Locale('ar'),
+      supportedLocales: FlutterQuillLocalizations.supportedLocales,
       home: const HomePage(),
     );
   }

example/lib/pages/home_page.dart

@@ -1,6 +1,6 @@
-// ignore_for_file: avoid_redundant_argument_values, avoid_print
+// ignore_for_file: avoid_redundant_argument_values
 
-import 'dart:async';
+import 'dart:async' show Timer;
 import 'dart:convert';
 import 'dart:io' show File;
 import 'dart:ui';
@@ -632,6 +632,9 @@ class _HomePageState extends State<HomePage> {
           controller: _controller,
           sharedConfigurations: QuillSharedConfigurations(
             animationConfigurations: QuillAnimationConfigurations.enableAll(),
+            locale: const Locale(
+              'de',
+            ), // won't take affect since we defined FlutterQuillLocalizations.delegate
           ),
         ),
         child: Column(

flutter_quill_extensions/CHANGELOG.md

@@ -1,3 +1,6 @@
+## 0.6.7
+- Support the new localization system of `flutter_quill`
+
 ## 0.6.6
 - Add `onImageClicked` in the `QuillEditorImageEmbedConfigurations`
 - Fix image resizing on mobile

flutter_quill_extensions/lib/presentation/embeds/editor/image/image_menu.dart

@@ -37,11 +37,11 @@ class ImageOptionsMenu extends StatelessWidget {
     return Padding(
       padding: const EdgeInsets.fromLTRB(50, 0, 50, 0),
       child: SimpleDialog(
-        title: Text('Image'.i18n),
+        title: Text(context.loc.image),
         children: [
           if (!isReadOnly)
             ListTile(
-              title: Text('Resize'.i18n),
+              title: Text(context.loc.resize),
               leading: const Icon(Icons.settings_outlined),
               onTap: () {
                 Navigator.pop(context);
@@ -81,7 +81,7 @@ class ImageOptionsMenu extends StatelessWidget {
             ),
           ListTile(
             leading: const Icon(Icons.copy_all_outlined),
-            title: Text('Copy'.i18n),
+            title: Text(context.loc.copy),
             onTap: () async {
               final navigator = Navigator.of(context);
               final imageNode =
@@ -104,7 +104,7 @@ class ImageOptionsMenu extends StatelessWidget {
                 Icons.delete_forever_outlined,
                 color: materialTheme.colorScheme.error,
               ),
-              title: Text('Remove'.i18n),
+              title: Text(context.loc.remove),
               onTap: () async {
                 Navigator.of(context).pop();
 
@@ -132,10 +132,11 @@ class ImageOptionsMenu extends StatelessWidget {
           ...[
             ListTile(
               leading: const Icon(Icons.save),
-              title: Text('Save'.i18n),
+              title: Text(context.loc.save),
               enabled: !isDesktop(supportWeb: false),
               onTap: () async {
                 final messenger = ScaffoldMessenger.of(context);
+                final localizations = context.loc;
                 Navigator.of(context).pop();
 
                 final saveImageResult = await saveImage(
@@ -149,18 +150,18 @@ class ImageOptionsMenu extends StatelessWidget {
                 if (!imageSavedSuccessfully) {
                   messenger.showSnackBar(SnackBar(
                       content: Text(
-                    'Error while saving image'.i18n,
+                    localizations.errorWhileSavingImage,
                   )));
                   return;
                 }
 
                 String message;
                 switch (saveImageResult.method) {
                   case SaveImageResultMethod.network:
-                    message = 'Saved using the network'.i18n;
+                    message = localizations.savedUsingTheNetwork;
                     break;
                   case SaveImageResultMethod.localStorage:
-                    message = 'Saved using the local storage'.i18n;
+                    message = localizations.savedUsingLocalStorage;
                     break;
                 }
 
@@ -173,7 +174,7 @@ class ImageOptionsMenu extends StatelessWidget {
             ),
             ListTile(
               leading: const Icon(Icons.zoom_in),
-              title: Text('Zoom'.i18n),
+              title: Text(context.loc.zoom),
               onTap: () => Navigator.pushReplacement(
                 context,
                 MaterialPageRoute(

flutter_quill_extensions/lib/presentation/embeds/toolbar/camera_button/camera_button.dart

@@ -1,5 +1,11 @@
 import 'package:flutter/material.dart';
-import 'package:flutter_quill/flutter_quill.dart';
+import 'package:flutter_quill/flutter_quill.dart'
+    show
+        QuillController,
+        QuillIconTheme,
+        QuillProviderExt,
+        QuillToolbarBaseButtonOptions,
+        QuillToolbarIconButton;
 import 'package:flutter_quill/translations.dart';
 
 import '../../../../logic/models/config/shared_configurations.dart';
@@ -46,8 +52,7 @@ class QuillToolbarCameraButton extends StatelessWidget {
   String _tooltip(BuildContext context) {
     return options.tooltip ??
         baseButtonExtraOptions(context).tooltip ??
-        'Camera'.i18n;
-    // ('Camera'.i18n);
+        context.loc.camera;
   }
 
   void _sharedOnPressed(BuildContext context) {

flutter_quill_extensions/lib/presentation/embeds/toolbar/camera_button/select_camera_action.dart

@@ -17,14 +17,14 @@ class SelectCameraActionDialog extends StatelessWidget {
             icon: const Icon(
               Icons.camera,
             ),
-            label: Text('Photo'.i18n),
+            label: Text(context.loc.photo),
             onPressed: () => Navigator.pop(context, CameraAction.image),
           ),
           TextButton.icon(
             icon: const Icon(
               Icons.video_call,
             ),
-            label: Text('Video'.i18n),
+            label: Text(context.loc.video),
             onPressed: () => Navigator.pop(context, CameraAction.video),
           )
         ],

flutter_quill_extensions/lib/presentation/embeds/toolbar/image_button/image_button.dart

@@ -2,6 +2,7 @@
 
 import 'package:flutter/material.dart';
 import 'package:flutter_quill/flutter_quill.dart';
+import 'package:flutter_quill/translations.dart';
 
 import '../../../../logic/models/config/shared_configurations.dart';
 import '../../../../logic/services/image_picker/image_picker.dart';
@@ -56,8 +57,7 @@ class QuillToolbarImageButton extends StatelessWidget {
   String _tooltip(BuildContext context) {
     return options.tooltip ??
         baseButtonExtraOptions(context).tooltip ??
-        'Insert image';
-    // ('Insert Image'.i18n);
+        context.loc.insertImage;
   }
 
   void _sharedOnPressed(BuildContext context) {