From 5558c6f269b1308b8e90f40996867eaa1907962d Mon Sep 17 00:00:00 2001 From: Ellet Date: Tue, 14 Nov 2023 02:18:39 +0300 Subject: [PATCH] Update README.md --- README.md | 131 +----------------- doc/configurations/custom_buttons.md | 43 ++++++ doc/configurations/font_size.md | 15 ++ doc/configurations/localizations_setup.md | 25 ++++ doc/configurations/using_custom_app_widget.md | 34 +++++ doc/todo.md | 14 +- 6 files changed, 131 insertions(+), 131 deletions(-) create mode 100644 doc/configurations/custom_buttons.md create mode 100644 doc/configurations/font_size.md create mode 100644 doc/configurations/localizations_setup.md create mode 100644 doc/configurations/using_custom_app_widget.md diff --git a/README.md b/README.md index b6068995..bff4650c 100644 --- a/README.md +++ b/README.md @@ -39,11 +39,8 @@ Pub: [FlutterQuill] - [Migration](#migration) - [Input / Output](#input--output) - [Configurations](#configurations) - - [Using Custom App Widget](#using-custom-app-widget) - - [Localizations setup](#localizations-setup) - - [Font Size](#font-size) + - [Links](#links) - [Font Family](#font-family) - - [Custom Buttons](#custom-buttons) - [Embed Blocks](#embed-blocks) - [Using the embed blocks from `flutter_quill_extensions`](#using-the-embed-blocks-from-flutter_quill_extensions) - [Custom Embed Blocks](#custom-embed-blocks) @@ -171,131 +168,17 @@ _controller = QuillController( The `QuillToolbar` and `QuillEditor` widgets lets you customize a lot of things [Sample Page] provides sample code for advanced usage and configuration. -### Using Custom App Widget - -This project use some adaptive widgets like `AdaptiveTextSelectionToolbar` which require the following delegates: - -1. Default Material Localizations delegate -2. Default Cupertino Localizations delegate -3. Defualt Widgets Localizations delegate - -You don't need to include those since there are defined by default - but if you are using Custom app or you are overriding the `localizationsDelegates` in the App widget -then please make sure it's including those: - -```dart -localizationsDelegates: const [ - DefaultCupertinoLocalizations.delegate, - DefaultMaterialLocalizations.delegate, - DefaultWidgetsLocalizations.delegate, -], -``` - -And you might need more depending on your use case, for example if you are using custom localizations for your app, using custom app widget like `FluentApp` from [FluentUI] -which will also need - -```dart -localizationsDelegates: const [ - // Required localizations delegates ... - FluentLocalizations.delegate, - AppLocalizations.delegate, -], -``` - -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`. - -When enabled, the default font-size values can be modified via _optional_ `fontSizeValues`. `fontSizeValues` accepts a `Map` consisting of a `String` title for the font size and a `String` value for the font size. Example: - -```dart -fontSizeValues: const {'Small': '8', 'Medium': '24.5', 'Large': '46'} -``` - -Font size can be cleared with a value of `0`, for example: - -```dart -fontSizeValues: const {'Small': '8', 'Medium': '24.5', 'Large': '46', 'Clear': '0'} -``` +### Links +- [Using Custom App Widget](./doc/configurations/using_custom_app_widget.md) +- [Localizations Setup](./doc/configurations/localizations_setup.md) +- [Font Size](./doc/configurations/font_size.md) +- [Font Family](#font-family) +- [Custom Toolbar buttons](./doc/configurations/custom_buttons.md) ### Font Family To use your own fonts, update your [assets folder](./example/assets/fonts) and pass in `fontFamilyValues`. More details at [this commit](https://github.com/singerdmx/flutter-quill/commit/71d06f6b7be1b7b6dba2ea48e09fed0d7ff8bbaa), [this article](https://stackoverflow.com/questions/55075834/fontfamily-property-not-working-properly-in-flutter) and [this](https://www.flutterbeads.com/change-font-family-flutter/). -### Custom Buttons - -You may add custom buttons to the _end_ of the toolbar, via the `customButtons` option, which is a `List` of `QuillToolbarCustomButtonOptions`. - -To add an Icon, we should use a new `QuillToolbarCustomButtonOptions` class - -```dart - QuillToolbarCustomButtonOptions( - icon: const Icon(Icons.ac_unit), - tooltip: '', - onPressed: () {}, - afterButtonPressed: () {}, - ), -``` - -Each `QuillCustomButton` is used as part of the `customButtons` option as follows: - -```dart -QuillToolbar( - configurations: QuillToolbarConfigurations( - customButtons: [ - QuillToolbarCustomButtonOptions( - icon: const Icon(Icons.ac_unit), - onPressed: () { - debugPrint('snowflake1'); - }, - ), - QuillToolbarCustomButtonOptions( - icon: const Icon(Icons.ac_unit), - onPressed: () { - debugPrint('snowflake2'); - }, - ), - QuillToolbarCustomButtonOptions( - icon: const Icon(Icons.ac_unit), - onPressed: () { - debugPrint('snowflake3'); - }, - ), - ], - ), -), -``` - ## Embed Blocks As of version 6.0, embed blocks are not provided by default as part of this package. Instead, this package provides an interface to all the user to provide there own implementations for embed blocks. Implementations for image, video and formula embed blocks is proved in a separate package [`flutter_quill_extensions`](https://pub.dev/packages/flutter_quill_extensions). diff --git a/doc/configurations/custom_buttons.md b/doc/configurations/custom_buttons.md new file mode 100644 index 00000000..24f9e1ca --- /dev/null +++ b/doc/configurations/custom_buttons.md @@ -0,0 +1,43 @@ +# Custom `QuillToolbar` Buttons + +You may add custom buttons to the _end_ of the toolbar, via the `customButtons` option, which is a `List` of `QuillToolbarCustomButtonOptions`. + +To add an Icon, we should use a new `QuillToolbarCustomButtonOptions` class + +```dart + QuillToolbarCustomButtonOptions( + icon: const Icon(Icons.ac_unit), + tooltip: '', + onPressed: () {}, + afterButtonPressed: () {}, + ), +``` + +Each `QuillCustomButton` is used as part of the `customButtons` option as follows: + +```dart +QuillToolbar( + configurations: QuillToolbarConfigurations( + customButtons: [ + QuillToolbarCustomButtonOptions( + icon: const Icon(Icons.ac_unit), + onPressed: () { + debugPrint('snowflake1'); + }, + ), + QuillToolbarCustomButtonOptions( + icon: const Icon(Icons.ac_unit), + onPressed: () { + debugPrint('snowflake2'); + }, + ), + QuillToolbarCustomButtonOptions( + icon: const Icon(Icons.ac_unit), + onPressed: () { + debugPrint('snowflake3'); + }, + ), + ], + ), +), +``` \ No newline at end of file diff --git a/doc/configurations/font_size.md b/doc/configurations/font_size.md new file mode 100644 index 00000000..c73ddcb8 --- /dev/null +++ b/doc/configurations/font_size.md @@ -0,0 +1,15 @@ +# Font Size + +Within the editor toolbar, a drop-down with font-sizing capabilities is available. This can be enabled or disabled with `showFontSize`. + +When enabled, the default font-size values can be modified via _optional_ `fontSizeValues`. `fontSizeValues` accepts a `Map` consisting of a `String` title for the font size and a `String` value for the font size. Example: + +```dart +fontSizeValues: const {'Small': '8', 'Medium': '24.5', 'Large': '46'} +``` + +Font size can be cleared with a value of `0`, for example: + +```dart +fontSizeValues: const {'Small': '8', 'Medium': '24.5', 'Large': '46', 'Clear': '0'} +``` \ No newline at end of file diff --git a/doc/configurations/localizations_setup.md b/doc/configurations/localizations_setup.md new file mode 100644 index 00000000..1d373a27 --- /dev/null +++ b/doc/configurations/localizations_setup.md @@ -0,0 +1,25 @@ +# Localizations Setup +in addition to the required delegatess which mentioned above in [Using custom app widget](./using_custom_app_widget.md) + +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 + +There are additional notes in the [Translation](../translation.md) section \ No newline at end of file diff --git a/doc/configurations/using_custom_app_widget.md b/doc/configurations/using_custom_app_widget.md new file mode 100644 index 00000000..8a69f9d0 --- /dev/null +++ b/doc/configurations/using_custom_app_widget.md @@ -0,0 +1,34 @@ +# Using Custom App Widget + +This project use some adaptive widgets like `AdaptiveTextSelectionToolbar` which require the following delegates: + +1. Default Material Localizations delegate +2. Default Cupertino Localizations delegate +3. Defualt Widgets Localizations delegate + +You don't need to include those since there are defined by default + but if you are using Custom app or you are overriding the `localizationsDelegates` in the App widget +then please make sure it's including those: + +```dart +localizationsDelegates: const [ + DefaultCupertinoLocalizations.delegate, + DefaultMaterialLocalizations.delegate, + DefaultWidgetsLocalizations.delegate, +], +``` + +And you might need more depending on your use case, for example if you are using custom localizations for your app, using custom app widget like `FluentApp` from [FluentUI] +which will also need + +```dart +localizationsDelegates: const [ + // Required localizations delegates ... + FluentLocalizations.delegate, + AppLocalizations.delegate, +], +``` + +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_setup.md) page \ No newline at end of file diff --git a/doc/todo.md b/doc/todo.md index 5053f7d4..0dd2f43f 100644 --- a/doc/todo.md +++ b/doc/todo.md @@ -18,15 +18,15 @@ This is a todo list page that added recently and will be updated soon. ### Features - 1. Add support for Text magnification feature, for more [info](https://github.com/singerdmx/flutter-quill/issues/1504) - 2. Provide a way to expose quills undo redo stacks, for more [info](https://github.com/singerdmx/flutter-quill/issues/1381) - 3. Add callback to the `QuillToolbarColorButton` for custom color picking logic + - Add support for Text magnification feature, for more [info](https://github.com/singerdmx/flutter-quill/issues/1504) + - Provide a way to expose quills undo redo stacks, for more [info](https://github.com/singerdmx/flutter-quill/issues/1381) + - Add callback to the `QuillToolbarColorButton` for custom color picking logic ### Improvemenets - 1. Improve the Raw Quill Editor, for more [info](https://github.com/singerdmx/flutter-quill/issues/1509) - 2. Provide more support to all the platforms - 3. Extract the shared properties between `QuillRawEditorConfigurations` and `QuillEditorConfigurations` + - Improve the Raw Quill Editor, for more [info](https://github.com/singerdmx/flutter-quill/issues/1509) + - Provide more support to all the platforms + - Extract the shared properties between `QuillRawEditorConfigurations` and `QuillEditorConfigurations` ### Bugs @@ -37,7 +37,7 @@ Please go to the [issues](https://github.com/singerdmx/flutter-quill/issues) ## Flutter Quill Extensions ### Features -1. Add support for copying images to the Clipboard +- Add support for copying images to the Clipboard ### Improvemenets