Improve font size button

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

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`)

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/

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`)

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/

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,
     );

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;

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),
+          ),
+        );
+      }
     }
   }
 

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(

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(() {
+      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(

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`)

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/

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/