Update flutter_quill and flutter_quill_extensions (#1520)

* Update flutter_quill and flutter_quill_extensions

Author: Ellet

CHANGELOG.md

@@ -1,3 +1,11 @@
+## [8.4.2]
+- **Breaking change**: The `QuillRawEditor` configurations has been moved to a seperated class, also the `readOnly` has been renamed to `isReadOnly`, if you are using the `QuillEditor` you don't have to change anything
+- Allow the developer to use override the `TextInputAction` in both `QuillRawEditor` and `QuillEditor`
+- You can use now the `QuillRawEditor` without `QuillEditorProvider`
+- Bug fixes
+- Add implementation of image cropping in the `example`
+- Update the `QuillToolbarIconButton` to use the material 3 buttons
+
 ## [8.4.1]
 - Add `copyWith` in `OptionalSize` class
 

doc/todo.md

@@ -27,6 +27,7 @@ This is a todo list page that added recently and will be updated soon.
 
  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`
 
 ### Bugs
 

example/android/app/src/main/AndroidManifest.xml

@@ -42,6 +42,12 @@
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
         </activity>
+
+        <activity
+         android:name="com.yalantis.ucrop.UCropActivity"
+         android:screenOrientation="portrait"
+         android:theme="@style/Theme.AppCompat.Light.NoActionBar" />
+
         <!-- Don't delete the meta-data below.
              This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
         <meta-data

example/lib/pages/home_page.dart

@@ -15,6 +15,7 @@ import 'package:flutter_quill/flutter_quill.dart';
 import 'package:flutter_quill_extensions/flutter_quill_extensions.dart';
 import 'package:flutter_quill_extensions/logic/services/image_picker/image_picker.dart';
 import 'package:flutter_quill_extensions/presentation/embeds/widgets/image.dart';
+import 'package:image_cropper/image_cropper.dart';
 import 'package:path/path.dart' as path;
 import 'package:path_provider/path_provider.dart';
 
@@ -455,6 +456,42 @@ class _HomePageState extends State<HomePage> {
     );
   }
 
+  /// When inserting an image
+  OnImageInsertCallback get onImageInsert {
+    return (image, controller) async {
+      final croppedFile = await ImageCropper().cropImage(
+        sourcePath: image,
+        aspectRatioPresets: [
+          CropAspectRatioPreset.square,
+          CropAspectRatioPreset.ratio3x2,
+          CropAspectRatioPreset.original,
+          CropAspectRatioPreset.ratio4x3,
+          CropAspectRatioPreset.ratio16x9
+        ],
+        uiSettings: [
+          AndroidUiSettings(
+            toolbarTitle: 'Cropper',
+            toolbarColor: Colors.deepOrange,
+            toolbarWidgetColor: Colors.white,
+            initAspectRatio: CropAspectRatioPreset.original,
+            lockAspectRatio: false,
+          ),
+          IOSUiSettings(
+            title: 'Cropper',
+          ),
+          WebUiSettings(
+            context: context,
+          ),
+        ],
+      );
+      final newImage = croppedFile?.path;
+      if (newImage == null) {
+        return;
+      }
+      controller.insertImageBlock(imageSource: newImage);
+    };
+  }
+
   QuillToolbar get quillToolbar {
     final customButtons = [
       QuillToolbarCustomButtonOptions(
@@ -481,13 +518,14 @@ class _HomePageState extends State<HomePage> {
         configurations: QuillToolbarConfigurations(
           customButtons: customButtons,
           embedButtons: FlutterQuillEmbeds.toolbarButtons(
+            cameraButtonOptions: const QuillToolbarCameraButtonOptions(),
             imageButtonOptions: QuillToolbarImageButtonOptions(
               imageButtonConfigurations: QuillToolbarImageConfigurations(
                 onImageInsertedCallback: (image) async {
                   _onImagePickCallback(File(image));
                 },
+                onImageInsertCallback: onImageInsert,
               ),
-              // webImagePickImpl: _webImagePickImpl,
             ),
           ),
           buttonOptions: QuillToolbarButtonOptions(
@@ -496,14 +534,14 @@ class _HomePageState extends State<HomePage> {
             ),
           ),
         ),
-        // afterButtonPressed: _focusNode.requestFocus,
       );
     }
     if (isDesktop(supportWeb: false)) {
       return QuillToolbar(
         configurations: QuillToolbarConfigurations(
           customButtons: customButtons,
           embedButtons: FlutterQuillEmbeds.toolbarButtons(
+            cameraButtonOptions: const QuillToolbarCameraButtonOptions(),
             imageButtonOptions: QuillToolbarImageButtonOptions(
               imageButtonConfigurations: QuillToolbarImageConfigurations(
                 onImageInsertedCallback: (image) async {
@@ -525,6 +563,7 @@ class _HomePageState extends State<HomePage> {
       configurations: QuillToolbarConfigurations(
         customButtons: customButtons,
         embedButtons: FlutterQuillEmbeds.toolbarButtons(
+          cameraButtonOptions: const QuillToolbarCameraButtonOptions(),
           videoButtonOptions: QuillToolbarVideoButtonOptions(
             videoConfigurations: QuillToolbarVideoConfigurations(
               onVideoInsertedCallback: (video) =>
@@ -533,6 +572,7 @@ class _HomePageState extends State<HomePage> {
           ),
           imageButtonOptions: QuillToolbarImageButtonOptions(
             imageButtonConfigurations: QuillToolbarImageConfigurations(
+              onImageInsertCallback: onImageInsert,
               onImageInsertedCallback: (image) async {
                 _onImagePickCallback(File(image));
               },

example/pubspec.yaml

@@ -17,10 +17,11 @@ dependencies:
   path_provider: ^2.1.1
   # filesystem_picker: ^4.0.0
   file_picker: ^6.1.1
-  flutter_quill: ^8.2.5
-  flutter_quill_extensions: ^0.6.3
+  flutter_quill: ^8.4.1
+  flutter_quill_extensions: ^0.6.5
   path: ^1.8.3
   desktop_drop: ^0.4.4
+  image_cropper: ^5.0.0
 
 dependency_overrides:
   flutter_quill:

example/web/index.html

@@ -32,6 +32,11 @@
   <title>example</title>
   <link rel="manifest" href="manifest.json">
 
+   <!-- Croppie -->
+   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.css" />
+   <script defer src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js"></script>
+   <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
+
   <script>
     // The value below is injected by flutter build, do not touch.
     const serviceWorkerVersion = null;

flutter_quill_extensions/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 0.6.6
+- Add `onImageClicked` in the `QuillEditorImageEmbedConfigurations`
+- Fix image resizing on mobile
+
 ## 0.6.5
 - Support the new improved platform checking of `flutter_quill`
 - Update the Image embed builder logic

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

@@ -112,6 +112,20 @@ class QuillEditorImageEmbedBuilder extends EmbedBuilder {
         QuillSharedExtensionsConfigurations.get(context: context)
             .imageSaverService;
     return GestureDetector(
+      onTap: configurations.onImageClicked ??
+          () => showDialog(
+                context: context,
+                builder: (context) {
+                  return ImageOptionsMenu(
+                    controller: controller,
+                    configurations: configurations,
+                    imageSource: imageSource,
+                    imageSize: imageSize,
+                    isReadOnly: readOnly,
+                    imageSaverService: imageSaverService,
+                  );
+                },
+              ),
       child: Builder(
         builder: (context) {
           if (margin != null) {
@@ -123,19 +137,6 @@ class QuillEditorImageEmbedBuilder extends EmbedBuilder {
           return image;
         },
       ),
-      onTap: () => showDialog(
-        context: context,
-        builder: (context) {
-          return ImageOptionsMenu(
-            controller: controller,
-            configurations: configurations,
-            imageSource: imageSource,
-            imageSize: imageSize,
-            isReadOnly: readOnly,
-            imageSaverService: imageSaverService,
-          );
-        },
-      ),
     );
   }
 }
@@ -191,10 +192,16 @@ class QuillEditorImageEmbedBuilder extends EmbedBuilder {
     // It css value as string but we will try to support it anyway
 
     // TODO: This could be improved much better
-    final cssHeightValue = double.tryParse(
-        (attrs[Attribute.height.key] ?? '').replaceFirst('px', ''));
-    final cssWidthValue = double.tryParse(
-        (attrs[Attribute.width.key] ?? '').replaceFirst('px', ''));
+    final cssHeightValue = double.tryParse(((base.isMobile(supportWeb: false)
+                ? attrs[Attribute.mobileHeight]
+                : attrs[Attribute.height.key]) ??
+            '')
+        .replaceFirst('px', ''));
+    final cssWidthValue = double.tryParse(((!base.isMobile(supportWeb: false)
+                ? attrs[Attribute.width.key]
+                : attrs[Attribute.mobileWidth]) ??
+            '')
+        .replaceFirst('px', ''));
 
     if (cssHeightValue != null) {
       imageSize = imageSize.copyWith(height: cssHeightValue);

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

@@ -1,6 +1,5 @@
 import 'package:flutter/cupertino.dart' show showCupertinoModalPopup;
 import 'package:flutter/material.dart';
-// import 'package:flutter/services.dart' show Clipboard, ClipboardData;
 import 'package:flutter_quill/extensions.dart'
     show isDesktop, isMobile, replaceStyleStringWithSize;
 import 'package:flutter_quill/flutter_quill.dart'
@@ -51,16 +50,16 @@ class ImageOptionsMenu extends StatelessWidget {
                   builder: (context) {
                     final screenSize = MediaQuery.sizeOf(context);
                     return ImageResizer(
-                      onImageResize: (w, h) {
+                      onImageResize: (width, height) {
                         final res = getEmbedNode(
                           controller,
                           controller.selection.start,
                         );
 
                         final attr = replaceStyleStringWithSize(
                           getImageStyleString(controller),
-                          width: w,
-                          height: h,
+                          width: width,
+                          height: height,
                           isMobile: isMobile(supportWeb: false),
                         );
                         controller
@@ -94,7 +93,7 @@ class ImageOptionsMenu extends StatelessWidget {
               );
               // TODO: Implement the copy image
               // await Clipboard.setData(
-              //   ClipboardData(text: '$imageUrl'),
+              //   ClipboardData(),
               // );
               navigator.pop();
             },

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

@@ -1,5 +1,3 @@
-// ignore_for_file: use_build_context_synchronously
-
 import 'package:flutter/material.dart';
 import 'package:flutter_quill/flutter_quill.dart';
 import 'package:flutter_quill/translations.dart';
@@ -104,6 +102,7 @@ class QuillToolbarCameraButton extends StatelessWidget {
       size: iconSize * 1.77,
       fillColor: iconFillColor,
       borderRadius: iconTheme?.borderRadius ?? 2,
+      // isDesktop(supportWeb: false) ? null :
       onPressed: () => _sharedOnPressed(context),
     );
   }
@@ -126,22 +125,16 @@ class QuillToolbarCameraButton extends StatelessWidget {
     BuildContext context,
     QuillController controller,
   ) async {
-    // if (onVideoPickCallback == null && onImagePickCallback == null) {
-    //   throw ArgumentError(
-    //     'onImagePickCallback and onVideoPickCallback are both null',
-    //   );
-    // }
+    final imagePickerService =
+        QuillSharedExtensionsConfigurations.get(context: context)
+            .imagePickerService;
 
     final cameraAction = await _getCameraAction(context);
 
     if (cameraAction == null) {
       return;
     }
 
-    final imagePickerService =
-        QuillSharedExtensionsConfigurations.get(context: context)
-            .imagePickerService;
-
     switch (cameraAction) {
       case CameraAction.video:
         final videoFile = await imagePickerService.pickVideo(