From 35c49ffd7c22f084e3b7d004c85787935ac50ac1 Mon Sep 17 00:00:00 2001 From: Ellet <73608287+freshtechtips@users.noreply.github.com> Date: Mon, 6 Nov 2023 06:14:37 +0300 Subject: [PATCH] Update flutter_quill_extensions and example --- example/lib/universal_ui/universal_ui.dart | 21 ++++++----- example/lib/widgets/responsive_widget.dart | 4 +-- example/pubspec.yaml | 4 +-- .../lib/flutter_quill_extensions.dart | 6 ++-- .../embeds/editor/image/image_web.dart | 36 ++++++++++++++++--- .../lib/presentation/embeds/utils.dart | 8 ++--- 6 files changed, 57 insertions(+), 22 deletions(-) diff --git a/example/lib/universal_ui/universal_ui.dart b/example/lib/universal_ui/universal_ui.dart index 421725e2..291593e0 100644 --- a/example/lib/universal_ui/universal_ui.dart +++ b/example/lib/universal_ui/universal_ui.dart @@ -4,6 +4,7 @@ import 'package:flutter/cupertino.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter_quill/flutter_quill.dart'; import 'package:flutter_quill_extensions/flutter_quill_extensions.dart'; +import 'package:flutter_quill_extensions/presentation/embeds/editor/image/image.dart'; import 'package:universal_html/html.dart' as html; import 'package:youtube_player_flutter/youtube_player_flutter.dart'; @@ -61,7 +62,7 @@ class ImageEmbedBuilderWeb extends EmbedBuilder { : size.width * 0.2, ), child: SizedBox( - height: MediaQuery.sizeOf(context).height * 0.45, + height: size.height * 0.45, child: HtmlElementView( viewType: imageUrl, ), @@ -91,13 +92,16 @@ class VideoEmbedBuilderWeb extends EmbedBuilder { } } + final size = MediaQuery.sizeOf(context); + UniversalUI().platformViewRegistry.registerViewFactory( - videoUrl, - (id) => html.IFrameElement() - ..width = MediaQuery.sizeOf(context).width.toString() - ..height = MediaQuery.sizeOf(context).height.toString() - ..src = videoUrl - ..style.border = 'none'); + videoUrl, + (id) => html.IFrameElement() + ..width = size.width.toString() + ..height = size.height.toString() + ..src = videoUrl + ..style.border = 'none', + ); return SizedBox( height: 500, @@ -109,6 +113,7 @@ class VideoEmbedBuilderWeb extends EmbedBuilder { } List get defaultEmbedBuildersWeb => [ - ImageEmbedBuilderWeb(), + // ImageEmbedBuilderWeb(), + const QuillEditorWebImageEmbedBuilder(), VideoEmbedBuilderWeb(), ]; diff --git a/example/lib/widgets/responsive_widget.dart b/example/lib/widgets/responsive_widget.dart index f9de4027..d815f734 100644 --- a/example/lib/widgets/responsive_widget.dart +++ b/example/lib/widgets/responsive_widget.dart @@ -5,8 +5,8 @@ class ResponsiveWidget extends StatelessWidget { required this.largeScreen, this.mediumScreen, this.smallScreen, - Key? key, - }) : super(key: key); + super.key, + }); final Widget largeScreen; final Widget? mediumScreen; diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 92df9d83..0067ce4a 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -15,8 +15,8 @@ dependencies: path_provider: ^2.1.1 # filesystem_picker: ^4.0.0 # file_picker: ^6.1.1 - flutter_quill: ^8.2.0 - flutter_quill_extensions: ^0.6.0-dev.2 + flutter_quill: ^8.2.2 + flutter_quill_extensions: ^0.6.0-dev.5 dependency_overrides: flutter_quill: diff --git a/flutter_quill_extensions/lib/flutter_quill_extensions.dart b/flutter_quill_extensions/lib/flutter_quill_extensions.dart index 6b011b06..862b6663 100644 --- a/flutter_quill_extensions/lib/flutter_quill_extensions.dart +++ b/flutter_quill_extensions/lib/flutter_quill_extensions.dart @@ -27,6 +27,7 @@ import 'presentation/models/config/toolbar/buttons/video.dart'; export '/presentation/models/config/editor/webview.dart'; export './logic/extensions/controller.dart'; +export 'presentation/embeds/editor/image/image_web.dart'; export 'presentation/embeds/editor/unknown.dart'; export 'presentation/embeds/embed_types.dart'; export 'presentation/embeds/embed_types/image.dart'; @@ -108,7 +109,7 @@ class FlutterQuillEmbeds { /// Returns a list of embed builders specifically designed for web support. /// - /// [ImageEmbedBuilderWeb] is the embed builder for handling + /// [QuillEditorImageEmbedBuilderWeb] is the embed builder for handling /// images on the web. /// static List editorsWebBuilders({ @@ -124,7 +125,8 @@ class FlutterQuillEmbeds { ); } return [ - if (imageEmbedConfigurations != null) const ImageEmbedBuilderWeb(), + if (imageEmbedConfigurations != null) + const QuillEditorWebImageEmbedBuilder(), ]; } diff --git a/flutter_quill_extensions/lib/presentation/embeds/editor/image/image_web.dart b/flutter_quill_extensions/lib/presentation/embeds/editor/image/image_web.dart index 970bf762..34e40f2d 100644 --- a/flutter_quill_extensions/lib/presentation/embeds/editor/image/image_web.dart +++ b/flutter_quill_extensions/lib/presentation/embeds/editor/image/image_web.dart @@ -1,13 +1,15 @@ import 'package:flutter/foundation.dart' show kIsWeb; import 'package:flutter/widgets.dart'; +import 'package:flutter_quill/extensions.dart' as base; import 'package:flutter_quill/flutter_quill.dart'; import 'package:universal_html/html.dart' as html; +import '../../utils.dart'; import 'shims/dart_ui_fake.dart' if (dart.library.html) 'shims/dart_ui_real.dart' as ui; -class ImageEmbedBuilderWeb extends EmbedBuilder { - const ImageEmbedBuilderWeb({ +class QuillEditorWebImageEmbedBuilder extends EmbedBuilder { + const QuillEditorWebImageEmbedBuilder({ this.constraints, }); @@ -28,11 +30,37 @@ class ImageEmbedBuilderWeb extends EmbedBuilder { assert(kIsWeb, 'ImageEmbedBuilderWeb is only for web platform'); final imageUrl = node.value.data; + if (isImageBase64(imageUrl)) { + // TODO: handle imageUrl of base64 + return const Text('Image base 64 is not supported yet.'); + } + + var height = 'auto'; + var width = 'auto'; + + final style = node.style.attributes['style']; + if (style != null) { + final attrs = base.parseKeyValuePairs(style.value.toString(), { + Attribute.width.key, + Attribute.height.key, + Attribute.margin, + Attribute.alignment, + }); + final heightValue = attrs[Attribute.height.key]; + if (heightValue != null) { + height = heightValue; + } + final widthValue = attrs[Attribute.width.key]; + if (widthValue != null) { + width = widthValue; + } + } + ui.PlatformViewRegistry().registerViewFactory(imageUrl, (viewId) { return html.ImageElement() ..src = imageUrl - ..style.height = 'auto' - ..style.width = 'auto'; + ..style.height = height + ..style.width = width; }); return ConstrainedBox( diff --git a/flutter_quill_extensions/lib/presentation/embeds/utils.dart b/flutter_quill_extensions/lib/presentation/embeds/utils.dart index 5ce82ee9..0d890e4e 100644 --- a/flutter_quill_extensions/lib/presentation/embeds/utils.dart +++ b/flutter_quill_extensions/lib/presentation/embeds/utils.dart @@ -21,6 +21,10 @@ bool isHttpBasedUrl(String url) { } } +bool isImageBase64(String imageUrl) { + return !isHttpBasedUrl(imageUrl) && isBase64(imageUrl); +} + bool isYouTubeUrl(String videoUrl) { try { final uri = Uri.parse(videoUrl); @@ -32,10 +36,6 @@ bool isYouTubeUrl(String videoUrl) { } } -bool isImageBase64(String imageUrl) { - return !isHttpBasedUrl(imageUrl) && isBase64(imageUrl); -} - enum SaveImageResultMethod { network, localStorage } @immutable