Improve font family button

CHANGELOG.md

@@ -5,6 +5,9 @@ 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 functionallity 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

example/devtools_options.yaml

@@ -0,0 +1 @@
+extensions:

lib/src/widgets/quill/quill_controller.dart

@@ -64,7 +64,7 @@ class QuillController extends ChangeNotifier {
   String? get selectedFontFamily => _selectedFontFamily;
 
   void selectFontFamily(String newFontFamily) {
-    _selectedFontFamily = selectedFontFamily;
+    _selectedFontFamily = newFontFamily;
   }
 
   /// Tells whether to keep or reset the [toggledStyle]

lib/src/widgets/raw_editor/raw_editor_state.dart

@@ -28,7 +28,6 @@ import '../../models/documents/nodes/embeddable.dart';
 import '../../models/documents/nodes/leaf.dart' as leaf;
 import '../../models/documents/nodes/line.dart';
 import '../../models/documents/nodes/node.dart';
-import '../../models/quill_delta.dart';
 import '../../models/structs/offset_value.dart';
 import '../../models/structs/vertical_spacing.dart';
 import '../../utils/cast.dart';

lib/src/widgets/raw_editor/raw_editor_state_text_input_client_mixin.dart

@@ -7,6 +7,7 @@ import 'package:flutter/material.dart' show Theme;
 import 'package:flutter/scheduler.dart' show SchedulerBinding;
 import 'package:flutter/services.dart';
 
+import '../../models/documents/attribute.dart';
 import '../../models/documents/document.dart';
 import '../../utils/delta.dart';
 import '../editor/editor.dart';
@@ -200,7 +201,22 @@ mixin RawEditorStateTextInputClientMixin on EditorState
           .updateSelection(value.selection, ChangeSource.local);
     } else {
       widget.configurations.controller.replaceText(
-          diff.start, diff.deleted.length, diff.inserted, value.selection);
+        diff.start,
+        diff.deleted.length,
+        diff.inserted,
+        value.selection,
+      );
+      print(widget.configurations.controller.selectedFontFamily != null);
+      if (widget.configurations.controller.selectedFontFamily != null) {
+        widget.configurations.controller.formatText(
+          diff.start,
+          diff.deleted.length,
+          Attribute.fromKeyValue(
+            Attribute.font.key,
+            widget.configurations.controller.selectedFontFamily,
+          ),
+        );
+      }
     }
   }
 

lib/src/widgets/toolbar/buttons/font_family_button.dart

@@ -51,39 +51,39 @@ class QuillToolbarFontFamilyButtonState
 
   void _initState() {
     _currentValue = _defaultDisplayText;
-    controller.addListener(_didChangeEditingValue);
+    // controller.addListener(_didChangeEditingValue);
   }
 
-  @override
-  void dispose() {
-    controller.removeListener(_didChangeEditingValue);
-    super.dispose();
-  }
+  // @override
+  // void dispose() {
+  //   controller.removeListener(_didChangeEditingValue);
+  //   super.dispose();
+  // }
 
   String get _defaultDisplayText {
     return options.initialValue ?? widget.defaultDispalyText;
   }
 
-  @override
-  void didUpdateWidget(covariant QuillToolbarFontFamilyButton oldWidget) {
-    super.didUpdateWidget(oldWidget);
-    if (oldWidget.controller == controller) {
-      return;
-    }
-    controller
-      ..removeListener(_didChangeEditingValue)
-      ..addListener(_didChangeEditingValue);
-  }
+  // @override
+  // void didUpdateWidget(covariant QuillToolbarFontFamilyButton oldWidget) {
+  //   super.didUpdateWidget(oldWidget);
+  //   if (oldWidget.controller == 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);
-  }
+  // 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);
+  // }
 
   Map<String, String> get rawItemsMap {
     final rawItemsMap =
@@ -225,6 +225,9 @@ class QuillToolbarFontFamilyButtonState
             height: options.itemHeight ?? kMinInteractiveDimension,
             padding: options.itemPadding,
             onTap: () {
+              if (fontFamily.value == 'Clear') {
+                return;
+              }
               controller.selectFontFamily(fontFamily.value);
             },
             child: Text(
@@ -251,11 +254,13 @@ class QuillToolbarFontFamilyButtonState
     }
     final keyName = _getKeyName(newValue);
     setState(() {
-      _currentValue = keyName ?? _defaultDisplayText;
+      if (keyName != 'Clear') {
+        _currentValue = keyName ?? _defaultDisplayText;
+      }
       if (keyName != null) {
         controller.formatSelection(
           Attribute.fromKeyValue(
-            'font',
+            Attribute.font.key,
             newValue == 'Clear' ? null : newValue,
           ),
         );
@@ -277,7 +282,7 @@ class QuillToolbarFontFamilyButtonState
             enabled: hasFinalWidth,
             wrapper: (child) => Expanded(child: child),
             child: Text(
-              _currentValue,
+              widget.controller.selectedFontFamily ?? _currentValue,
               maxLines: 1,
               overflow: options.labelOverflow,
               style: options.style ??

lib/src/widgets/toolbar/buttons/select_header_style_button.dart

@@ -37,6 +37,24 @@ class _QuillToolbarSelectHeaderStyleButtonState
     widget.controller.addListener(_didChangeEditingValue);
   }
 
+  @override
+  void dispose() {
+    widget.controller.removeListener(_didChangeEditingValue);
+    super.dispose();
+  }
+
+  @override
+  void didUpdateWidget(
+      covariant QuillToolbarSelectHeaderStyleButton oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (oldWidget.controller == widget.controller) {
+      return;
+    }
+    widget.controller
+      ..removeListener(_didChangeEditingValue)
+      ..addListener(_didChangeEditingValue);
+  }
+
   void _didChangeEditingValue() {
     final newSelectedItem = _getOptionsItemByAttribute(_getHeaderValue());
     if (newSelectedItem == _selectedItem) {