Image embedding tweaks (#1187)
* Update `QuillDialogTheme` * Add `ImageAttribute` and `VideoAttribute` * Add `LinkStyleDialog` * Update `RawEditor` with new actions * Update translations * Add translations * Restore original `LinkStyleButton` * Update dart SDK to 2.17.0 * Update `ScriptAttribute` and `ScriptAttributes` * Add `LinkStyleButton2` * Implement `ApplyLinkAction` for `Ctrl+K` * Use `ShortcutActivator` instead of `LogicalKeySet` * Use `ShortcutActivator` instead of `LogicalKeySet` * Update `QuillDialogTheme` with `buttonStyle` * Implement `dialogTheme` for `QuillEditor` * Update `QuillDialogTheme` with dialog constraints * Pass `dialogTheme` to `RawEditor` * Merge `customShorcuts` and `customActions` * Implement `constrains` and `buttonStyle` * Update `QuillDialogTheme` with `isWrappable` * Update `LinkStyleDialog` to use `Wrap` conditionally * Add `ImageButton2` * Update `QuillDialogTheme` with padding properties * Update `QuillDialogTheme` * Export `UtilityWidgets` via flutter_quill.extensions * Minor change * Minor change * Update `QuillDialogTheme` * Update translations * Add `MediaButton` * Add `ImageEmbedBuilderWeb` * Update `flutter_quill`' version * Update `flutter_quill_extensions` * Update CHANGELOG.mdpull/1188/head
BambinoUA
2 years ago
committed by
GitHub
parent
dba00d8812
commit
d83cc0cf4c
14 changed files with 645 additions and 74 deletions
@ -0,0 +1,452 @@ |
||||
//import 'dart:io'; |
||||
import 'dart:math' as math; |
||||
import 'dart:ui'; |
||||
|
||||
import 'package:flutter/foundation.dart'; |
||||
import 'package:flutter/material.dart'; |
||||
import 'package:flutter_quill/extensions.dart'; |
||||
import 'package:flutter_quill/flutter_quill.dart' hide Text; |
||||
import 'package:flutter_quill/translations.dart'; |
||||
import 'package:image_picker/image_picker.dart'; |
||||
|
||||
import '../embed_types.dart'; |
||||
|
||||
/// Widget which combines [ImageButton] and [VideButton] widgets. This widget |
||||
/// has more customization and uses dialog similar to one which is used |
||||
/// on [http://quilljs.com]. |
||||
class MediaButton extends StatelessWidget { |
||||
const MediaButton({ |
||||
required this.controller, |
||||
required this.icon, |
||||
this.type = QuillMediaType.image, |
||||
this.iconSize = kDefaultIconSize, |
||||
this.fillColor, |
||||
this.mediaFilePicker = _defaultMediaPicker, |
||||
this.onMediaPickedCallback, |
||||
this.iconTheme, |
||||
this.dialogTheme, |
||||
this.tooltip, |
||||
this.childrenSpacing = 16.0, |
||||
this.labelText, |
||||
this.hintText, |
||||
this.submitButtonText, |
||||
this.submitButtonSize, |
||||
this.galleryButtonText, |
||||
this.linkButtonText, |
||||
this.autovalidateMode = AutovalidateMode.disabled, |
||||
Key? key, |
||||
this.validationMessage, |
||||
}) : assert(type == QuillMediaType.image, |
||||
'Video selection is not supported yet'), |
||||
super(key: key); |
||||
|
||||
final QuillController controller; |
||||
final IconData icon; |
||||
final double iconSize; |
||||
final Color? fillColor; |
||||
final QuillMediaType type; |
||||
final QuillIconTheme? iconTheme; |
||||
final QuillDialogTheme? dialogTheme; |
||||
final String? tooltip; |
||||
final MediaFilePicker mediaFilePicker; |
||||
final MediaPickedCallback? onMediaPickedCallback; |
||||
|
||||
/// The margin between child widgets in the dialog. |
||||
final double childrenSpacing; |
||||
|
||||
/// The text of label in link add mode. |
||||
final String? labelText; |
||||
|
||||
/// The hint text for link [TextField]. |
||||
final String? hintText; |
||||
|
||||
/// The text of the submit button. |
||||
final String? submitButtonText; |
||||
|
||||
/// The size of dialog buttons. |
||||
final Size? submitButtonSize; |
||||
|
||||
/// The text of the gallery button [MediaSourceSelectorDialog]. |
||||
final String? galleryButtonText; |
||||
|
||||
/// The text of the link button [MediaSourceSelectorDialog]. |
||||
final String? linkButtonText; |
||||
|
||||
final AutovalidateMode autovalidateMode; |
||||
final String? validationMessage; |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
final theme = Theme.of(context); |
||||
final iconColor = iconTheme?.iconUnselectedColor ?? theme.iconTheme.color; |
||||
final iconFillColor = |
||||
iconTheme?.iconUnselectedFillColor ?? fillColor ?? theme.canvasColor; |
||||
|
||||
return QuillIconButton( |
||||
icon: Icon(icon, size: iconSize, color: iconColor), |
||||
tooltip: tooltip, |
||||
highlightElevation: 0, |
||||
hoverElevation: 0, |
||||
size: iconSize * 1.77, |
||||
fillColor: iconFillColor, |
||||
borderRadius: iconTheme?.borderRadius ?? 2, |
||||
onPressed: () => _onPressedHandler(context), |
||||
); |
||||
} |
||||
|
||||
Future<void> _onPressedHandler(BuildContext context) async { |
||||
if (onMediaPickedCallback != null) { |
||||
final mediaSource = await showDialog<MediaPickSetting>( |
||||
context: context, |
||||
builder: (_) => MediaSourceSelectorDialog( |
||||
dialogTheme: dialogTheme, |
||||
galleryButtonText: galleryButtonText, |
||||
linkButtonText: linkButtonText, |
||||
), |
||||
); |
||||
if (mediaSource != null) { |
||||
if (mediaSource == MediaPickSetting.Gallery) { |
||||
await _pickImage(); |
||||
} else { |
||||
_inputLink(context); |
||||
} |
||||
} |
||||
} else { |
||||
_inputLink(context); |
||||
} |
||||
} |
||||
|
||||
Future<void> _pickImage() async { |
||||
if (!(kIsWeb || isMobile() || isDesktop())) { |
||||
throw UnsupportedError( |
||||
'Unsupported target platform: ${defaultTargetPlatform.name}'); |
||||
} |
||||
|
||||
final mediaFileUrl = await _pickMediaFileUrl(); |
||||
|
||||
if (mediaFileUrl != null) { |
||||
final index = controller.selection.baseOffset; |
||||
final length = controller.selection.extentOffset - index; |
||||
controller.replaceText( |
||||
index, length, BlockEmbed.image(mediaFileUrl), null); |
||||
} |
||||
} |
||||
|
||||
Future<MediaFileUrl?> _pickMediaFileUrl() async { |
||||
final mediaFile = await mediaFilePicker(type); |
||||
return mediaFile != null ? onMediaPickedCallback?.call(mediaFile) : null; |
||||
} |
||||
|
||||
void _inputLink(BuildContext context) { |
||||
showDialog<String>( |
||||
context: context, |
||||
builder: (_) => MediaLinkDialog( |
||||
dialogTheme: dialogTheme, |
||||
labelText: labelText, |
||||
hintText: hintText, |
||||
buttonText: submitButtonText, |
||||
buttonSize: submitButtonSize, |
||||
childrenSpacing: childrenSpacing, |
||||
autovalidateMode: autovalidateMode, |
||||
validationMessage: validationMessage, |
||||
), |
||||
).then(_linkSubmitted); |
||||
} |
||||
|
||||
void _linkSubmitted(String? value) { |
||||
if (value != null && value.isNotEmpty) { |
||||
final index = controller.selection.baseOffset; |
||||
final length = controller.selection.extentOffset - index; |
||||
final data = |
||||
type.isImage ? BlockEmbed.image(value) : BlockEmbed.video(value); |
||||
controller.replaceText(index, length, data, null); |
||||
} |
||||
} |
||||
} |
||||
|
||||
/// Provides a dialog for input link to media resource. |
||||
class MediaLinkDialog extends StatefulWidget { |
||||
const MediaLinkDialog({ |
||||
Key? key, |
||||
this.link, |
||||
this.dialogTheme, |
||||
this.childrenSpacing = 16.0, |
||||
this.labelText, |
||||
this.hintText, |
||||
this.buttonText, |
||||
this.buttonSize, |
||||
this.autovalidateMode = AutovalidateMode.disabled, |
||||
this.validationMessage, |
||||
}) : assert(childrenSpacing > 0), |
||||
super(key: key); |
||||
|
||||
final String? link; |
||||
final QuillDialogTheme? dialogTheme; |
||||
|
||||
/// The margin between child widgets in the dialog. |
||||
final double childrenSpacing; |
||||
|
||||
/// The text of label in link add mode. |
||||
final String? labelText; |
||||
|
||||
/// The hint text for link [TextField]. |
||||
final String? hintText; |
||||
|
||||
/// The text of the submit button. |
||||
final String? buttonText; |
||||
|
||||
/// The size of dialog buttons. |
||||
final Size? buttonSize; |
||||
|
||||
final AutovalidateMode autovalidateMode; |
||||
final String? validationMessage; |
||||
|
||||
@override |
||||
State<MediaLinkDialog> createState() => _MediaLinkDialogState(); |
||||
} |
||||
|
||||
class _MediaLinkDialogState extends State<MediaLinkDialog> { |
||||
final _linkFocus = FocusNode(); |
||||
final _linkController = TextEditingController(); |
||||
|
||||
@override |
||||
void dispose() { |
||||
_linkFocus.dispose(); |
||||
_linkController.dispose(); |
||||
super.dispose(); |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
final 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 = [ |
||||
Text(widget.labelText ?? 'Enter media'.i18n), |
||||
UtilityWidgets.maybeWidget( |
||||
enabled: !isWrappable, |
||||
wrapper: (child) => Expanded( |
||||
child: child, |
||||
), |
||||
child: Padding( |
||||
padding: EdgeInsets.symmetric(horizontal: widget.childrenSpacing), |
||||
child: TextFormField( |
||||
controller: _linkController, |
||||
focusNode: _linkFocus, |
||||
style: widget.dialogTheme?.inputTextStyle, |
||||
keyboardType: TextInputType.url, |
||||
textInputAction: TextInputAction.done, |
||||
decoration: InputDecoration( |
||||
labelStyle: widget.dialogTheme?.labelTextStyle, |
||||
hintText: widget.hintText, |
||||
), |
||||
autofocus: true, |
||||
autovalidateMode: widget.autovalidateMode, |
||||
validator: _validateLink, |
||||
onChanged: _linkChanged, |
||||
), |
||||
), |
||||
), |
||||
ElevatedButton( |
||||
onPressed: _canPress() ? _submitLink : null, |
||||
style: buttonStyle, |
||||
child: Text(widget.buttonText ?? 'Ok'.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.dialogTheme?.linkDialogPadding ?? const EdgeInsets.all(16), |
||||
child: isWrappable |
||||
? Wrap( |
||||
alignment: WrapAlignment.center, |
||||
crossAxisAlignment: WrapCrossAlignment.center, |
||||
runSpacing: widget.dialogTheme?.runSpacing ?? 0.0, |
||||
children: children, |
||||
) |
||||
: Row( |
||||
children: children, |
||||
), |
||||
), |
||||
), |
||||
); |
||||
} |
||||
|
||||
bool _canPress() => _validateLink(_linkController.text) == null; |
||||
|
||||
void _linkChanged(String value) { |
||||
setState(() { |
||||
_linkController.text = value; |
||||
}); |
||||
} |
||||
|
||||
void _submitLink() => Navigator.pop(context, _linkController.text); |
||||
|
||||
String? _validateLink(String? value) { |
||||
if ((value?.isEmpty ?? false) || |
||||
!AutoFormatMultipleLinksRule.linkRegExp.hasMatch(value!)) { |
||||
return widget.validationMessage ?? 'That is not a valid URL'; |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
} |
||||
|
||||
/// Media souce selector. |
||||
class MediaSourceSelectorDialog extends StatelessWidget { |
||||
const MediaSourceSelectorDialog({ |
||||
Key? key, |
||||
this.dialogTheme, |
||||
this.galleryButtonText, |
||||
this.linkButtonText, |
||||
}) : super(key: key); |
||||
|
||||
final QuillDialogTheme? dialogTheme; |
||||
|
||||
/// The text of the gallery button [MediaSourceSelectorDialog]. |
||||
final String? galleryButtonText; |
||||
|
||||
/// The text of the link button [MediaSourceSelectorDialog]. |
||||
final String? linkButtonText; |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
final constraints = dialogTheme?.mediaSelectorDialogConstraints ?? |
||||
() { |
||||
final mediaQuery = MediaQuery.of(context); |
||||
double maxWidth, maxHeight; |
||||
if (kIsWeb) { |
||||
maxWidth = mediaQuery.size.width / 7; |
||||
maxHeight = mediaQuery.size.height / 7; |
||||
} else { |
||||
maxWidth = mediaQuery.size.width - 80; |
||||
maxHeight = maxWidth / 2; |
||||
} |
||||
return BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight); |
||||
}(); |
||||
|
||||
final shape = dialogTheme?.shape ?? |
||||
DialogTheme.of(context).shape ?? |
||||
RoundedRectangleBorder(borderRadius: BorderRadius.circular(4)); |
||||
|
||||
return Dialog( |
||||
backgroundColor: dialogTheme?.dialogBackgroundColor, |
||||
shape: shape, |
||||
child: ConstrainedBox( |
||||
constraints: constraints, |
||||
child: Padding( |
||||
padding: dialogTheme?.mediaSelectorDialogPadding ?? |
||||
const EdgeInsets.all(16), |
||||
child: Row( |
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
||||
children: [ |
||||
Expanded( |
||||
child: TextButtonWithIcon( |
||||
icon: Icons.collections, |
||||
label: galleryButtonText ?? 'Gallery'.i18n, |
||||
onPressed: () => |
||||
Navigator.pop(context, MediaPickSetting.Gallery), |
||||
), |
||||
), |
||||
const SizedBox(width: 10), |
||||
Expanded( |
||||
child: TextButtonWithIcon( |
||||
icon: Icons.link, |
||||
label: linkButtonText ?? 'Link'.i18n, |
||||
onPressed: () => |
||||
Navigator.pop(context, MediaPickSetting.Link), |
||||
), |
||||
) |
||||
], |
||||
), |
||||
), |
||||
), |
||||
); |
||||
} |
||||
} |
||||
|
||||
class TextButtonWithIcon extends StatelessWidget { |
||||
const TextButtonWithIcon({ |
||||
required this.label, |
||||
required this.icon, |
||||
required this.onPressed, |
||||
this.textStyle, |
||||
Key? key, |
||||
}) : super(key: key); |
||||
|
||||
final String label; |
||||
final IconData icon; |
||||
final VoidCallback onPressed; |
||||
final TextStyle? textStyle; |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
final theme = Theme.of(context); |
||||
final scale = MediaQuery.maybeOf(context)?.textScaleFactor ?? 1; |
||||
final gap = scale <= 1 ? 8.0 : lerpDouble(8, 4, math.min(scale - 1, 1))!; |
||||
final buttonStyle = TextButtonTheme.of(context).style; |
||||
final shape = buttonStyle?.shape?.resolve({}) ?? |
||||
const RoundedRectangleBorder( |
||||
borderRadius: BorderRadius.all(Radius.circular(4))); |
||||
return Material( |
||||
shape: shape, |
||||
textStyle: textStyle ?? |
||||
theme.textButtonTheme.style?.textStyle?.resolve({}) ?? |
||||
theme.textTheme.labelLarge, |
||||
elevation: buttonStyle?.elevation?.resolve({}) ?? 0, |
||||
child: InkWell( |
||||
customBorder: shape, |
||||
onTap: onPressed, |
||||
child: Padding( |
||||
padding: const EdgeInsets.all(16), |
||||
child: Column( |
||||
mainAxisSize: MainAxisSize.min, |
||||
children: <Widget>[ |
||||
Icon(icon), |
||||
SizedBox(height: gap), |
||||
Flexible(child: Text(label)), |
||||
], |
||||
), |
||||
), |
||||
), |
||||
); |
||||
} |
||||
} |
||||
|
||||
/// Default file picker. |
||||
Future<QuillFile?> _defaultMediaPicker(QuillMediaType mediaType) async { |
||||
final pickedFile = mediaType.isImage |
||||
? await ImagePicker().pickImage(source: ImageSource.gallery) |
||||
: await ImagePicker().pickVideo(source: ImageSource.gallery); |
||||
|
||||
if (pickedFile != null) { |
||||
return QuillFile( |
||||
name: pickedFile.name, |
||||
path: pickedFile.path, |
||||
bytes: await pickedFile.readAsBytes(), |
||||
); |
||||
} |
||||
|
||||
return null; |
||||
} |
||||
@ -0,0 +1,23 @@ |
||||
// ignore_for_file: avoid_classes_with_only_static_members, camel_case_types, lines_longer_than_80_chars |
||||
|
||||
import 'package:universal_html/html.dart' as html; |
||||
|
||||
// Fake interface for the logic that this package needs from (web-only) dart:ui. |
||||
// This is conditionally exported so the analyzer sees these methods as available. |
||||
|
||||
typedef PlatroformViewFactory = html.Element Function(int viewId); |
||||
|
||||
/// Shim for web_ui engine.PlatformViewRegistry |
||||
/// https://github.com/flutter/engine/blob/master/lib/web_ui/lib/ui.dart#L62 |
||||
class platformViewRegistry { |
||||
/// Shim for registerViewFactory |
||||
/// https://github.com/flutter/engine/blob/master/lib/web_ui/lib/ui.dart#L72 |
||||
static dynamic registerViewFactory( |
||||
String viewTypeId, PlatroformViewFactory viewFactory) {} |
||||
} |
||||
|
||||
/// Shim for web_ui engine.AssetManager |
||||
/// https://github.com/flutter/engine/blob/master/lib/web_ui/lib/src/engine/assets.dart#L12 |
||||
class webOnlyAssetManager { |
||||
static dynamic getAssetUrl(String asset) {} |
||||
} |
||||
@ -0,0 +1 @@ |
||||
export 'dart:ui'; |
||||
Loading…
Reference in new issue