Update flutter_quill_extensions and example

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,
+          videoUrl,
-        (id) => html.IFrameElement()
+          (id) => html.IFrameElement()
-          ..width = MediaQuery.sizeOf(context).width.toString()
+            ..width = size.width.toString()
-          ..height = MediaQuery.sizeOf(context).height.toString()
+            ..height = size.height.toString()
-          ..src = videoUrl
+            ..src = videoUrl
-          ..style.border = 'none');
+            ..style.border = 'none',
+        );
 
     return SizedBox(
       height: 500,
@@ -109,6 +113,7 @@ class VideoEmbedBuilderWeb extends EmbedBuilder {
 }
 
 List<EmbedBuilder> get defaultEmbedBuildersWeb => [
-      ImageEmbedBuilderWeb(),
+      // ImageEmbedBuilderWeb(),
+      const QuillEditorWebImageEmbedBuilder(),
       VideoEmbedBuilderWeb(),
     ];

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,
-  }) : super(key: key);
+  });
 
   final Widget largeScreen;
   final Widget? mediumScreen;

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: ^8.2.2
-  flutter_quill_extensions: ^0.6.0-dev.2
+  flutter_quill_extensions: ^0.6.0-dev.5
 
 dependency_overrides:
   flutter_quill:

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<EmbedBuilder> editorsWebBuilders({
@@ -124,7 +125,8 @@ class FlutterQuillEmbeds {
       );
     }
     return [
-      if (imageEmbedConfigurations != null) const ImageEmbedBuilderWeb(),
+      if (imageEmbedConfigurations != null)
+        const QuillEditorWebImageEmbedBuilder(),
     ];
   }
 

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 {
+class QuillEditorWebImageEmbedBuilder extends EmbedBuilder {
-  const ImageEmbedBuilderWeb({
+  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.height = height
-        ..style.width = 'auto';
+        ..style.width = width;
     });
 
     return ConstrainedBox(

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