From 7ae1afe0683fdf12f3b480af4827c46328e849e6 Mon Sep 17 00:00:00 2001 From: Cat <114286961+CatHood0@users.noreply.github.com> Date: Tue, 20 Aug 2024 00:09:08 -0400 Subject: [PATCH] Feat: include spell checker for example app (#2127) * Chore: update to last version simple_spell_checker for fix some issues * Fix: placeholder is detected as common text instead virtual text * Doc(readme): added documentation about the Spell checker feature * Feat: added Spell checker to example * Chore: dart before_push script --------- Co-authored-by: CatHood0 --- README.md | 66 +++++++++++++++++++ .../lib/screens/home/widgets/home_screen.dart | 13 +++- example/lib/screens/quill/quill_screen.dart | 25 ++++++- flutter_quill_extensions/pubspec.yaml | 2 +- lib/src/editor/widgets/text/text_line.dart | 1 + 5 files changed, 104 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 78f558fa..27639a50 100644 --- a/README.md +++ b/README.md @@ -64,6 +64,7 @@ You can join our [Slack Group] for discussion. - [๐Ÿ› ๏ธ Using the embed blocks from `flutter_quill_extensions`](#๏ธ-using-the-embed-blocks-from-flutter_quill_extensions) - [๐Ÿ”— Links](#-links-2) - [๐Ÿ”„ Conversion to HTML](#-conversion-to-html) + - [๐Ÿ“ Spelling checker](#-Spelling-checker) - [๐ŸŒ Translation](#-translation) - [๐Ÿงช Testing](#-testing) - [๐Ÿ‘ฅ Contributors](#-contributors) @@ -282,6 +283,71 @@ The following packages can be used: 3. [`flutter_quill_to_pdf`](https://pub.dev/packages/flutter_quill_to_pdf): To convert **Delta** To **PDF**. 4. [`markdown_quill`](https://pub.dev/packages/markdown_quill): To convert **Markdown** To **Delta** and vice versa. +## ๐Ÿ“ Spelling checker + +A spell checker is a software tool or feature integrated into various text processing applications that automatically identifies and corrects spelling errors in a written document. It works by comparing the words in the text against a built-in dictionary. If a word isn't found in the dictionary or doesn't match any known word patterns, the spell checker highlights it as a potential error. + +#### Benefits of a spell checker include: + +* Improved Accuracy: It helps writers avoid common spelling mistakes, ensuring that the text is free of errors. +* Time-Saving: Automatically detecting errors reduces the time needed for manual proofreading. +* Enhanced Professionalism: Correctly spelled words contribute to the overall professionalism of documents, which is crucial in academic, business, and formal writing. +* Multilingual Support: Many spell checkers support multiple languages, making it easier for users to write accurately in different languages. + +> [!IMPORTANT] +> The spell checker usually does not work as expected in most cases. **Many translations are not supported** such as: `Chinese`, `Japanese`, `Korean`, `Hebrew`, `Arabic`, `Russian`, etc. For now it is a purely **experimental** feature that may have **code that will be modified** in future versions. + +#### The translations supported so far are: + +* **German** - `de` (may contain errors or missing words) +* **English** - `en` (currently adding missing translations) +* **Spanish** - `es` (currently adding missing translations) +* **French** - `fr` (may contain errors or missing words) +* **Italian** - `it` (currently adding missing translations) +* **Norwegian** - `no` (may contain errors or missing words) +* **Portuguese** - `pt` (may contain errors or missing words) +* **Swedish** - `sv` (may contain errors or missing words) + +_**Note**: **If you have knowledge about any of these available languages or the unsupported ones**, you can make a pull request to add support or add words that are not currently in [simple_spell_checker](https://github.com/CatHood0/simple_spell_checker)_. + +In order to activate this functionality you can use the following code: + +```dart +// you can use the language of your preference or directly select the language of the operating system +final language = 'en'; // or Localizations.localeOf(context).languageCode +FlutterQuillExtensions.useSpellCheckerService(language); +``` + +When you no longer need to have the Spell checker activated you can simply use `dispose()` of the `SpellCheckerServiceProvider` class: + +```dart +// dispose all service and it cannot be used after this +SpellCheckerServiceProvider.dispose(); +``` +If what we want is to **temporarily deactivate the service** without deleting the values that are already stored in it, we can set `onlyPartial` to `true` so that it only closes the internal `streams` and prevents the dictionaries and values already registered from being reset. + +```dart +// it can be still used by the editor +SpellCheckerServiceProvider.dispose(onlyPartial: true); +``` + +One use of this would be having the opportunity to **activate and deactivate** the service when we want, we can see this in the example that we have in this package, in which you can see that on each screen, we have a button that dynamically activates and deactivates the service. To do this is pretty simple: + +```dart +final bool _isActivatedSpellChecker = false; +if (!_isActivatedSpellChecker) { + FlutterQuillExtensions.useSpellCheckerService(Localizations.localeOf(context).languageCode); +} else { + // close the internal streams without completely closing the service + SpellCheckerServiceProvider.dispose(onlyPartial: true); + // since onlyPartial is true then we must manually disable the service for it to take effect in the UI + SpellCheckerServiceProvider.turnOffService(); +} +_isActivatedSpellChecker = !_isActivatedSpellChecker; +``` + +Open this [page](https://pub.dev/packages/simple_spell_checker) for more information. + ## ๐ŸŒ Translation The package offers translations for the quill toolbar and editor, it will follow the system locale unless you set your diff --git a/example/lib/screens/home/widgets/home_screen.dart b/example/lib/screens/home/widgets/home_screen.dart index 6bfd6472..a0056d57 100644 --- a/example/lib/screens/home/widgets/home_screen.dart +++ b/example/lib/screens/home/widgets/home_screen.dart @@ -15,11 +15,22 @@ import '../../quill/samples/quill_videos_sample.dart'; import '../../settings/widgets/settings_screen.dart'; import 'example_item.dart'; -class HomeScreen extends StatelessWidget { +class HomeScreen extends StatefulWidget { const HomeScreen({super.key}); static const routeName = '/home'; + @override + State createState() => _HomeScreenState(); +} + +class _HomeScreenState extends State { + @override + void dispose() { + SpellCheckerServiceProvider.dispose(); + super.dispose(); + } + @override Widget build(BuildContext context) { return Scaffold( diff --git a/example/lib/screens/quill/quill_screen.dart b/example/lib/screens/quill/quill_screen.dart index b47a8c3d..d4d00e97 100644 --- a/example/lib/screens/quill/quill_screen.dart +++ b/example/lib/screens/quill/quill_screen.dart @@ -3,7 +3,10 @@ import 'dart:convert' show jsonEncode; import 'package:flutter/material.dart'; import 'package:flutter_quill/flutter_quill.dart'; import 'package:flutter_quill_extensions/flutter_quill_extensions.dart' - show FlutterQuillEmbeds, QuillSharedExtensionsConfigurations; + show + FlutterQuillEmbeds, + FlutterQuillExtensions, + QuillSharedExtensionsConfigurations; import 'package:share_plus/share_plus.dart' show Share; import '../../extensions/scaffold_messenger.dart'; @@ -11,6 +14,8 @@ import '../shared/widgets/home_screen_button.dart'; import 'my_quill_editor.dart'; import 'my_quill_toolbar.dart'; +var _isActivatedSpellChecker = false; + @immutable class QuillScreenArgs { const QuillScreenArgs({required this.document}); @@ -60,6 +65,24 @@ class _QuillScreenState extends State { appBar: AppBar( title: const Text('Flutter Quill'), actions: [ + IconButton( + tooltip: 'Spell-checker', + onPressed: () { + if (!_isActivatedSpellChecker) { + FlutterQuillExtensions.useSpellCheckerService( + Localizations.localeOf(context).languageCode); + } else { + SpellCheckerServiceProvider.dispose(onlyPartial: true); + SpellCheckerServiceProvider.turnOffService(); + } + _isActivatedSpellChecker = !_isActivatedSpellChecker; + setState(() {}); + }, + icon: Icon( + Icons.document_scanner, + color: _isActivatedSpellChecker ? Colors.red : null, + ), + ), IconButton( tooltip: 'Share', onPressed: () { diff --git a/flutter_quill_extensions/pubspec.yaml b/flutter_quill_extensions/pubspec.yaml index 5abbefb1..ad6272d9 100644 --- a/flutter_quill_extensions/pubspec.yaml +++ b/flutter_quill_extensions/pubspec.yaml @@ -41,7 +41,7 @@ dependencies: # Plugins video_player: ^2.8.1 - simple_spell_checker: ^1.0.9 + simple_spell_checker: ^1.1.2 youtube_player_flutter: ^9.0.1 url_launcher: ^6.2.1 super_clipboard: ^0.8.15 diff --git a/lib/src/editor/widgets/text/text_line.dart b/lib/src/editor/widgets/text/text_line.dart index 7c96e39f..266b4be8 100644 --- a/lib/src/editor/widgets/text/text_line.dart +++ b/lib/src/editor/widgets/text/text_line.dart @@ -407,6 +407,7 @@ class _TextLineState extends State { if (!isLink && !widget.readOnly && !widget.line.style.attributes.containsKey('code-block') && + !widget.line.style.attributes.containsKey('placeholder') && !kIsWeb) { final service = SpellCheckerServiceProvider.instance; final spellcheckedSpans = service.checkSpelling(textNode.value);