fix: unable to export image to markdown (#3709)

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/parsers/code_block_node_parser.dart

@@ -1,13 +1,23 @@
+import 'package:appflowy/plugins/document/presentation/editor_plugins/plugins.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
 
 class CodeBlockNodeParser extends NodeParser {
   const CodeBlockNodeParser();
 
   @override
-  String get id => 'code_block';
+  String get id => CodeBlockKeys.type;
 
   @override
   String transform(Node node, DocumentMarkdownEncoder? encoder) {
-    return '```\n${node.attributes['code_block']}\n```';
+    final delta = node.delta;
+    final language = node.attributes[CodeBlockKeys.language] ?? '';
+    if (delta == null) {
+      throw Exception('Delta is null');
+    }
+    final markdown = DeltaMarkdownEncoder().convert(delta);
+    final result = '```$language\n$markdown\n```';
+    final suffix = node.next == null ? '' : '\n';
+
+    return '$result$suffix';
   }
 }

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/parsers/custom_image_node_parser.dart

@@ -0,0 +1,16 @@
+import 'package:appflowy_editor/appflowy_editor.dart';
+
+class CustomImageNodeParser extends NodeParser {
+  const CustomImageNodeParser();
+
+  @override
+  String get id => ImageBlockKeys.type;
+
+  @override
+  String transform(Node node, DocumentMarkdownEncoder? encoder) {
+    assert(node.children.isEmpty);
+    final url = node.attributes[ImageBlockKeys.url];
+    assert(url != null);
+    return '![]($url)\n';
+  }
+}

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/parsers/divider_node_parser.dart

@@ -4,7 +4,7 @@ class DividerNodeParser extends NodeParser {
   const DividerNodeParser();
 
   @override
-  String get id => 'divider';
+  String get id => DividerBlockKeys.type;
 
   @override
   String transform(Node node, DocumentMarkdownEncoder? encoder) {

frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/parsers/document_markdown_parsers.dart

@@ -1,5 +1,6 @@
 export 'callout_node_parser.dart';
 export 'code_block_node_parser.dart';
+export 'custom_image_node_parser.dart';
 export 'divider_node_parser.dart';
 export 'math_equation_node_parser.dart';
 export 'toggle_list_node_parser.dart';

frontend/appflowy_flutter/lib/workspace/application/export/document_exporter.dart

@@ -3,7 +3,7 @@ import 'dart:convert';
 import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy/plugins/document/application/document_data_pb_extension.dart';
 import 'package:appflowy/plugins/document/application/prelude.dart';
-import 'package:appflowy/plugins/document/presentation/editor_plugins/parsers/markdown_parsers.dart';
+import 'package:appflowy/plugins/document/presentation/editor_plugins/parsers/document_markdown_parsers.dart';
 import 'package:appflowy_backend/protobuf/flowy-error/errors.pb.dart';
 import 'package:appflowy_backend/protobuf/flowy-folder2/view.pb.dart';
 import 'package:appflowy_editor/appflowy_editor.dart';
@@ -16,6 +16,7 @@ const List<NodeParser> _customParsers = [
   CodeBlockNodeParser(),
   CalloutNodeParser(),
   ToggleListNodeParser(),
+  CustomImageNodeParser(),
 ];
 
 enum DocumentExportType {

frontend/appflowy_flutter/test/unit_test/editor/share_markdown_test.dart

@@ -41,9 +41,13 @@ void main() {
         "type":"page",
         "children":[
             {
-                "type":"code_block",
+                "type":"code",
                 "data":{
-                    "code_block":"Some Code"
+                      "delta": [
+                        {
+                            "insert": "Some Code"
+                        }
+                    ]
                 }
             }
         ]
@@ -154,5 +158,38 @@ void main() {
       );
       expect(result, '- Toggle list\n');
     });
+
+    test('custom image', () {
+      const image =
+          'https://images.unsplash.com/photo-1694984121999-36d30b67f391?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzfHx8ZW58MHx8fHx8&auto=format&fit=crop&w=800&q=60';
+      const text = '''
+{
+    "document":{
+        "type":"page",
+        "children":[
+            {
+                "type":"image",
+                "data":{
+                    "url": "$image"
+                }
+            }
+        ]
+    }
+}
+''';
+      final document = Document.fromJson(
+        Map<String, Object>.from(json.decode(text)),
+      );
+      final result = documentToMarkdown(
+        document,
+        customParsers: [
+          const CustomImageNodeParser(),
+        ],
+      );
+      expect(
+        result,
+        '![]($image)\n',
+      );
+    });
   });
 }