From 7638535a3366fda739cbbcc8373517e67b29779e Mon Sep 17 00:00:00 2001 From: Ellet <73608287+freshtechtips@users.noreply.github.com> Date: Fri, 27 Oct 2023 00:31:39 +0300 Subject: [PATCH] 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 | 8 +++- .../models/config/editor/configurations.dart | 22 ++++++--- .../models/config/toolbar/configurations.dart | 6 +-- lib/src/widgets/editor/editor.dart | 2 +- lib/src/widgets/raw_editor/raw_editor.dart | 45 +++++++++++++------ lib/src/widgets/toolbar/toolbar.dart | 9 ++-- pubspec.yaml | 2 +- 7 files changed, 65 insertions(+), 29 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 35a446ef5..92350ddc0 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/lib/src/models/config/editor/configurations.dart b/lib/src/models/config/editor/configurations.dart index 6696b26ae..464689dea 100644 --- a/lib/src/models/config/editor/configurations.dart +++ b/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 [], 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: diff --git a/lib/src/models/config/toolbar/configurations.dart b/lib/src/models/config/toolbar/configurations.dart index 819b7bed4..533ac8fbe 100644 --- a/lib/src/models/config/toolbar/configurations.dart +++ b/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? 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 diff --git a/lib/src/widgets/editor/editor.dart b/lib/src/widgets/editor/editor.dart index bc11b35eb..766ad8aa4 100644 --- a/lib/src/widgets/editor/editor.dart +++ b/lib/src/widgets/editor/editor.dart @@ -293,7 +293,7 @@ class QuillEditorState extends State customShortcuts: configurations.customShortcuts, customActions: configurations.customActions, customLinkPrefixes: configurations.customLinkPrefixes, - enableUnfocusOnTapOutside: configurations.enableUnfocusOnTapOutside, + enableUnfocusOnTapOutside: configurations.isOnTapOutsideEnabled, dialogTheme: configurations.dialogTheme, contentInsertionConfiguration: configurations.contentInsertionConfiguration, diff --git a/lib/src/widgets/raw_editor/raw_editor.dart b/lib/src/widgets/raw_editor/raw_editor.dart index c3efe93c5..8e5090f05 100644 --- a/lib/src/widgets/raw_editor/raw_editor.dart +++ b/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,7 +449,8 @@ 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: @@ -454,6 +458,11 @@ class RawEditorState extends EditorState 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 _requestFocusIfShould() async { + Future _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; } } diff --git a/lib/src/widgets/toolbar/toolbar.dart b/lib/src/widgets/toolbar/toolbar.dart index 9dbee7df4..092f50126 100644 --- a/lib/src/widgets/toolbar/toolbar.dart +++ b/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, diff --git a/pubspec.yaml b/pubspec.yaml index f7885b20f..86abf6446 100644 --- a/pubspec.yaml +++ b/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: