Editor tweaks (#1185)
BambinoUA
2 years ago
committed by
GitHub
parent
f2a1a1f45a
commit
411f911dfb
8 changed files with 871 additions and 155 deletions
@ -0,0 +1,447 @@ |
||||
import 'package:flutter/foundation.dart'; |
||||
import 'package:flutter/material.dart'; |
||||
import 'package:url_launcher/link.dart'; |
||||
|
||||
import '../../../extensions.dart'; |
||||
import '../../../translations.dart'; |
||||
import '../../models/documents/attribute.dart'; |
||||
import '../../models/themes/quill_dialog_theme.dart'; |
||||
import '../../models/themes/quill_icon_theme.dart'; |
||||
import '../../utils/widgets.dart'; |
||||
import '../controller.dart'; |
||||
import '../link.dart'; |
||||
import '../toolbar.dart'; |
||||
|
||||
/// Alternative version of [LinkStyleButton]. This widget has more customization |
||||
/// and uses dialog similar to one which is used on [http://quilljs.com]. |
||||
class LinkStyleButton2 extends StatefulWidget { |
||||
const LinkStyleButton2({ |
||||
required this.controller, |
||||
this.icon, |
||||
this.iconSize = kDefaultIconSize, |
||||
this.iconTheme, |
||||
this.dialogTheme, |
||||
this.afterButtonPressed, |
||||
this.tooltip, |
||||
this.constraints, |
||||
this.addLinkLabel, |
||||
this.editLinkLabel, |
||||
this.linkColor, |
||||
this.childrenSpacing = 16.0, |
||||
this.autovalidateMode = AutovalidateMode.disabled, |
||||
this.validationMessage, |
||||
this.buttonSize, |
||||
Key? key, |
||||
}) : assert(addLinkLabel == null || addLinkLabel.length > 0), |
||||
assert(editLinkLabel == null || editLinkLabel.length > 0), |
||||
assert(childrenSpacing > 0), |
||||
assert(validationMessage == null || validationMessage.length > 0), |
||||
super(key: key); |
||||
|
||||
final QuillController controller; |
||||
final IconData? icon; |
||||
final double iconSize; |
||||
final QuillIconTheme? iconTheme; |
||||
final QuillDialogTheme? dialogTheme; |
||||
final VoidCallback? afterButtonPressed; |
||||
final String? tooltip; |
||||
|
||||
/// The constrains for dialog. |
||||
final BoxConstraints? constraints; |
||||
|
||||
/// The text of label in link add mode. |
||||
final String? addLinkLabel; |
||||
|
||||
/// The text of label in link edit mode. |
||||
final String? editLinkLabel; |
||||
|
||||
/// The color of URL. |
||||
final Color? linkColor; |
||||
|
||||
/// The margin between child widgets in the dialog. |
||||
final double childrenSpacing; |
||||
|
||||
final AutovalidateMode autovalidateMode; |
||||
final String? validationMessage; |
||||
|
||||
/// The size of dialog buttons. |
||||
final Size? buttonSize; |
||||
|
||||
@override |
||||
State<LinkStyleButton2> createState() => _LinkStyleButton2State(); |
||||
} |
||||
|
||||
class _LinkStyleButton2State extends State<LinkStyleButton2> { |
||||
@override |
||||
void dispose() { |
||||
super.dispose(); |
||||
widget.controller.removeListener(_didChangeSelection); |
||||
} |
||||
|
||||
@override |
||||
void initState() { |
||||
super.initState(); |
||||
widget.controller.addListener(_didChangeSelection); |
||||
} |
||||
|
||||
@override |
||||
void didUpdateWidget(covariant LinkStyleButton2 oldWidget) { |
||||
super.didUpdateWidget(oldWidget); |
||||
if (oldWidget.controller != widget.controller) { |
||||
oldWidget.controller.removeListener(_didChangeSelection); |
||||
widget.controller.addListener(_didChangeSelection); |
||||
} |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
final theme = Theme.of(context); |
||||
final isToggled = _getLinkAttributeValue() != null; |
||||
return QuillIconButton( |
||||
tooltip: widget.tooltip, |
||||
highlightElevation: 0, |
||||
hoverElevation: 0, |
||||
size: widget.iconSize * kIconButtonFactor, |
||||
icon: Icon( |
||||
widget.icon ?? Icons.link, |
||||
size: widget.iconSize, |
||||
color: isToggled |
||||
? (widget.iconTheme?.iconSelectedColor ?? |
||||
theme.primaryIconTheme.color) |
||||
: (widget.iconTheme?.iconUnselectedColor ?? theme.iconTheme.color), |
||||
), |
||||
fillColor: isToggled |
||||
? (widget.iconTheme?.iconSelectedFillColor ?? |
||||
Theme.of(context).primaryColor) |
||||
: (widget.iconTheme?.iconUnselectedFillColor ?? theme.canvasColor), |
||||
borderRadius: widget.iconTheme?.borderRadius ?? 2, |
||||
onPressed: _openLinkDialog, |
||||
afterPressed: widget.afterButtonPressed, |
||||
); |
||||
} |
||||
|
||||
Future<void> _openLinkDialog() async { |
||||
final initialTextLink = QuillTextLink.prepare(widget.controller); |
||||
|
||||
final textLink = await showDialog<QuillTextLink>( |
||||
context: context, |
||||
builder: (_) => LinkStyleDialog( |
||||
dialogTheme: widget.dialogTheme, |
||||
text: initialTextLink.text, |
||||
link: initialTextLink.link, |
||||
constraints: widget.constraints, |
||||
addLinkLabel: widget.addLinkLabel, |
||||
editLinkLabel: widget.editLinkLabel, |
||||
linkColor: widget.linkColor, |
||||
childrenSpacing: widget.childrenSpacing, |
||||
autovalidateMode: widget.autovalidateMode, |
||||
validationMessage: widget.validationMessage, |
||||
buttonSize: widget.buttonSize, |
||||
), |
||||
); |
||||
|
||||
if (textLink != null) { |
||||
textLink.submit(widget.controller); |
||||
} |
||||
} |
||||
|
||||
String? _getLinkAttributeValue() { |
||||
return widget.controller |
||||
.getSelectionStyle() |
||||
.attributes[Attribute.link.key] |
||||
?.value; |
||||
} |
||||
|
||||
void _didChangeSelection() { |
||||
setState(() {}); |
||||
} |
||||
} |
||||
|
||||
class LinkStyleDialog extends StatefulWidget { |
||||
const LinkStyleDialog({ |
||||
Key? key, |
||||
this.text, |
||||
this.link, |
||||
this.dialogTheme, |
||||
this.constraints, |
||||
this.contentPadding = |
||||
const EdgeInsets.symmetric(vertical: 16, horizontal: 16), |
||||
this.addLinkLabel, |
||||
this.editLinkLabel, |
||||
this.linkColor, |
||||
this.childrenSpacing = 16.0, |
||||
this.autovalidateMode = AutovalidateMode.disabled, |
||||
this.validationMessage, |
||||
this.buttonSize, |
||||
}) : assert(addLinkLabel == null || addLinkLabel.length > 0), |
||||
assert(editLinkLabel == null || editLinkLabel.length > 0), |
||||
assert(childrenSpacing > 0), |
||||
assert(validationMessage == null || validationMessage.length > 0), |
||||
super(key: key); |
||||
|
||||
final String? text; |
||||
final String? link; |
||||
final QuillDialogTheme? dialogTheme; |
||||
|
||||
/// The constrains for dialog. |
||||
final BoxConstraints? constraints; |
||||
|
||||
/// The padding for content of dialog. |
||||
final EdgeInsetsGeometry contentPadding; |
||||
|
||||
/// The text of label in link add mode. |
||||
final String? addLinkLabel; |
||||
|
||||
/// The text of label in link edit mode. |
||||
final String? editLinkLabel; |
||||
|
||||
/// The color of URL. |
||||
final Color? linkColor; |
||||
|
||||
/// The margin between child widgets in the dialog. |
||||
final double childrenSpacing; |
||||
|
||||
final AutovalidateMode autovalidateMode; |
||||
final String? validationMessage; |
||||
|
||||
/// The size of dialog buttons. |
||||
final Size? buttonSize; |
||||
|
||||
@override |
||||
State<LinkStyleDialog> createState() => _LinkStyleDialogState(); |
||||
} |
||||
|
||||
class _LinkStyleDialogState extends State<LinkStyleDialog> { |
||||
late final TextEditingController _linkController; |
||||
|
||||
late String _link; |
||||
late String _text; |
||||
|
||||
late bool _isEditMode; |
||||
|
||||
@override |
||||
void dispose() { |
||||
_linkController.dispose(); |
||||
super.dispose(); |
||||
} |
||||
|
||||
@override |
||||
void initState() { |
||||
super.initState(); |
||||
_link = widget.link ?? ''; |
||||
_text = widget.text ?? ''; |
||||
_isEditMode = _link.isNotEmpty; |
||||
_linkController = TextEditingController.fromValue( |
||||
TextEditingValue( |
||||
text: _isEditMode ? _link : '', |
||||
selection: _isEditMode |
||||
? TextSelection(baseOffset: 0, extentOffset: _link.length) |
||||
: const TextSelection.collapsed(offset: 0), |
||||
), |
||||
); |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
final constraints = widget.constraints ?? |
||||
widget.dialogTheme?.linkDialogConstraints ?? |
||||
() { |
||||
final mediaQuery = MediaQuery.of(context); |
||||
final maxWidth = |
||||
kIsWeb ? mediaQuery.size.width / 4 : mediaQuery.size.width - 80; |
||||
return BoxConstraints(maxWidth: maxWidth, maxHeight: 80); |
||||
}(); |
||||
|
||||
final buttonStyle = widget.buttonSize != null |
||||
? Theme.of(context) |
||||
.elevatedButtonTheme |
||||
.style |
||||
?.copyWith(fixedSize: MaterialStatePropertyAll(widget.buttonSize)) |
||||
: widget.dialogTheme?.buttonStyle; |
||||
|
||||
final isWrappable = widget.dialogTheme?.isWrappable ?? false; |
||||
|
||||
final children = _isEditMode |
||||
? [ |
||||
Text(widget.editLinkLabel ?? 'Visit link'.i18n), |
||||
UtilityWidgets.maybeWidget( |
||||
enabled: !isWrappable, |
||||
wrapper: (child) => Expanded( |
||||
child: Align( |
||||
alignment: Alignment.centerLeft, |
||||
child: child, |
||||
), |
||||
), |
||||
child: Padding( |
||||
padding: |
||||
EdgeInsets.symmetric(horizontal: widget.childrenSpacing), |
||||
child: Link( |
||||
uri: Uri.parse(_linkController.text), |
||||
builder: (context, followLink) { |
||||
return TextButton( |
||||
onPressed: followLink, |
||||
style: TextButton.styleFrom( |
||||
backgroundColor: Colors.transparent, |
||||
), |
||||
child: Text( |
||||
widget.link!, |
||||
textAlign: TextAlign.left, |
||||
overflow: TextOverflow.ellipsis, |
||||
style: widget.dialogTheme?.inputTextStyle?.copyWith( |
||||
color: widget.linkColor ?? Colors.blue, |
||||
decoration: TextDecoration.underline, |
||||
), |
||||
), |
||||
); |
||||
}, |
||||
), |
||||
), |
||||
), |
||||
ElevatedButton( |
||||
onPressed: () { |
||||
setState(() { |
||||
_isEditMode = !_isEditMode; |
||||
}); |
||||
}, |
||||
style: buttonStyle, |
||||
child: Text('Edit'.i18n), |
||||
), |
||||
Padding( |
||||
padding: EdgeInsets.only(left: widget.childrenSpacing), |
||||
child: ElevatedButton( |
||||
onPressed: _removeLink, |
||||
style: buttonStyle, |
||||
child: Text('Remove'.i18n), |
||||
), |
||||
), |
||||
] |
||||
: [ |
||||
Text(widget.addLinkLabel ?? 'Enter link'.i18n), |
||||
UtilityWidgets.maybeWidget( |
||||
enabled: !isWrappable, |
||||
wrapper: (child) => Expanded( |
||||
child: child, |
||||
), |
||||
child: Padding( |
||||
padding: |
||||
EdgeInsets.symmetric(horizontal: widget.childrenSpacing), |
||||
child: TextFormField( |
||||
controller: _linkController, |
||||
style: widget.dialogTheme?.inputTextStyle, |
||||
keyboardType: TextInputType.url, |
||||
textInputAction: TextInputAction.done, |
||||
decoration: InputDecoration( |
||||
labelStyle: widget.dialogTheme?.labelTextStyle, |
||||
), |
||||
autofocus: true, |
||||
autovalidateMode: widget.autovalidateMode, |
||||
validator: _validateLink, |
||||
onChanged: _linkChanged, |
||||
), |
||||
), |
||||
), |
||||
ElevatedButton( |
||||
onPressed: _canPress() ? _applyLink : null, |
||||
style: buttonStyle, |
||||
child: Text('Apply'.i18n), |
||||
), |
||||
]; |
||||
|
||||
return Dialog( |
||||
backgroundColor: widget.dialogTheme?.dialogBackgroundColor, |
||||
shape: widget.dialogTheme?.shape ?? |
||||
DialogTheme.of(context).shape ?? |
||||
RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)), |
||||
child: ConstrainedBox( |
||||
constraints: constraints, |
||||
child: Padding( |
||||
padding: widget.contentPadding, |
||||
child: isWrappable |
||||
? Wrap( |
||||
alignment: WrapAlignment.center, |
||||
crossAxisAlignment: WrapCrossAlignment.center, |
||||
runSpacing: widget.dialogTheme?.runSpacing ?? 0.0, |
||||
children: children, |
||||
) |
||||
: Row( |
||||
children: children, |
||||
), |
||||
), |
||||
), |
||||
); |
||||
} |
||||
|
||||
void _linkChanged(String value) { |
||||
setState(() { |
||||
_link = value; |
||||
}); |
||||
} |
||||
|
||||
bool _canPress() => _validateLink(_link) == null; |
||||
|
||||
String? _validateLink(String? value) { |
||||
if ((value?.isEmpty ?? false) || |
||||
!AutoFormatMultipleLinksRule.linkRegExp.hasMatch(value!)) { |
||||
return widget.validationMessage ?? 'That is not a valid URL'; |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
|
||||
void _applyLink() => |
||||
Navigator.pop(context, QuillTextLink(_text.trim(), _link.trim())); |
||||
|
||||
void _removeLink() => |
||||
Navigator.pop(context, QuillTextLink(_text.trim(), null)); |
||||
} |
||||
|
||||
/// Contains information about text URL. |
||||
class QuillTextLink { |
||||
QuillTextLink( |
||||
this.text, |
||||
this.link, |
||||
); |
||||
|
||||
final String text; |
||||
final String? link; |
||||
|
||||
static QuillTextLink prepare(QuillController controller) { |
||||
final link = |
||||
controller.getSelectionStyle().attributes[Attribute.link.key]?.value; |
||||
final index = controller.selection.start; |
||||
|
||||
var text; |
||||
if (link != null) { |
||||
// text should be the link's corresponding text, not selection |
||||
final leaf = controller.document.querySegmentLeafNode(index).leaf; |
||||
if (leaf != null) { |
||||
text = leaf.toPlainText(); |
||||
} |
||||
} |
||||
|
||||
final len = controller.selection.end - index; |
||||
text ??= len == 0 ? '' : controller.document.getPlainText(index, len); |
||||
|
||||
return QuillTextLink(text, link); |
||||
} |
||||
|
||||
void submit(QuillController controller) { |
||||
var index = controller.selection.start; |
||||
var length = controller.selection.end - index; |
||||
final linkValue = |
||||
controller.getSelectionStyle().attributes[Attribute.link.key]?.value; |
||||
|
||||
if (linkValue != null) { |
||||
// text should be the link's corresponding text, not selection |
||||
final leaf = controller.document.querySegmentLeafNode(index).leaf; |
||||
if (leaf != null) { |
||||
final range = getLinkRange(leaf); |
||||
index = range.start; |
||||
length = range.end - range.start; |
||||
} |
||||
} |
||||
controller |
||||
..replaceText(index, length, text, null) |
||||
..formatText(index, text.length, LinkAttribute(link)); |
||||
} |
||||
} |
||||
Loading…
Reference in new issue