feat: export JSON in mobile and update mobile_example.json (#515)

* feat: add export json in mobile

* chore: update editor style and example json for mobile showcase

* chore: improve text content

example/assets/mobile_example.json

@@ -1,140 +1 @@
-{
+{"document":{"type":"page","children":[{"type":"heading","data":{"level":3,"delta":[{"insert":"AppFlowy Editor is now in","attributes":{"italic":false,"bold":true}}]}},{"type":"heading","data":{"level":1,"delta":[{"insert":"👏 Mobile"},{"insert":" ","attributes":{"italic":false,"bold":true}},{"insert":"📱","attributes":{"bold":true}}]}},{"type":"paragraph","data":{"level":1,"delta":[{"insert":"AppFlowy Editor","attributes":{"bold":true,"italic":false,"underline":false}},{"insert":"  empowers your flutter app with seamless document editing features.","attributes":{"bold":false,"italic":false,"underline":false}}]}},{"type":"paragraph","data":{"delta":[{"insert":"Adding the "},{"insert":"AppFlowy Editor","attributes":{"bold":true}},{"insert":" package in your flutter app will allow you to unlock powerful and customizable document editing capabilities, all without building it from scratch. "}]}},{"type":"heading","data":{"level":1,"delta":[{"insert":"👀 Let’s check it out"}]}},{"type":"heading","data":{"level":3,"delta":[{"insert":"Text Decoration"}]}},{"type":"paragraph","data":{"delta":[{"insert":"Bold","attributes":{"bold":true}},{"insert":"  "},{"insert":"Italic  ","attributes":{"italic":true}},{"insert":"underLine","attributes":{"italic":false,"underline":true}},{"insert":"   ","attributes":{"italic":true}},{"insert":"Strikethrough","attributes":{"italic":false,"strikethrough":true}}]}},{"type":"heading","data":{"level":3,"delta":[{"insert":"Colorful Text"}]}},{"type":"paragraph","data":{"delta":[{"insert":"Infuse","attributes":{"font_color":"0xfff44336"}},{"insert":" "},{"insert":"your","attributes":{"font_color":"0xffffeb3b"}},{"insert":" "},{"insert":"texts","attributes":{"font_color":"0xff2196f3"}},{"insert":" "},{"insert":"with","attributes":{"font_color":"0xff4caf50"}},{"insert":" "},{"insert":"the","attributes":{"font_color":"0xff795548"}},{"insert":" "},{"insert":"vibrant","attributes":{"font_color":"0xffe91e63"}},{"insert":" "},{"insert":"hues","attributes":{"font_color":"0xff9c27b0"}},{"insert":" "},{"insert":"of","attributes":{"font_color":"0xff9e9e9e"}},{"insert":" "},{"insert":"a","attributes":{"bg_color":"0x4d9e9e9e"}},{"insert":" "},{"insert":"rainbow","attributes":{"bg_color":"0x4df44336"}},{"insert":" "},{"insert":"to","attributes":{"bg_color":"0x4d4caf50"}},{"insert":" "},{"insert":"brighten","attributes":{"bg_color":"0x4dffeb3b"}},{"insert":" "},{"insert":"up","attributes":{"bg_color":"0x4d795548"}},{"insert":" "},{"insert":"your","attributes":{"bg_color":"0x4d9c27b0"}},{"insert":" "},{"insert":"day","attributes":{"bg_color":"0x4d2196f3"}},{"insert":"! "}]}},{"type":"heading","data":{"level":3,"delta":[{"insert":"Lists"}]}},{"type":"todo_list","data":{"checked":false,"delta":[{"insert":"To Do List"}]}},{"type":"todo_list","data":{"delta":[{"insert":"Checked"}],"checked":true}},{"type":"bulleted_list","data":{"delta":[{"insert":"Bulleted List"}]}},{"type":"bulleted_list","data":{"delta":[]}},{"type":"numbered_list","data":{"delta":[{"insert":"Numbered List"}]}},{"type":"numbered_list","data":{"delta":[]}},{"type":"heading","data":{"level":3,"delta":[{"insert":"Link & Quote"}]}},{"type":"quote","data":{"delta":[{"insert":"Here’s where you can find the "},{"insert":"AppFlowy Editor flutter package","attributes":{"href":"https://pub.dev/packages/appflowy_editor"}},{"insert":" to add to your environment."}]}},{"type":"heading","data":{"level":3,"delta":[{"insert":"Code Inline"}]}},{"type":"paragraph","data":{"delta":[{"insert":"flutter pub add appflowy_editor\nflutter pub get","attributes":{"code":true}}]}}]}}
-  "document": {
-    "type": "page",
-    "children": [
-      {
-        "type": "heading",
-        "data": {
-          "level": 2,
-          "delta": [
-            { "insert": "👋 " },
-            { "insert": "Welcome to", "attributes": { "bold": true } },
-            { "insert": " " },
-            {
-              "insert": "AppFlowy Editor",
-              "attributes": { "italic": false, "bold": true }
-            }
-          ],
-          "align": "center"
-        }
-      },
-      {
-        "type": "paragraph",
-        "data": {
-          "delta": [
-            { "insert": "AppFlowy Editor is a" },
-            { "insert": " " },
-            {
-              "insert": "highly customizable",
-              "attributes": { "bold": true, "bg_color": "0x7fffeb3b" }
-            },
-            { "insert": " " },
-            { "insert": "rich-text editor", "attributes": { "italic": true } },
-            { "insert": " for " },
-            { "insert": "Flutter", "attributes": { "underline": true } }
-          ]
-        }
-      },
-      {
-        "type": "bulleted_list",
-        "data": {
-          "delta": [
-            {
-              "insert": "Customizable",
-              "attributes": { "bg_color": "0x4d00BCF0" }
-            }
-          ]
-        }
-      },
-      {
-        "type": "bulleted_list",
-        "data": {
-          "delta": [
-            {
-              "insert": "Test-covered",
-              "attributes": { "bg_color": "0x4d00BCF0" }
-            }
-          ]
-        }
-      },
-      {
-        "type": "bulleted_list",
-        "data": {
-          "delta": [
-            { "insert": "More to come!", "attributes": { "code": true } }
-          ]
-        }
-      },
-      { "type": "paragraph", "data": { "delta": [] } },
-      {
-        "type": "heading",
-        "data": {
-          "delta": [{ "insert": "Here is an example you can give it a try" }],
-          "level": 4,
-          "align": "center"
-        }
-      },
-      {
-        "type": "todo_list",
-        "data": {
-          "checked": false,
-          "delta": [
-            { "insert": "Use " },
-            {
-              "insert": "AppFlowy Editor",
-              "attributes": {
-                "italic": true,
-                "bold": true,
-                "font_color": "0xffD70040",
-                "bg_color": "0x6000BCF0"
-              }
-            },
-            { "insert": " as a component to build your own app." }
-          ]
-        }
-      },
-      {
-        "type": "todo_list",
-        "data": {
-          "checked": false,
-          "delta": [
-            { "insert": "Select text to " },
-            {
-              "insert": "trigger the toolbar",
-              "attributes": { "bg_color": "0x4de91e63" }
-            },
-            { "insert": " to " },
-            {
-              "insert": "format",
-              "attributes": {
-                "code": true,
-                "bold": true,
-                "underline": true,
-                "italic": true,
-                "font_color": "0xfff44336",
-                "bg_color": "0x4d4caf50"
-              }
-            },
-            { "insert": " your notes." }
-          ]
-        }
-      },
-      { "type": "paragraph", "data": { "delta": [] } },
-      {
-        "type": "paragraph",
-        "data": {
-          "delta": [
-            { "insert": "If you have questions or feedback, please " },
-            {
-              "insert": "submit an issue",
-              "attributes": { "bg_color": "0x4de91e63" }
-            },
-            {
-              "insert": " on Github or join the community along with 1000+ builders!"
-            }
-          ]
-        }
-      }
-    ]
-  }
-}

example/lib/home_page.dart

@@ -11,6 +11,7 @@ import 'package:file_picker/file_picker.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:path_provider/path_provider.dart';
 import 'package:universal_html/html.dart' as html;
 
 enum ExportFileType {
@@ -290,7 +291,31 @@ class _HomePageState extends State<HomePage> {
         throw UnimplementedError();
     }
 
-    if (!kIsWeb) {
+    if (kIsWeb) {
+      final blob = html.Blob([result], 'text/plain', 'native');
+      html.AnchorElement(
+        href: html.Url.createObjectUrlFromBlob(blob).toString(),
+      )
+        ..setAttribute('download', 'document.${fileType.extension}')
+        ..click();
+    } else if (PlatformExtension.isMobile) {
+      final appStorageDirectory = await getApplicationDocumentsDirectory();
+
+      final path = File(
+        '${appStorageDirectory.path}/${DateTime.now()}.${fileType.extension}',
+      );
+      await path.writeAsString(result);
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text(
+              'This document is saved to the ${appStorageDirectory.path}',
+            ),
+          ),
+        );
+      }
+    } else {
+      // for desktop
       final path = await FilePicker.platform.saveFile(
         fileName: 'document.${fileType.extension}',
       );
@@ -304,13 +329,6 @@ class _HomePageState extends State<HomePage> {
           );
         }
       }
-    } else {
-      final blob = html.Blob([result], 'text/plain', 'native');
-      html.AnchorElement(
-        href: html.Url.createObjectUrlFromBlob(blob).toString(),
-      )
-        ..setAttribute('download', 'document.${fileType.extension}')
-        ..click();
     }
   }
 

example/lib/pages/mobile_editor.dart

@@ -107,14 +107,16 @@ class _MobileEditorState extends State<MobileEditor> {
   // showcase 1: customize the editor style.
   EditorStyle _buildMobileEditorStyle() {
     return EditorStyle.mobile(
-      cursorColor: Colors.blue,
+      cursorColor: const Color.fromARGB(255, 134, 46, 247),
-      selectionColor: Colors.blue.shade200,
+      selectionColor: const Color.fromARGB(50, 134, 46, 247),
       textStyleConfiguration: TextStyleConfiguration(
         text: GoogleFonts.poppins(
           fontSize: 14,
           color: Colors.black,
         ),
-        code: GoogleFonts.badScript(),
+        code: GoogleFonts.sourceCodePro(
+          backgroundColor: Colors.grey.shade200,
+        ),
       ),
       padding: const EdgeInsets.symmetric(horizontal: 24.0),
     );

pubspec.yaml

@@ -36,6 +36,7 @@ dependencies:
   visibility_detector: ^0.4.0+2
   file_picker: ^5.3.1
   path: ^1.8.3
+  path_provider: ^2.0.5
   diff_match_patch: ^0.4.1
   string_validator: ^1.0.0
   universal_html: ^2.2.4