feat: add image node widget in example

frontend/app_flowy/packages/flowy_editor/example/assets/document.json

@@ -28,6 +28,20 @@
             "font-size": 30,
             "content": "cccccccccccccccccccccc"
           }
+        },
+        {
+          "type": "image",
+          "attributes": {
+            "image_src": "https://images.pexels.com/photos/12499889/pexels-photo-12499889.jpeg?fm=jpg&w=640&h=427"
+          }
+        },
+        {
+          "type": "text",
+          "attributes": {
+            "text-type": "heading1",
+            "font-size": 30,
+            "content": "dddddddddddddddddddd"
+          }
         }
       ]
     }

frontend/app_flowy/packages/flowy_editor/example/lib/main.dart

@@ -1,5 +1,6 @@
 import 'dart:convert';
 
+import 'package:example/plugin/image_node_widget.dart';
 import 'package:example/plugin/text_node_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:flowy_editor/flowy_editor.dart';
@@ -58,10 +59,15 @@ class _MyHomePageState extends State<MyHomePage> {
   void initState() {
     super.initState();
 
-    renderPlugins.register(
-      'text',
-      textNodeWidgetBuilder,
-    );
+    renderPlugins
+      ..register(
+        'text',
+        textNodeWidgetBuilder,
+      )
+      ..register(
+        'image',
+        imageNodeWidgetBuilder,
+      );
   }
 
   @override

frontend/app_flowy/packages/flowy_editor/example/lib/plugin/image_node_widget.dart

@@ -0,0 +1,55 @@
+import 'package:flowy_editor/flowy_editor.dart';
+import 'package:flutter/material.dart';
+
+NodeWidgetBuilder<Node> imageNodeWidgetBuilder =
+    (node, renderPlugins) => ImageNodeWidget(
+          node: node,
+          renderPlugins: renderPlugins,
+        );
+
+class ImageNodeWidget extends BaseNodeWidget {
+  const ImageNodeWidget({
+    super.key,
+    required super.node,
+    required super.renderPlugins,
+  });
+
+  @override
+  State<ImageNodeWidget> createState() => _ImageNodeWidgetState();
+}
+
+class _ImageNodeWidgetState extends State<ImageNodeWidget> {
+  Node get node => widget.node;
+  String get src => node.attributes['image_src'] as String;
+
+  @override
+  Widget build(BuildContext context) {
+    final childWidget = renderChildren();
+    final image = Image.network(src);
+    if (childWidget != null) {
+      return Column(
+        children: [image, childWidget],
+      );
+    } else {
+      return image;
+    }
+  }
+
+  // manage children's render
+  Widget? renderChildren() {
+    if (node.children.isEmpty) {
+      return null;
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: node.children
+          .map(
+            (e) => widget.renderPlugins.buildWidgetWithNode(
+              e,
+            ),
+          )
+          .toList(),
+    );
+  }
+}