Bug fixes and new callback (#1483)

* Update auto focus function name

* Fix bug && New properties && Remove old one

* Remove by word

* Use super.key

* Remove old property

CHANGELOG.md

@@ -1,6 +1,10 @@
-## [next]
-
+## [8.1.0]
 - Fixes a word typo of `mirgration` to `migration` in readme & migration document.
+- Updated migration guide
+- Remove property `enableUnfocusOnTapOutside` in QuillEditor Configurations and add `isOnTapOutsideEnabled` instead
+- Add a new callback which is called `onTapOutside` in the `QuillEditorConfigurations` which allow you to do something when tap outside of the edtior
+- Fix a bug which cause the web platform to not unfocus the editor when tap outside of it (the default logic) to override this pleae pass a value to the callback ``onTapOutside``
+- Remove the old proerty of `iconTheme`, instead pass `iconTheme` in the button options, you will find `base` property there, inside it there is `iconTheme`
 
 ## [8.0.0]
 - If you have mirgrated recently, don't get scared from this update, it just add a documentation, mirgration guide and mark the version as more stable release, since we did break a lot of breaking changes (at least that what most developers says) we should have change the major version but when we were in the development of this new version, our time was very tight and now we are fixing the version number

lib/src/models/config/editor/configurations.dart

@@ -1,3 +1,4 @@
+// ignore_for_file: public_member_api_docs, sort_constructors_first
 import 'package:equatable/equatable.dart';
 import 'package:flutter/foundation.dart' show Brightness, Uint8List, immutable;
 import 'package:flutter/material.dart'
@@ -57,7 +58,8 @@ class QuillEditorConfigurations extends Equatable {
     this.customShortcuts,
     this.customActions,
     this.detectWordBoundary = true,
-    this.enableUnfocusOnTapOutside = true,
+    this.isOnTapOutsideEnabled = true,
+    this.onTapOutside,
     this.customLinkPrefixes = const <String>[],
     this.dialogTheme,
     this.contentInsertionConfiguration,
@@ -103,8 +105,17 @@ class QuillEditorConfigurations extends Equatable {
   /// Defaults to `false`. Cannot be `null`.
   final bool autoFocus;
 
-  /// Whether focus should be revoked on tap outside the editor.
-  final bool enableUnfocusOnTapOutside;
+  /// Whether the [onTapOutside] should be triggered or not
+  /// Defaults to `true`
+  /// it have default implementation, check [onTapOuside] for more
+  final bool isOnTapOutsideEnabled;
+
+  /// This will run only when [isOnTapOutsideEnabled] is true
+  /// by default on desktop and web it will unfocus
+  /// on mobile it will only unFocus if the kind property of
+  /// event [PointerDownEvent] is [PointerDeviceKind.unknown]
+  /// you can override this to fit your needs
+  final Function(PointerDownEvent event, FocusNode focusNode)? onTapOutside;
 
   /// Whether to show cursor.
   ///
@@ -313,6 +324,7 @@ class QuillEditorConfigurations extends Equatable {
     EdgeInsetsGeometry? padding,
     bool? autoFocus,
     bool? enableUnfocusOnTapOutside,
+    Function(PointerDownEvent event, FocusNode focusNode)? onTapOutside,
     bool? showCursor,
     bool? paintCursorAboveText,
     bool? enableInteractiveSelection,
@@ -353,8 +365,8 @@ class QuillEditorConfigurations extends Equatable {
       scrollBottomInset: scrollBottomInset ?? this.scrollBottomInset,
       padding: padding ?? this.padding,
       autoFocus: autoFocus ?? this.autoFocus,
-      enableUnfocusOnTapOutside:
-          enableUnfocusOnTapOutside ?? this.enableUnfocusOnTapOutside,
+      isOnTapOutsideEnabled: enableUnfocusOnTapOutside ?? isOnTapOutsideEnabled,
+      onTapOutside: onTapOutside ?? this.onTapOutside,
       showCursor: showCursor ?? this.showCursor,
       paintCursorAboveText: paintCursorAboveText ?? this.paintCursorAboveText,
       enableInteractiveSelection:

lib/src/models/config/toolbar/configurations.dart

@@ -101,7 +101,7 @@ class QuillToolbarConfigurations extends Equatable {
     this.linkDialogAction,
 
     ///The theme to use for the icons in the toolbar, uses type [QuillIconTheme]
-    this.iconTheme,
+    // this.iconTheme,
     this.dialogTheme,
     this.axis = Axis.horizontal,
     this.color,
@@ -209,8 +209,8 @@ class QuillToolbarConfigurations extends Equatable {
   /// Toolbar items to display for controls of embed blocks
   final List<EmbedButtonBuilder>? embedButtons;
 
-  ///The theme to use for the icons in the toolbar, uses type [QuillIconTheme]
-  final QuillIconTheme? iconTheme;
+  // ///The theme to use for the icons in the toolbar, uses type [QuillIconTheme]
+  // final QuillIconTheme? iconTheme;
 
   ///The theme to use for the theming of the [LinkDialog()],
   ///shown when embedding an image, for example

lib/src/widgets/editor/editor.dart

@@ -293,7 +293,7 @@ class QuillEditorState extends State<QuillEditor>
         customShortcuts: configurations.customShortcuts,
         customActions: configurations.customActions,
         customLinkPrefixes: configurations.customLinkPrefixes,
-        enableUnfocusOnTapOutside: configurations.enableUnfocusOnTapOutside,
+        enableUnfocusOnTapOutside: configurations.isOnTapOutsideEnabled,
         dialogTheme: configurations.dialogTheme,
         contentInsertionConfiguration:
             configurations.contentInsertionConfiguration,

lib/src/widgets/raw_editor/raw_editor.dart

@@ -65,7 +65,8 @@ class RawEditor extends StatefulWidget {
     required this.selectionColor,
     required this.selectionCtrls,
     required this.embedBuilder,
-    Key? key,
+    required this.autoFocus,
+    super.key,
     this.scrollable = true,
     this.padding = EdgeInsets.zero,
     this.readOnly = false,
@@ -82,7 +83,6 @@ class RawEditor extends StatefulWidget {
     this.customShortcuts,
     this.customActions,
     this.expands = false,
-    this.autoFocus = false,
     this.enableUnfocusOnTapOutside = true,
     this.keyboardAppearance = Brightness.light,
     this.enableInteractiveSelection = true,
@@ -99,8 +99,7 @@ class RawEditor extends StatefulWidget {
         assert(minHeight == null || minHeight >= 0, 'minHeight cannot be null'),
         assert(maxHeight == null || minHeight == null || maxHeight >= minHeight,
             'maxHeight cannot be null'),
-        showCursor = showCursor ?? true,
-        super(key: key);
+        showCursor = showCursor ?? true;
 
   /// Controls the document being edited.
   final QuillController controller;
@@ -424,6 +423,10 @@ class RawEditorState extends EditorState
   }
 
   void _defaultOnTapOutside(PointerDownEvent event) {
+    if (isWeb()) {
+      widget.focusNode.unfocus();
+    }
+
     /// The focus dropping behavior is only present on desktop platforms
     /// and mobile browsers.
     switch (defaultTargetPlatform) {
@@ -434,9 +437,9 @@ class RawEditorState extends EditorState
         // in the web browser, but we do unfocus for all other kinds of events.
         switch (event.kind) {
           case ui.PointerDeviceKind.touch:
-            if (isWeb()) {
-              widget.focusNode.unfocus();
-            }
+            // if (isWeb()) {
+            //   widget.focusNode.unfocus();
+            // }
             break;
           case ui.PointerDeviceKind.mouse:
           case ui.PointerDeviceKind.stylus:
@@ -446,14 +449,20 @@ class RawEditorState extends EditorState
             break;
           case ui.PointerDeviceKind.trackpad:
             throw UnimplementedError(
-                'Unexpected pointer down event for trackpad');
+              'Unexpected pointer down event for trackpad',
+            );
         }
         break;
       case TargetPlatform.linux:
       case TargetPlatform.macOS:
       case TargetPlatform.windows:
         widget.focusNode.unfocus();
         break;
+      default:
+        throw UnsupportedError(
+          'The platform ${defaultTargetPlatform.name} is not supported in the'
+          ' _defaultOnTapOutside',
+        );
     }
   }
 
@@ -555,7 +564,16 @@ class RawEditorState extends EditorState
 
     return TextFieldTapRegion(
       enabled: widget.enableUnfocusOnTapOutside,
-      onTapOutside: _defaultOnTapOutside,
+      onTapOutside: (event) {
+        final onTapOutside =
+            context.requireQuillEditorConfigurations.onTapOutside;
+        if (onTapOutside != null) {
+          context.requireQuillEditorConfigurations.onTapOutside
+              ?.call(event, widget.focusNode);
+          return;
+        }
+        _defaultOnTapOutside(event);
+      },
       child: QuillStyles(
         data: _styles!,
         child: Shortcuts(
@@ -1141,15 +1159,14 @@ class RawEditorState extends EditorState
       _styles = _styles!.merge(widget.customStyles!);
     }
 
-    // TODO: this might need some attention
-    _requestFocusIfShould();
+    _requestAutoFocusIfShould();
   }
 
-  Future<void> _requestFocusIfShould() async {
+  Future<void> _requestAutoFocusIfShould() async {
     if (!_didAutoFocus && widget.autoFocus) {
-      _didAutoFocus = true;
-      await Future.delayed(Duration.zero);
+      await Future.delayed(Duration.zero); // To avoid exceptions
       FocusScope.of(context).autofocus(widget.focusNode);
+      _didAutoFocus = true;
     }
   }
 

lib/src/widgets/toolbar/toolbar.dart

@@ -182,7 +182,10 @@ class QuillToolbar extends StatelessWidget {
                 ),
               if (theEmbedButtons != null)
                 for (final builder in theEmbedButtons)
-                  builder(controller, globalIconSize, configurations.iconTheme,
+                  builder(
+                      controller,
+                      globalIconSize,
+                      context.requireQuillToolbarBaseButtonOptions.iconTheme,
                       configurations.dialogTheme),
               if (configurations.showDividers &&
                   isButtonGroupShown[0] &&
@@ -350,8 +353,8 @@ class QuillToolbar extends StatelessWidget {
                         context.quillToolbarBaseButtonOptions?.iconData,
                     iconColor: customButton.iconColor,
                     iconSize: customButton.iconSize ?? globalIconSize,
-                    iconTheme: configurations.iconTheme ??
-                        context.quillToolbarBaseButtonOptions?.iconTheme,
+                    iconTheme:
+                        context.requireQuillToolbarBaseButtonOptions.iconTheme,
                     afterButtonPressed: customButton.afterButtonPressed ??
                         context
                             .quillToolbarBaseButtonOptions?.afterButtonPressed,

pubspec.yaml

@@ -1,6 +1,6 @@
 name: flutter_quill
 description: A rich text editor built for the modern Android, iOS, web and desktop platforms. It is the WYSIWYG editor and a Quill component for Flutter.
-version: 8.0.0
+version: 8.1.0
 homepage: https://1o24bbs.com/c/bulletjournal/108
 repository: https://github.com/singerdmx/flutter-quill
 topics: