From 03610e9a871b9a2c4e76fd438c4693994957537e Mon Sep 17 00:00:00 2001 From: Ellet Date: Fri, 8 Dec 2023 01:15:43 +0300 Subject: [PATCH] Improve font size button --- CHANGELOG.md | 2 +- flutter_quill_extensions/CHANGELOG.md | 7 ++ flutter_quill_extensions/pubspec.yaml | 2 +- flutter_quill_test/CHANGELOG.md | 7 ++ flutter_quill_test/pubspec.yaml | 2 +- .../buttons/font_size_configurations.dart | 27 ++++--- lib/src/widgets/quill/quill_controller.dart | 10 ++- ..._editor_state_text_input_client_mixin.dart | 15 ++++ .../toolbar/buttons/font_family_button.dart | 4 +- .../toolbar/buttons/font_size_button.dart | 71 ++++++++----------- packages/quill_html_converter/CHANGELOG.md | 7 ++ packages/quill_html_converter/pubspec.yaml | 2 +- pubspec.yaml | 2 +- 13 files changed, 93 insertions(+), 65 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 027e8897..888f6692 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,7 @@ All notable changes to this project will be documented in this file. * Update `README.md` and the doc * Dispose the `QuillToolbarSelectHeaderStyleButton` state listener in `dispose` * Upgrade the font family button to material 3 -* Rework the font family functionallity to change the font once and type all over the editor +* Rework the font family and font size functionallities to change the font once and type all over the editor ## 9.0.0-dev-8 * Better support for pasting HTML contents from external websites to the editor diff --git a/flutter_quill_extensions/CHANGELOG.md b/flutter_quill_extensions/CHANGELOG.md index 09d629a3..888f6692 100644 --- a/flutter_quill_extensions/CHANGELOG.md +++ b/flutter_quill_extensions/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. +## 9.0.0-dev-9 +* Improves the new logic of pasting HTML contents into the Editor +* Update `README.md` and the doc +* Dispose the `QuillToolbarSelectHeaderStyleButton` state listener in `dispose` +* Upgrade the font family button to material 3 +* Rework the font family and font size functionallities to change the font once and type all over the editor + ## 9.0.0-dev-8 * Better support for pasting HTML contents from external websites to the editor * The experimental support of converting the HTML from `quill_html_converter` is now built-in in the `flutter_quill` and removed from there (Breaking change for `quill_html_converter`) diff --git a/flutter_quill_extensions/pubspec.yaml b/flutter_quill_extensions/pubspec.yaml index 8f3cf206..58d8952a 100644 --- a/flutter_quill_extensions/pubspec.yaml +++ b/flutter_quill_extensions/pubspec.yaml @@ -1,6 +1,6 @@ name: flutter_quill_extensions description: Embed extensions for flutter_quill including image, video, formula and etc. -version: 9.0.0-dev-8 +version: 9.0.0-dev-9 homepage: https://github.com/singerdmx/flutter-quill/tree/master/flutter_quill_extensions/ repository: https://github.com/singerdmx/flutter-quill/tree/master/flutter_quill_extensions/ issue_tracker: https://github.com/singerdmx/flutter-quill/issues/ diff --git a/flutter_quill_test/CHANGELOG.md b/flutter_quill_test/CHANGELOG.md index 09d629a3..888f6692 100644 --- a/flutter_quill_test/CHANGELOG.md +++ b/flutter_quill_test/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. +## 9.0.0-dev-9 +* Improves the new logic of pasting HTML contents into the Editor +* Update `README.md` and the doc +* Dispose the `QuillToolbarSelectHeaderStyleButton` state listener in `dispose` +* Upgrade the font family button to material 3 +* Rework the font family and font size functionallities to change the font once and type all over the editor + ## 9.0.0-dev-8 * Better support for pasting HTML contents from external websites to the editor * The experimental support of converting the HTML from `quill_html_converter` is now built-in in the `flutter_quill` and removed from there (Breaking change for `quill_html_converter`) diff --git a/flutter_quill_test/pubspec.yaml b/flutter_quill_test/pubspec.yaml index e50efc52..75e9d5a9 100644 --- a/flutter_quill_test/pubspec.yaml +++ b/flutter_quill_test/pubspec.yaml @@ -1,6 +1,6 @@ name: flutter_quill_test description: Test utilities for flutter_quill which includes methods to simplify interacting with the editor in test cases. -version: 9.0.0-dev-8 +version: 9.0.0-dev-9 homepage: https://github.com/singerdmx/flutter-quill/tree/master/flutter_quill_test/ repository: https://github.com/singerdmx/flutter-quill/tree/master/flutter_quill_test/ issue_tracker: https://github.com/singerdmx/flutter-quill/issues/ diff --git a/lib/src/models/config/toolbar/buttons/font_size_configurations.dart b/lib/src/models/config/toolbar/buttons/font_size_configurations.dart index ec3c6682..37ba61f1 100644 --- a/lib/src/models/config/toolbar/buttons/font_size_configurations.dart +++ b/lib/src/models/config/toolbar/buttons/font_size_configurations.dart @@ -2,13 +2,18 @@ import 'dart:ui'; import 'package:flutter/foundation.dart' show immutable; import 'package:flutter/material.dart' - show Colors, PopupMenuEntry, ValueChanged; + show ButtonStyle, Colors, PopupMenuEntry, ValueChanged; import 'package:flutter/widgets.dart' - show Color, EdgeInsets, EdgeInsetsGeometry, TextOverflow, TextStyle; + show + Color, + EdgeInsets, + EdgeInsetsGeometry, + OutlinedBorder, + TextOverflow, + TextStyle; import '../../../../widgets/quill/quill_controller.dart'; import '../../../documents/attribute.dart'; -import '../../../themes/quill_icon_theme.dart'; import '../../quill_configurations.dart'; class QuillToolbarFontSizeButtonExtraOptions @@ -31,12 +36,8 @@ class QuillToolbarFontSizeButtonOptions extends QuillToolbarBaseButtonOptions< const QuillToolbarFontSizeButtonOptions({ this.iconSize, this.iconButtonFactor, - this.fillColor, - this.hoverElevation = 1, - this.highlightElevation = 1, this.rawItemsMap, this.onSelected, - super.iconTheme, this.attribute = Attribute.size, super.controller, super.afterButtonPressed, @@ -50,13 +51,13 @@ class QuillToolbarFontSizeButtonOptions extends QuillToolbarBaseButtonOptions< this.itemPadding, this.defaultItemColor = Colors.red, super.childBuilder, + this.shape, }); final double? iconSize; final double? iconButtonFactor; - final Color? fillColor; - final double hoverElevation; - final double highlightElevation; + + final ButtonStyle? shape; /// By default it will be [fontSizesValues] from [QuillSimpleToolbarConfigurations] /// You can override this if you want @@ -92,15 +93,12 @@ class QuillToolbarFontSizeButtonOptions extends QuillToolbarBaseButtonOptions< Color? defaultItemColor, VoidCallback? afterButtonPressed, String? tooltip, - QuillIconTheme? iconTheme, QuillController? controller, + OutlinedBorder? shape, }) { return QuillToolbarFontSizeButtonOptions( iconSize: iconSize ?? this.iconSize, iconButtonFactor: iconButtonFactor ?? this.iconButtonFactor, - fillColor: fillColor ?? this.fillColor, - hoverElevation: hoverElevation ?? this.hoverElevation, - highlightElevation: highlightElevation ?? this.highlightElevation, rawItemsMap: rawItemsMap ?? this.rawItemsMap, onSelected: onSelected ?? this.onSelected, attribute: attribute ?? this.attribute, @@ -113,7 +111,6 @@ class QuillToolbarFontSizeButtonOptions extends QuillToolbarBaseButtonOptions< itemPadding: itemPadding ?? this.itemPadding, defaultItemColor: defaultItemColor ?? this.defaultItemColor, tooltip: tooltip ?? super.tooltip, - iconTheme: iconTheme ?? super.iconTheme, afterButtonPressed: afterButtonPressed ?? super.afterButtonPressed, controller: controller ?? super.controller, ); diff --git a/lib/src/widgets/quill/quill_controller.dart b/lib/src/widgets/quill/quill_controller.dart index 2ca84b8b..8bbf1095 100644 --- a/lib/src/widgets/quill/quill_controller.dart +++ b/lib/src/widgets/quill/quill_controller.dart @@ -63,10 +63,18 @@ class QuillController extends ChangeNotifier { String? _selectedFontFamily; String? get selectedFontFamily => _selectedFontFamily; - void selectFontFamily(String newFontFamily) { + void selectFontFamily(String? newFontFamily) { _selectedFontFamily = newFontFamily; } + /// The current font size, null to use the default one + String? _selectedFontSize; + String? get selectedFontSize => _selectedFontSize; + + void selectFontSize(String? newFontSize) { + _selectedFontSize = newFontSize; + } + /// Tells whether to keep or reset the [toggledStyle] /// when user adds a new line. final bool _keepStyleOnNewLine; diff --git a/lib/src/widgets/raw_editor/raw_editor_state_text_input_client_mixin.dart b/lib/src/widgets/raw_editor/raw_editor_state_text_input_client_mixin.dart index b285d1f8..9d51c574 100644 --- a/lib/src/widgets/raw_editor/raw_editor_state_text_input_client_mixin.dart +++ b/lib/src/widgets/raw_editor/raw_editor_state_text_input_client_mixin.dart @@ -10,6 +10,7 @@ import 'package:flutter/services.dart'; import '../../models/documents/attribute.dart'; import '../../models/documents/document.dart'; import '../../utils/delta.dart'; +import '../../utils/font.dart'; import '../editor/editor.dart'; import 'raw_editor.dart'; @@ -216,6 +217,20 @@ mixin RawEditorStateTextInputClientMixin on EditorState ), ); } + + if (widget.configurations.controller.selectedFontSize != null) { + widget.configurations.controller.formatText( + diff.start, + diff.deleted.length, + Attribute.fromKeyValue( + Attribute.size.key, + widget.configurations.controller.selectedFontSize == '0' + ? null + : getFontSize( + widget.configurations.controller.selectedFontSize), + ), + ); + } } } diff --git a/lib/src/widgets/toolbar/buttons/font_family_button.dart b/lib/src/widgets/toolbar/buttons/font_family_button.dart index 3cfc4de4..17c87fb9 100644 --- a/lib/src/widgets/toolbar/buttons/font_family_button.dart +++ b/lib/src/widgets/toolbar/buttons/font_family_button.dart @@ -5,7 +5,6 @@ import '../../../extensions/quill_configurations_ext.dart'; import '../../../l10n/extensions/localizations.dart'; import '../../../models/config/toolbar/buttons/font_family_configurations.dart'; import '../../../models/documents/attribute.dart'; -import '../../../models/documents/style.dart'; import '../../../models/themes/quill_icon_theme.dart'; import '../../quill/quill_controller.dart'; @@ -226,6 +225,7 @@ class QuillToolbarFontFamilyButtonState padding: options.itemPadding, onTap: () { if (fontFamily.value == 'Clear') { + controller.selectFontFamily(null); return; } controller.selectFontFamily(fontFamily.value); @@ -256,6 +256,8 @@ class QuillToolbarFontFamilyButtonState setState(() { if (keyName != 'Clear') { _currentValue = keyName ?? _defaultDisplayText; + } else { + _currentValue = _defaultDisplayText; } if (keyName != null) { controller.formatSelection( diff --git a/lib/src/widgets/toolbar/buttons/font_size_button.dart b/lib/src/widgets/toolbar/buttons/font_size_button.dart index d1ee7752..048c5fb3 100644 --- a/lib/src/widgets/toolbar/buttons/font_size_button.dart +++ b/lib/src/widgets/toolbar/buttons/font_size_button.dart @@ -57,47 +57,17 @@ class QuillToolbarFontSizeButtonState return options.initialValue ?? widget.defaultDisplayText; } - Style get _selectionStyle => controller.getSelectionStyle(); - @override void initState() { super.initState(); - - _initState(); - } - - void _initState() { _currentValue = _defaultDisplayText; - controller.addListener(_didChangeEditingValue); } @override void dispose() { - controller.removeListener(_didChangeEditingValue); super.dispose(); } - @override - void didUpdateWidget(covariant QuillToolbarFontSizeButton oldWidget) { - super.didUpdateWidget(oldWidget); - if (controller == oldWidget.controller) { - return; - } - controller - ..removeListener(_didChangeEditingValue) - ..addListener(_didChangeEditingValue); - } - - void _didChangeEditingValue() { - final attribute = _selectionStyle.attributes[options.attribute.key]; - if (attribute == null) { - setState(() => _currentValue = _defaultDisplayText); - return; - } - final keyName = _getKeyName(attribute.value); - setState(() => _currentValue = keyName ?? _defaultDisplayText); - } - String? _getKeyName(dynamic value) { for (final entry in rawItemsMap.entries) { if (getFontSize(entry.value) == getFontSize(value)) { @@ -157,7 +127,6 @@ class QuillToolbarFontSizeButtonState tooltip: tooltip, iconSize: iconSize, iconButtonFactor: iconButtonFactor, - iconTheme: iconTheme, afterButtonPressed: afterButtonPressed, controller: controller, ), @@ -177,17 +146,18 @@ class QuillToolbarFontSizeButtonState ), child: UtilityWidgets.maybeTooltip( message: tooltip, - child: RawMaterialButton( + child: IconButton( visualDensity: VisualDensity.compact, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(iconTheme?.borderRadius ?? 2), + style: IconButton.styleFrom( + shape: iconTheme?.borderRadius != null + ? RoundedRectangleBorder( + borderRadius: + BorderRadius.circular(iconTheme?.borderRadius ?? -1), + ) + : null, ), - fillColor: options.fillColor, - elevation: 0, - hoverElevation: options.hoverElevation, - highlightElevation: options.hoverElevation, onPressed: _onPressed, - child: _buildContent(context), + icon: _buildContent(context), ), ), ); @@ -215,6 +185,13 @@ class QuillToolbarFontSizeButtonState value: fontSize.value, height: options.itemHeight ?? kMinInteractiveDimension, padding: options.itemPadding, + onTap: () { + if (fontSize.value == '0') { + controller.selectFontSize(null); + return; + } + controller.selectFontSize(fontSize.value); + }, child: Text( fontSize.key.toString(), style: TextStyle( @@ -233,10 +210,18 @@ class QuillToolbarFontSizeButtonState } final keyName = _getKeyName(newValue); setState(() { - _currentValue = keyName ?? _defaultDisplayText; + if (keyName != 'Clear') { + _currentValue = keyName ?? _defaultDisplayText; + } else { + _currentValue = _defaultDisplayText; + } if (keyName != null) { - controller.formatSelection(Attribute.fromKeyValue( - 'size', newValue == '0' ? null : getFontSize(newValue))); + controller.formatSelection( + Attribute.fromKeyValue( + Attribute.size.key, + newValue == '0' ? null : getFontSize(newValue), + ), + ); options.onSelected?.call(newValue); } }); @@ -255,7 +240,7 @@ class QuillToolbarFontSizeButtonState enabled: hasFinalWidth, wrapper: (child) => Expanded(child: child), child: Text( - _currentValue, + widget.controller.selectedFontSize ?? _currentValue, overflow: options.labelOverflow, style: options.style ?? TextStyle( diff --git a/packages/quill_html_converter/CHANGELOG.md b/packages/quill_html_converter/CHANGELOG.md index 09d629a3..888f6692 100644 --- a/packages/quill_html_converter/CHANGELOG.md +++ b/packages/quill_html_converter/CHANGELOG.md @@ -2,6 +2,13 @@ All notable changes to this project will be documented in this file. +## 9.0.0-dev-9 +* Improves the new logic of pasting HTML contents into the Editor +* Update `README.md` and the doc +* Dispose the `QuillToolbarSelectHeaderStyleButton` state listener in `dispose` +* Upgrade the font family button to material 3 +* Rework the font family and font size functionallities to change the font once and type all over the editor + ## 9.0.0-dev-8 * Better support for pasting HTML contents from external websites to the editor * The experimental support of converting the HTML from `quill_html_converter` is now built-in in the `flutter_quill` and removed from there (Breaking change for `quill_html_converter`) diff --git a/packages/quill_html_converter/pubspec.yaml b/packages/quill_html_converter/pubspec.yaml index a5aa9589..4cc603a5 100644 --- a/packages/quill_html_converter/pubspec.yaml +++ b/packages/quill_html_converter/pubspec.yaml @@ -1,6 +1,6 @@ name: quill_html_converter description: A extension for flutter_quill package to add support for dealing with conversion to/from html -version: 9.0.0-dev-8 +version: 9.0.0-dev-9 homepage: https://github.com/singerdmx/flutter-quill/tree/master/packages/quill_html_converter/ repository: https://github.com/singerdmx/flutter-quill/tree/master/packages/quill_html_converter/ issue_tracker: https://github.com/singerdmx/flutter-quill/issues/ diff --git a/pubspec.yaml b/pubspec.yaml index 7d396197..e26b0f7c 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: 9.0.0-dev-8 +version: 9.0.0-dev-9 homepage: https://1o24bbs.com/c/bulletjournal/108/ repository: https://github.com/singerdmx/flutter-quill/ issue_tracker: https://github.com/singerdmx/flutter-quill/issues/