From c5caca027adfb4e5b94f28bd851e484808e9d89f Mon Sep 17 00:00:00 2001 From: Ahmed Hnewa <73608287+freshtechtips@users.noreply.github.com> Date: Wed, 25 Oct 2023 01:35:06 +0300 Subject: [PATCH] Update README.md --- CHANGELOG.md | 3 +- README.md | 202 ++++++++++++++++++++++++++++++++++++++++++++++++--- doc_cn.md | 2 + 3 files changed, 194 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 912276a9..76618fb6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,7 +1,8 @@ ## [7.10.1] - Fixes and use the new parameters -- You don't need to use MaterialApp to use most of the toolbar buttons childBuilder anymore +- You don't need to use MaterialApp anymore to use most of the toolbar buttons childBuilder anymore - Compatibility with [fresh_quill_extensions](https://pub.dev/packages/fresh_quill_extensions) which is temporary alternative to [flutter_quill_extensions](https://pub.dev/packages/flutter_quill_extensions) +- Finally update most of the documentation in `README.md` ## [7.10.0] - **Breaking change**: `QuillToolbar.basic()` can be accessed from `QuillToolbar()` directly and the old `QuillToolbar` can be accessed from `QuillBaseToolbar` diff --git a/README.md b/README.md index 4e80a4e7..e8905540 100644 --- a/README.md +++ b/README.md @@ -101,7 +101,7 @@ QuillProvider( And depending on your use case, you might want to dispose the `_controller` in dispose mehtod -Check out [Sample Page] for advanced usage. +Check out [Sample Page] for more advanced usage. ## Input / Output @@ -250,21 +250,35 @@ Provide a list of embed ### Using the embed blocks from `flutter_quill_extensions` ```dart -import 'package:flutter_quill_extensions/flutter_quill_extensions.dart'; - -QuillEditor.basic( - configurations: const QuillEditorConfigurations( - embedBuilders: FlutterQuillEmbeds.builders(), - ), -) - QuillToolbar( configurations: QuillToolbarConfigurations( - embedButtons: FlutterQuillEmbeds.buttons(), + embedButtons: FlutterQuillEmbeds.toolbarButtons( + imageButtonOptions: QuillToolbarImageButtonOptions( + onImagePickCallback: (file) async { + return file.path; + }, + ), + ), ), ), ``` +```dart +Expanded( + child: QuillEditor.basic( + configurations: QuillEditorConfigurations( + readOnly: true, + embedBuilders: FlutterQuillEmbeds.editorBuilders( + imageEmbedConfigurations: + const QuillEditorImageEmbedConfigurations( + forceUseMobileOptionMenuForImageClick: true, + ), + ), + ), + ), +) +``` + > [!WARNING] > > If you are using [flutter_quill_extensions](https://pub.dev/packages/flutter_quill_extensions) package to add support for images, videos and more @@ -438,15 +452,179 @@ And voila, we have a custom widget inside of the rich text editor! > 1. For more info and a video example, see the [PR of this feature](https://github.com/singerdmx/flutter-quill/pull/877) > 2. For more details, check out [this YouTube video](https://youtu.be/pI5p5j7cfHc) + +### Custom Toolbar +if you want to use custom toolbar but still want the support of this libray +You can use the `QuillBaseToolbar` which is the base for the `QuillToolbar` + +> If you are using the offical buttons in the toolbar then you must provide them with `QuillToolbarProvider` inherited widget, you don't have to do this if you are using the `QuillToolbar` since it will be done for you + +Example: + +```dart +QuillProvider( + configurations: QuillConfigurations( + controller: _controller, + sharedConfigurations: const QuillSharedConfigurations(), + ), + child: Column( + children: [ + QuillToolbarProvider( + toolbarConfigurations: const QuillToolbarConfigurations(), + child: QuillBaseToolbar( + configurations: QuillBaseToolbarConfigurations( + toolbarSize: 15 * 2, + multiRowsDisplay: false, + childrenBuilder: (context) { + final controller = context.requireQuillController; + return [ + QuillToolbarHistoryButton( + controller: controller, + options: const QuillToolbarHistoryButtonOptions( + isUndo: true), + ), + QuillToolbarHistoryButton( + controller: controller, + options: const QuillToolbarHistoryButtonOptions( + isUndo: false), + ), + QuillToolbarToggleStyleButton( + attribute: Attribute.bold, + controller: controller, + options: const QuillToolbarToggleStyleButtonOptions( + iconData: Icons.format_bold, + iconSize: 20, + ), + ), + QuillToolbarToggleStyleButton( + attribute: Attribute.italic, + controller: controller, + options: const QuillToolbarToggleStyleButtonOptions( + iconData: Icons.format_italic, + iconSize: 20, + ), + ), + QuillToolbarToggleStyleButton( + attribute: Attribute.underline, + controller: controller, + options: const QuillToolbarToggleStyleButtonOptions( + iconData: Icons.format_underline, + iconSize: 20, + ), + ), + QuillToolbarClearFormatButton( + controller: controller, + options: const QuillToolbarClearFormatButtonOptions( + iconData: Icons.format_clear, + iconSize: 20, + ), + ), + VerticalDivider( + indent: 12, + endIndent: 12, + color: Colors.grey.shade400, + ), + QuillToolbarSelectHeaderStyleButtons( + controller: controller, + options: + const QuillToolbarSelectHeaderStyleButtonsOptions( + iconSize: 20, + ), + ), + QuillToolbarToggleStyleButton( + attribute: Attribute.ol, + controller: controller, + options: const QuillToolbarToggleStyleButtonOptions( + iconData: Icons.format_list_numbered, + iconSize: 20, + ), + ), + QuillToolbarToggleStyleButton( + attribute: Attribute.ul, + controller: controller, + options: const QuillToolbarToggleStyleButtonOptions( + iconData: Icons.format_list_bulleted, + iconSize: 20, + ), + ), + QuillToolbarToggleStyleButton( + attribute: Attribute.blockQuote, + controller: controller, + options: const QuillToolbarToggleStyleButtonOptions( + iconData: Icons.format_quote, + iconSize: 20, + ), + ), + VerticalDivider( + indent: 12, + endIndent: 12, + color: Colors.grey.shade400, + ), + QuillToolbarIndentButton( + controller: controller, + isIncrease: true, + options: const QuillToolbarIndentButtonOptions( + iconData: Icons.format_indent_increase, + iconSize: 20, + )), + QuillToolbarIndentButton( + controller: controller, + isIncrease: false, + options: const QuillToolbarIndentButtonOptions( + iconData: Icons.format_indent_decrease, + iconSize: 20, + ), + ), + ]; + }, + ), + ), + ), + Expanded( + child: QuillEditor.basic( + configurations: const QuillEditorConfigurations( + readOnly: false, + placeholder: 'Write your notes', + padding: EdgeInsets.all(16), + ), + ), + ) + ], + ), +) +``` + +if you want more customized toolbar feel free to create your own and use the `controller` to interact with the editor. checkout the `QuillToolbar` and the buttons inside it to see an example of how that will works + ### Translation The package offers translations for the quill toolbar and editor, it will follow the system locale unless you set your own locale with: ```dart -QuillToolbar(locale: Locale('fr'), ...) -QuillEditor(locale: Locale('fr'), ...) + QuillProvider( + configurations: QuillConfigurations( + controller: _controller, + sharedConfigurations: const QuillSharedConfigurations( + locale: Locale('fr'), + ), + ), + child: Column( + children: [ + const QuillToolbar( + configurations: QuillToolbarConfigurations(), + ), + Expanded( + child: QuillEditor.basic( + configurations: const QuillEditorConfigurations(), + ), + ) + ], + ), +) ``` +### + Currently, translations are available for these 31 locales: * `Locale('en')` diff --git a/doc_cn.md b/doc_cn.md index cca4c12d..680b4d72 100644 --- a/doc_cn.md +++ b/doc_cn.md @@ -24,6 +24,8 @@ --- +> This documentation is outdated. Please check the English version. + `FlutterQuill` 是一个富文本编辑器，也是 [Quill](https://quilljs.com/docs/formats) 在 [Flutter](https://github.com/flutter/flutter) 的版本 该库是为 Android、iOS、Web、Desktop 多平台构建的『所见即所得』的富文本编辑器。查看我们的 [Youtube 播放列表](https://youtube.com/playlist?list=PLbhaS_83B97vONkOAWGJrSXWX58et9zZ2) 或 [代码介绍](https://github.com/singerdmx/flutter-quill/blob/master/CodeIntroduction.md) 以了解代码的详细内容。你可以加入我们的 [Slack Group](https://join.slack.com/t/bulletjournal1024/shared_invite/zt-fys7t9hi-ITVU5PGDen1rNRyCjdcQ2g) 来进行讨论