From 2283d8b3cebe513f66e3b1595e4c208a41db2c58 Mon Sep 17 00:00:00 2001 From: Ellet Date: Fri, 8 Dec 2023 00:47:46 +0300 Subject: [PATCH] Improve font family button --- CHANGELOG.md | 3 + example/devtools_options.yaml | 1 + lib/src/widgets/quill/quill_controller.dart | 2 +- .../widgets/raw_editor/raw_editor_state.dart | 1 - ..._editor_state_text_input_client_mixin.dart | 18 +++++- .../toolbar/buttons/font_family_button.dart | 61 ++++++++++--------- .../buttons/select_header_style_button.dart | 18 ++++++ 7 files changed, 73 insertions(+), 31 deletions(-) create mode 100644 example/devtools_options.yaml diff --git a/CHANGELOG.md b/CHANGELOG.md index 0b30a16d..027e8897 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/example/devtools_options.yaml b/example/devtools_options.yaml new file mode 100644 index 00000000..7e7e7f67 --- /dev/null +++ b/example/devtools_options.yaml @@ -0,0 +1 @@ +extensions: diff --git a/lib/src/widgets/quill/quill_controller.dart b/lib/src/widgets/quill/quill_controller.dart index f9f89f6a..2ca84b8b 100644 --- a/lib/src/widgets/quill/quill_controller.dart +++ b/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] diff --git a/lib/src/widgets/raw_editor/raw_editor_state.dart b/lib/src/widgets/raw_editor/raw_editor_state.dart index aaf32405..ce52e406 100644 --- a/lib/src/widgets/raw_editor/raw_editor_state.dart +++ b/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'; 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 2c6a08da..d5dd4169 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 @@ -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, + ), + ); + } } } diff --git a/lib/src/widgets/toolbar/buttons/font_family_button.dart b/lib/src/widgets/toolbar/buttons/font_family_button.dart index edc115d2..24d24c0c 100644 --- a/lib/src/widgets/toolbar/buttons/font_family_button.dart +++ b/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 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 ?? diff --git a/lib/src/widgets/toolbar/buttons/select_header_style_button.dart b/lib/src/widgets/toolbar/buttons/select_header_style_button.dart index 1e92c84f..da04b84a 100644 --- a/lib/src/widgets/toolbar/buttons/select_header_style_button.dart +++ b/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) {