Feat: Line height support (#1972)
* Support for Line height * fix(translations): line-height translation empty * chore: dart fixes * fix(test): blockSelectionStyle doesn't find line-height attribute * fix: increased _expectedTranslationKeysLength value for new line height translation * fix: restore h1 configurations on DefaultStyles * fix: better organization for line height attribute * fix: select_line_height_dropdown_button doesn't find LineHeightAttribute constants * chore: dart fixes * fix(test): controller_test doesn't find LineHeightAttribute * fix: changed MenuAnchor to showMenu method since this MenuAnchor appears below keyboard * added docs comments * set showLineHeightButton to false * added warnings about line height attribute could cause conflicts with original Quill API * chore: dart fixes --------- Co-authored-by: CatHood0 <santiagowmar@gmail.com>pull/1976/head^2 v9.5.4
Cat
9 months ago
committed by
GitHub
parent
151e629ee3
commit
6598f3d74d
90 changed files with 784 additions and 199 deletions
@ -0,0 +1,78 @@ |
||||
import 'package:flutter/widgets.dart' |
||||
show IconData, TextStyle, ValueChanged, VoidCallback; |
||||
|
||||
import '../../../../widgets/toolbar/base_toolbar.dart'; |
||||
import '../../../documents/attribute.dart'; |
||||
import '../../../themes/quill_icon_theme.dart'; |
||||
|
||||
class QuillToolbarSelectLineHeightStyleDropdownButtonExtraOptions |
||||
extends QuillToolbarBaseButtonExtraOptions { |
||||
const QuillToolbarSelectLineHeightStyleDropdownButtonExtraOptions({ |
||||
required super.controller, |
||||
required super.context, |
||||
required super.onPressed, |
||||
required this.currentValue, |
||||
}); |
||||
final Attribute currentValue; |
||||
} |
||||
|
||||
class QuillToolbarSelectLineHeightStyleDropdownButtonOptions |
||||
extends QuillToolbarBaseButtonOptions< |
||||
QuillToolbarSelectLineHeightStyleDropdownButtonOptions, |
||||
QuillToolbarSelectLineHeightStyleDropdownButtonExtraOptions> { |
||||
const QuillToolbarSelectLineHeightStyleDropdownButtonOptions({ |
||||
super.afterButtonPressed, |
||||
super.childBuilder, |
||||
super.iconTheme, |
||||
super.tooltip, |
||||
super.iconSize, |
||||
super.iconButtonFactor, |
||||
this.textStyle, |
||||
super.iconData, |
||||
this.attributes, |
||||
this.defaultDisplayText, |
||||
this.width, |
||||
}); |
||||
|
||||
final TextStyle? textStyle; |
||||
|
||||
/// Line-height attributes, defaults to: |
||||
/// ```dart |
||||
/// [ |
||||
/// Attribute.lineHeightNormal, |
||||
/// Attribute.lineHeightTight, |
||||
/// Attribute.lineHeightOneAndHalf, |
||||
/// Attribute.lineHeightDouble, |
||||
/// ] |
||||
/// ``` |
||||
final List<Attribute<double?>>? attributes; |
||||
final double? width; |
||||
|
||||
final String? defaultDisplayText; |
||||
|
||||
QuillToolbarSelectLineHeightStyleDropdownButtonOptions copyWith({ |
||||
ValueChanged<String>? onSelected, |
||||
List<Attribute<double>>? attributes, |
||||
TextStyle? style, |
||||
double? iconSize, |
||||
double? iconButtonFactor, |
||||
IconData? iconData, |
||||
VoidCallback? afterButtonPressed, |
||||
String? tooltip, |
||||
QuillIconTheme? iconTheme, |
||||
String? defaultDisplayText, |
||||
double? width, |
||||
}) { |
||||
return QuillToolbarSelectLineHeightStyleDropdownButtonOptions( |
||||
attributes: attributes ?? this.attributes, |
||||
iconData: iconData ?? this.iconData, |
||||
afterButtonPressed: afterButtonPressed ?? this.afterButtonPressed, |
||||
tooltip: tooltip ?? this.tooltip, |
||||
iconTheme: iconTheme ?? this.iconTheme, |
||||
iconSize: iconSize ?? this.iconSize, |
||||
iconButtonFactor: iconButtonFactor ?? this.iconButtonFactor, |
||||
defaultDisplayText: defaultDisplayText ?? this.defaultDisplayText, |
||||
width: width ?? this.width, |
||||
); |
||||
} |
||||
} |
||||
@ -0,0 +1,234 @@ |
||||
import 'package:flutter/material.dart'; |
||||
|
||||
import '../../../../translations.dart'; |
||||
import '../../../extensions/quill_configurations_ext.dart'; |
||||
import '../../../models/config/toolbar/buttons/select_line_height_style_dropdown_button_configurations.dart'; |
||||
import '../../../models/documents/attribute.dart'; |
||||
import '../../../models/themes/quill_icon_theme.dart'; |
||||
import '../base_button/base_value_button.dart'; |
||||
import '../base_toolbar.dart'; |
||||
|
||||
typedef QuillToolbarSelectLineHeightStyleDropdownBaseButton |
||||
= QuillToolbarBaseButton< |
||||
QuillToolbarSelectLineHeightStyleDropdownButtonOptions, |
||||
QuillToolbarSelectLineHeightStyleDropdownButtonExtraOptions>; |
||||
|
||||
typedef QuillToolbarSelectLineHeightStyleDropdownBaseButtonsState< |
||||
W extends QuillToolbarSelectLineHeightStyleDropdownButton> |
||||
= QuillToolbarCommonButtonState< |
||||
W, |
||||
QuillToolbarSelectLineHeightStyleDropdownButtonOptions, |
||||
QuillToolbarSelectLineHeightStyleDropdownButtonExtraOptions>; |
||||
|
||||
class QuillToolbarSelectLineHeightStyleDropdownButton |
||||
extends QuillToolbarSelectLineHeightStyleDropdownBaseButton { |
||||
const QuillToolbarSelectLineHeightStyleDropdownButton({ |
||||
required super.controller, |
||||
super.options = |
||||
const QuillToolbarSelectLineHeightStyleDropdownButtonOptions(), |
||||
super.key, |
||||
}); |
||||
|
||||
@override |
||||
QuillToolbarSelectLineHeightStyleDropdownBaseButtonsState createState() => |
||||
_QuillToolbarSelectLineHeightStyleDropdownButtonState(); |
||||
} |
||||
|
||||
class _QuillToolbarSelectLineHeightStyleDropdownButtonState |
||||
extends QuillToolbarSelectLineHeightStyleDropdownBaseButtonsState { |
||||
@override |
||||
String get defaultTooltip => context.loc.lineheight; |
||||
|
||||
@override |
||||
IconData get defaultIconData => Icons.question_mark_outlined; |
||||
|
||||
Attribute<dynamic> _selectedItem = Attribute.lineHeight; |
||||
|
||||
@override |
||||
void initState() { |
||||
super.initState(); |
||||
widget.controller.addListener(_didChangeEditingValue); |
||||
} |
||||
|
||||
@override |
||||
void dispose() { |
||||
widget.controller.removeListener(_didChangeEditingValue); |
||||
super.dispose(); |
||||
} |
||||
|
||||
@override |
||||
void didUpdateWidget( |
||||
covariant QuillToolbarSelectLineHeightStyleDropdownButton oldWidget) { |
||||
super.didUpdateWidget(oldWidget); |
||||
if (oldWidget.controller == widget.controller) { |
||||
return; |
||||
} |
||||
widget.controller |
||||
..removeListener(_didChangeEditingValue) |
||||
..addListener(_didChangeEditingValue); |
||||
} |
||||
|
||||
void _didChangeEditingValue() { |
||||
final newSelectedItem = _getLineHeightValue(); |
||||
if (newSelectedItem == _selectedItem) { |
||||
return; |
||||
} |
||||
setState(() { |
||||
_selectedItem = newSelectedItem; |
||||
}); |
||||
} |
||||
|
||||
Attribute<dynamic> _getLineHeightValue() { |
||||
final attr = |
||||
widget.controller.toolbarButtonToggler[Attribute.lineHeight.key]; |
||||
if (attr != null) { |
||||
widget.controller.toolbarButtonToggler.remove(Attribute.lineHeight.key); |
||||
return attr; |
||||
} |
||||
return widget.controller |
||||
.getSelectionStyle() |
||||
.attributes[Attribute.lineHeight.key] ?? |
||||
Attribute.lineHeight; |
||||
} |
||||
|
||||
String _label(Attribute<dynamic> attribute) { |
||||
var label = LineHeightAttribute.lineHeightNormal.value.toString(); |
||||
if (attribute.value != null) { |
||||
label = attribute.value.toString(); |
||||
} |
||||
return label; |
||||
} |
||||
|
||||
List<Attribute<dynamic>> get lineHeightAttributes { |
||||
return widget.options.attributes ?? |
||||
[ |
||||
LineHeightAttribute.lineHeightNormal, |
||||
LineHeightAttribute.lineHeightTight, |
||||
LineHeightAttribute.lineHeightOneAndHalf, |
||||
LineHeightAttribute.lineHeightDouble, |
||||
]; |
||||
} |
||||
|
||||
void _onPressed(Attribute<dynamic> e) { |
||||
setState(() => _selectedItem = e); |
||||
widget.controller.formatSelection(_selectedItem); |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
final baseButtonConfigurations = context.quillToolbarBaseButtonOptions; |
||||
final childBuilder = |
||||
widget.options.childBuilder ?? baseButtonConfigurations?.childBuilder; |
||||
if (childBuilder != null) { |
||||
return childBuilder( |
||||
widget.options, |
||||
QuillToolbarSelectLineHeightStyleDropdownButtonExtraOptions( |
||||
currentValue: _selectedItem, |
||||
context: context, |
||||
controller: widget.controller, |
||||
onPressed: () { |
||||
throw UnimplementedError('Not implemented yet.'); |
||||
}, |
||||
), |
||||
); |
||||
} |
||||
|
||||
return Builder( |
||||
builder: (context) { |
||||
final isMaterial3 = Theme.of(context).useMaterial3; |
||||
final child = Row( |
||||
mainAxisSize: MainAxisSize.min, |
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
||||
children: [ |
||||
Text( |
||||
_label(_selectedItem), |
||||
style: widget.options.textStyle ?? |
||||
TextStyle( |
||||
fontSize: iconSize / 1.15, |
||||
), |
||||
), |
||||
Icon( |
||||
Icons.arrow_drop_down, |
||||
size: iconSize * iconButtonFactor, |
||||
), |
||||
], |
||||
); |
||||
if (!isMaterial3) { |
||||
return RawMaterialButton( |
||||
onPressed: () => _onDropdownButtonPressed(context), |
||||
child: child, |
||||
); |
||||
} |
||||
return _QuillToolbarLineHeightIcon( |
||||
iconTheme: iconTheme, |
||||
tooltip: tooltip, |
||||
onPressed: _onDropdownButtonPressed, |
||||
child: child, |
||||
); |
||||
}, |
||||
); |
||||
} |
||||
|
||||
Future<void> _onDropdownButtonPressed(BuildContext context) async { |
||||
final position = _renderPosition(context); |
||||
await showMenu<Attribute<dynamic>>( |
||||
context: context, |
||||
position: position, |
||||
items: lineHeightAttributes |
||||
.map( |
||||
(e) => PopupMenuItem( |
||||
value: e, |
||||
child: Text(_label(e)), |
||||
), |
||||
) |
||||
.toList()) |
||||
.then<void>( |
||||
(value) { |
||||
if (value != null) { |
||||
_onPressed(value); |
||||
} |
||||
}, |
||||
); |
||||
} |
||||
|
||||
RelativeRect _renderPosition(BuildContext context) { |
||||
final size = MediaQuery.sizeOf(context); |
||||
final overlay = Overlay.of(context).context.findRenderObject() as RenderBox; |
||||
final button = context.findRenderObject() as RenderBox; |
||||
final position = RelativeRect.fromRect( |
||||
Rect.fromPoints( |
||||
button.localToGlobal(const Offset(0, -65), ancestor: overlay), |
||||
button.localToGlobal( |
||||
button.size.bottomRight(Offset.zero) + const Offset(-50, 0), |
||||
ancestor: overlay), |
||||
), |
||||
Offset.zero & size * 0.40, |
||||
); |
||||
return position; |
||||
} |
||||
} |
||||
|
||||
class _QuillToolbarLineHeightIcon extends StatelessWidget { |
||||
const _QuillToolbarLineHeightIcon({ |
||||
required this.tooltip, |
||||
required this.iconTheme, |
||||
required this.onPressed, |
||||
required this.child, |
||||
}); |
||||
|
||||
final Row child; |
||||
final void Function(BuildContext) onPressed; |
||||
final QuillIconTheme? iconTheme; |
||||
final String tooltip; |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
return QuillToolbarIconButton( |
||||
icon: child, |
||||
isSelected: false, |
||||
iconTheme: iconTheme, |
||||
tooltip: tooltip, |
||||
onPressed: () => onPressed(context), |
||||
); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue