fix: image tests

lib/src/editor/block_component/image_block_component/image_block_component.dart

@@ -15,7 +15,7 @@ enum ImageSourceType {
       case 'file':
         return ImageSourceType.file;
       default:
-        throw UnimplementedError();
+        return ImageSourceType.network; // compatible with old version
     }
   }
 }
@@ -63,7 +63,7 @@ Node imageNode({
   required ImageSourceType imageSourceType,
   String? content,
   String? url,
-  String align = 'center',
+  String align = 'right',
   double? height,
   double? width,
 }) {

lib/src/editor/block_component/image_block_component/resizable_image.dart

@@ -68,6 +68,7 @@ class _ResizableImageState extends State<ResizableImage> {
     if (widget.type == ImageSourceType.network && widget.src != null) {
       _cacheImage ??= Image.network(
         widget.src!,
+        width: widget.width,
         gaplessPlayback: true,
         loadingBuilder: (context, child, loadingProgress) {
           if (loadingProgress == null ||

lib/src/infra/html_converter.dart

@@ -321,16 +321,14 @@ class HTMLToNodesConverter {
   }
 
   Node _handleImage(html.Element element) {
-    final src = element.attributes['src'] ?? '';
-    final ImageSourceType imageSourceType;
-    if (src.startsWith('http')) {
-      imageSourceType = ImageSourceType.network;
-    } else {
-      imageSourceType = ImageSourceType.file;
+    final src = element.attributes['src'];
+    if (src == null || src.isEmpty || !src.startsWith('http')) {
+      return paragraphNode(); // return empty paragraph
     }
+    // only support network image
     return imageNode(
       url: src,
-      imageSourceType: imageSourceType,
+      imageSourceType: ImageSourceType.network,
     );
   }
 

lib/src/plugins/html/html_document_decoder.dart

@@ -188,16 +188,14 @@ class DocumentHTMLDecoder extends Converter<String, Document> {
   }
 
   Node _parseImageElement(dom.Element element) {
-    final src = element.attributes['src'] ?? '';
-    final ImageSourceType imageSourceType;
-    if (src.startsWith('http')) {
-      imageSourceType = ImageSourceType.network;
-    } else {
-      imageSourceType = ImageSourceType.file;
+    final src = element.attributes['src'];
+    if (src == null || src.isEmpty || !src.startsWith('http')) {
+      return paragraphNode(); // return empty paragraph
     }
+    // only support network image
     return imageNode(
       url: src,
-      imageSourceType: imageSourceType,
+      imageSourceType: ImageSourceType.network,
     );
   }
 

test/plugins/html/decoder/document_html_decoder_test.dart

@@ -1,4 +1,3 @@
-import 'dart:convert';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 
@@ -14,7 +13,7 @@ void main() async {
       expect(result.toJson(), example);
     });
     test('nested parser document', () async {
-      final result = DocumentHTMLDecoder().convert(nestedhtml);
+      final result = DocumentHTMLDecoder().convert(nestedHTML);
 
       expect(result.toJson(), nestedDelta);
     });
@@ -294,8 +293,8 @@ const example = {
     ]
   }
 };
-const nestedhtml =
-    '''<h1>Welcome to the playground</h1><blockquote>In case you were wondering what the black box at the bottom is – it\'s the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with <code>@lexical/react</code>. Try typing in <strong>some text</strong> with <i>different</i> formats.</blockquote><p>\t</p><img src="https://richtexteditor.com/images/editor-image.png"><p>Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!</p><p></p><p>If you\'d like to find out more about Lexical, you can:</p><ul><li>Visit the <a href="https://lexical.dev/">Lexical website</a> for documentation and more information.</li><li>\t<span><img src="https://richtexteditor.com/images/editor-image.png"></span></li><li>Check out the code on our <a href="https://github.com/facebook/lexical">GitHub repository</a>.</li><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li><li>Join our <a href="https://discord.com/invite/KmG4wQnnD9">Discord Server</a> and chat with the team.</li><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li></ul><p>Lastly, we\'re constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.</p><p></p>''';
+const nestedHTML =
+    '''<h1>Welcome to the playground</h1><blockquote>In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with <code>@lexical/react</code>. Try typing in <strong>some text</strong> with <i>different</i> formats.</blockquote><p>\t</p><img src="https://richtexteditor.com/images/editor-image.png"><p>Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!</p><p></p><p>If you'd like to find out more about Lexical, you can:</p><ul><li>Visit the <a href="https://lexical.dev/">Lexical website</a> for documentation and more information.</li><li>\t<span><img src="https://richtexteditor.com/images/editor-image.png"></span></li><li>Check out the code on our <a href="https://github.com/facebook/lexical">GitHub repository</a>.</li><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li><li>Join our <a href="https://discord.com/invite/KmG4wQnnD9">Discord Server</a> and chat with the team.</li><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li></ul><p>Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.</p><p></p>''';
 const nestedDelta = {
   'document': {
     'type': 'page',
@@ -347,6 +346,7 @@ const nestedDelta = {
         'type': 'image',
         'data': {
           'url': 'https://richtexteditor.com/images/editor-image.png',
+          'content': null,
           'align': 'center',
           'height': null,
           'width': null,
@@ -399,6 +399,7 @@ const nestedDelta = {
             'type': 'image',
             'data': {
               'url': 'https://richtexteditor.com/images/editor-image.png',
+              'content': null,
               'align': 'center',
               'height': null,
               'width': null,

test/plugins/html/encoder/document_html_encoder_test.dart

@@ -295,7 +295,7 @@ const delta = {
   }
 };
 const nestedhtml =
-    '''<h1>Welcome to the playground</h1><blockquote>In case you were wondering what the black box at the bottom is – it\'s the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with <code>@lexical/react</code>. Try typing in <strong>some text</strong> with <i>different</i> formats.</blockquote><p>\t</p><img src="https://richtexteditor.com/images/editor-image.png"><p>Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!</p><p></p><p>If you\'d like to find out more about Lexical, you can:</p><ul><li>Visit the <a href="https://lexical.dev/">Lexical website</a> for documentation and more information.</li><li>\t<span><img src="https://richtexteditor.com/images/editor-image.png"></span></li><li>Check out the code on our <a href="https://github.com/facebook/lexical">GitHub repository</a>.</li><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li><li>Join our <a href="https://discord.com/invite/KmG4wQnnD9">Discord Server</a> and chat with the team.</li><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li></ul><p>Lastly, we\'re constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.</p><p></p>''';
+    '''<h1>Welcome to the playground</h1><blockquote>In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with <code>@lexical/react</code>. Try typing in <strong>some text</strong> with <i>different</i> formats.</blockquote><p>\t</p><img src="https://richtexteditor.com/images/editor-image.png"><p>Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!</p><p></p><p>If you'd like to find out more about Lexical, you can:</p><ul><li>Visit the <a href="https://lexical.dev/">Lexical website</a> for documentation and more information.</li><li>\t<span><img src="https://richtexteditor.com/images/editor-image.png"></span></li><li>Check out the code on our <a href="https://github.com/facebook/lexical">GitHub repository</a>.</li><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li><li>Join our <a href="https://discord.com/invite/KmG4wQnnD9">Discord Server</a> and chat with the team.</li><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li></ul><p>Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.</p><p></p>''';
 const nestedDelta = {
   'document': {
     'type': 'page',
@@ -399,6 +399,7 @@ const nestedDelta = {
             'type': 'image',
             'data': {
               'url': 'https://richtexteditor.com/images/editor-image.png',
+              'content': null,
               'align': 'center',
               'height': null,
               'width': null,

test/plugins/html/html_document_test.dart

@@ -1,6 +1,5 @@
 import 'package:flutter_test/flutter_test.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
-import 'dart:developer';
 
 void main() {
   group('html_document_test.dart tests', () {
@@ -301,7 +300,7 @@ const rawHTML =
     '''<h1>AppFlowyEditor</h1><h2>👋 <strong>Welcome to</strong>   <span style="font-weight: bold; font-style: italic">AppFlowy Editor</span></h2><p>AppFlowy Editor is a <strong>highly customizable</strong>   <i>rich-text editor</i></p><p>   <u>Here</u> is an example <del>your</del> you can give a try</p><p>   <span style="font-weight: bold; font-style: italic">Span element</span></p><p>   <u>Span element two</u></p><p>   <span style="font-weight: bold; text-decoration: line-through">Span element three</span></p><p>   <a href="https://appflowy.io">This is an anchor tag!</a></p><h3>Features!</h3><ul><li>[x] Customizable</li><li>[x] Test-covered</li><li>[ ] more to come!</li><li>First item</li><li>Second item</li><li>List element</li></ul><blockquote>This is a quote!</blockquote><p><code> Code block</code></p><p>   <i>Italic one</i></p><p>   <i>Italic two</i></p><p>   <strong>Bold tag</strong></p><p>You can also use <span style="font-weight: bold; font-style: italic">AppFlowy Editor</span> as a component to build your own app. </p><h3>Awesome features</h3><p>If you have questions or feedback, please submit an issue on Github or join the community along with 1000+ builders!</p><p></p><p></p>''';
 
 const nestedhtml =
-    '''<h1>Welcome to the playground</h1><blockquote>In case you were wondering what the black box at the bottom is – it\'s the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with <code>@lexical/react</code>. Try typing in <strong>some text</strong> with <i>different</i> formats.</blockquote><p>\t</p><img src="https://richtexteditor.com/images/editor-image.png"><p>Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!</p><p></p><p>If you\'d like to find out more about Lexical, you can:</p><ul><li>Visit the <a href="https://lexical.dev/">Lexical website</a> for documentation and more information.</li><li>\t<span><img src="https://richtexteditor.com/images/editor-image.png"></span></li><li>Check out the code on our <a href="https://github.com/facebook/lexical">GitHub repository</a>.</li><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li><li>Join our <a href="https://discord.com/invite/KmG4wQnnD9">Discord Server</a> and chat with the team.</li><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li></ul><p>Lastly, we\'re constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.</p><p></p>''';
+    '''<h1>Welcome to the playground</h1><blockquote>In case you were wondering what the black box at the bottom is – it's the debug view, showing the current state of the editor. You can disable it by pressing on the settings control in the bottom-left of your screen and toggling the debug view setting. The playground is a demo environment built with <code>@lexical/react</code>. Try typing in <strong>some text</strong> with <i>different</i> formats.</blockquote><p>\t</p><img src="https://richtexteditor.com/images/editor-image.png"><p>Make sure to check out the various plugins in the toolbar. You can also use #hashtags or @-mentions too!</p><p></p><p>If you'd like to find out more about Lexical, you can:</p><ul><li>Visit the <a href="https://lexical.dev/">Lexical website</a> for documentation and more information.</li><li>\t<span><img src="https://richtexteditor.com/images/editor-image.png"></span></li><li>Check out the code on our <a href="https://github.com/facebook/lexical">GitHub repository</a>.</li><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li><li>Join our <a href="https://discord.com/invite/KmG4wQnnD9">Discord Server</a> and chat with the team.</li><li>Playground code can be found <a href="https://github.com/facebook/lexical/tree/main/packages/lexical-playground">here</a>.</li></ul><p>Lastly, we're constantly adding cool new features to this playground. So make sure you check back here when you next get a chance 🙂.</p><p></p>''';
 const nestedDelta = {
   'document': {
     'type': 'page',
@@ -353,6 +352,7 @@ const nestedDelta = {
         'type': 'image',
         'data': {
           'url': 'https://richtexteditor.com/images/editor-image.png',
+          'content': null,
           'align': 'center',
           'height': null,
           'width': null,
@@ -405,6 +405,7 @@ const nestedDelta = {
             'type': 'image',
             'data': {
               'url': 'https://richtexteditor.com/images/editor-image.png',
+              'content': null,
               'align': 'center',
               'height': null,
               'width': null,

test/render/image/image_node_builder_test.dart

@@ -21,7 +21,8 @@ void main() async {
         final editor = tester.editor
           ..addParagraph(initialText: text)
           ..addNode(
-              imageNode(url: url, imageSourceType: ImageSourceType.network))
+            imageNode(url: url, imageSourceType: ImageSourceType.network),
+          )
           ..addParagraph(initialText: text);
         await editor.startTesting();
         await tester.pumpAndSettle();
@@ -38,7 +39,8 @@ void main() async {
         final editor = tester.editor
           ..addParagraph(initialText: text)
           ..addNode(
-              imageNode(url: url, imageSourceType: ImageSourceType.network))
+            imageNode(url: url, imageSourceType: ImageSourceType.network),
+          )
           ..addParagraph(initialText: text);
 
         await editor.startTesting(editable: false);
@@ -68,7 +70,8 @@ void main() async {
         final editor = tester.editor
           ..addParagraph(initialText: text)
           ..addNode(
-              imageNode(url: url, imageSourceType: ImageSourceType.network))
+            imageNode(url: url, imageSourceType: ImageSourceType.network),
+          )
           ..addParagraph(initialText: text);
 
         await editor.startTesting();
@@ -97,21 +100,30 @@ void main() async {
       mockNetworkImagesFor(() async {
         final editor = tester.editor
           ..addParagraph(initialText: text)
-          ..addNode(imageNode(
+          ..addNode(
+            imageNode(
               url: url,
               align: 'left',
               width: 100,
-              imageSourceType: ImageSourceType.network))
-          ..addNode(imageNode(
+              imageSourceType: ImageSourceType.network,
+            ),
+          )
+          ..addNode(
+            imageNode(
               url: url,
               align: 'center',
               width: 100,
-              imageSourceType: ImageSourceType.network))
-          ..addNode(imageNode(
+              imageSourceType: ImageSourceType.network,
+            ),
+          )
+          ..addNode(
+            imageNode(
               url: url,
               align: 'right',
               width: 100,
-              imageSourceType: ImageSourceType.network))
+              imageSourceType: ImageSourceType.network,
+            ),
+          )
           ..addParagraph(initialText: text);
         await editor.startTesting();
         await tester.pumpAndSettle();
@@ -164,15 +176,16 @@ void main() async {
         final editor = tester.editor
           ..addParagraph(initialText: text)
           ..addNode(
-              imageNode(url: url, imageSourceType: ImageSourceType.network))
+            imageNode(url: url, imageSourceType: ImageSourceType.network),
+          )
           ..addParagraph(initialText: text);
         await editor.startTesting();
 
         expect(editor.documentRootLen, 3);
         final imageFinder = find.byType(Image);
         expect(imageFinder, findsOneWidget);
 
-        final node = editor.document.nodeAtPath([1]);
+        // final node = editor.document.nodeAtPath([1]);
 
         // expect(editor.runAction(3, imageNode!), true); // copy
         // await tester.pump();
@@ -184,9 +197,11 @@ void main() async {
         final editor = tester.editor
           ..addParagraph(initialText: text)
           ..addNode(
-              imageNode(url: url, imageSourceType: ImageSourceType.network))
+            imageNode(url: url, imageSourceType: ImageSourceType.network),
+          )
           ..addNode(
-              imageNode(url: url, imageSourceType: ImageSourceType.network))
+            imageNode(url: url, imageSourceType: ImageSourceType.network),
+          )
           ..addParagraph(initialText: text);
         await editor.startTesting();