feat: implement save document to json

Author: LucasXu0

frontend/app_flowy/packages/appflowy_editor/example/lib/home_page.dart

@@ -1,9 +1,13 @@
 import 'dart:convert';
+import 'dart:io';
 
 import 'package:appflowy_editor/appflowy_editor.dart';
 import 'package:example/pages/simple_editor.dart';
+import 'package:file_picker/file_picker.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:universal_html/html.dart' as html;
 
 class HomePage extends StatefulWidget {
   const HomePage({Key? key}) : super(key: key);
@@ -56,18 +60,20 @@ class _HomePageState extends State<HomePage> {
           _buildSeparator(context, 'AppFlowy Editor Demo'),
           _buildListTile(context, 'With Example.json', () {
             final jsonString = rootBundle.loadString('assets/example.json');
-            _loadJsonEditor(context, jsonString);
+            _loadEditor(context, jsonString);
           }),
           _buildListTile(context, 'With Empty Document', () {
             final jsonString = Future<String>.value(
-              json.encode(EditorState.empty().document.toJson()).toString(),
+              jsonEncode(EditorState.empty().document.toJson()).toString(),
             );
-            _loadJsonEditor(context, jsonString);
+            _loadEditor(context, jsonString);
           }),
 
           // Encoder Demo
           _buildSeparator(context, 'Encoder Demo'),
-          _buildListTile(context, 'Export To JSON', () {}),
+          _buildListTile(context, 'Export To JSON', () {
+            _exportJson(_editorState);
+          }),
           _buildListTile(context, 'Export to Markdown', () {}),
 
           // Decoder Demo
@@ -133,7 +139,7 @@ class _HomePageState extends State<HomePage> {
     );
   }
 
-  void _loadJsonEditor(BuildContext context, Future<String> jsonString) {
+  void _loadEditor(BuildContext context, Future<String> jsonString) {
     setState(
       () {
         _widgetBuilder = (context) => SimpleEditor(
@@ -145,4 +151,59 @@ class _HomePageState extends State<HomePage> {
       },
     );
   }
+
+  void _exportJson(EditorState editorState) async {
+    final document = editorState.document.toJson();
+    final json = jsonEncode(document);
+
+    if (!kIsWeb) {
+      final path = await FilePicker.platform.saveFile(
+        dialogTitle: 'Export to JSON',
+        fileName: 'document.json',
+      );
+      if (path != null) {
+        await File(path).writeAsString(json);
+        if (mounted) {
+          ScaffoldMessenger.of(context).showSnackBar(
+            SnackBar(
+              content: Text('The document.json is saved to the $path'),
+            ),
+          );
+        }
+      }
+    } else {
+      final blob = html.Blob([json], 'text/plain', 'native');
+      html.AnchorElement(
+        href: html.Url.createObjectUrlFromBlob(blob).toString(),
+      )
+        ..setAttribute('download', 'document.json')
+        ..click();
+    }
+  }
+
+  // void _exportDocument(EditorState editorState) async {
+  //   final document = editorState.document.toJson();
+  //   final json = jsonEncode(document);
+  //   if (kIsWeb) {
+  //     final blob = html.Blob([json], 'text/plain', 'native');
+  //     html.AnchorElement(
+  //       href: html.Url.createObjectUrlFromBlob(blob).toString(),
+  //     )
+  //       ..setAttribute('download', 'editor.json')
+  //       ..click();
+  //   } else {
+  //     final directory = await getTemporaryDirectory();
+  //     final path = directory.path;
+  //     final file = File('$path/editor.json');
+  //     await file.writeAsString(json);
+
+  //     if (mounted) {
+  //       ScaffoldMessenger.of(context).showSnackBar(
+  //         SnackBar(
+  //           content: Text('The document is saved to the ${file.path}'),
+  //         ),
+  //       );
+  //     }
+  //   }
+  // }
 }