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