From 897033035c52b121c8c82490ef232d2047a2d1d5 Mon Sep 17 00:00:00 2001 From: Yijing Huang Date: Tue, 10 Oct 2023 00:42:51 -0700 Subject: [PATCH] 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 | 141 +-------------------------- example/lib/home_page.dart | 34 +++++-- example/lib/pages/mobile_editor.dart | 8 +- pubspec.yaml | 1 + 4 files changed, 33 insertions(+), 151 deletions(-) diff --git a/example/assets/mobile_example.json b/example/assets/mobile_example.json index 3ad950d92..f8607cfab 100644 --- a/example/assets/mobile_example.json +++ b/example/assets/mobile_example.json @@ -1,140 +1 @@ -{ - "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!" - } - ] - } - } - ] - } -} +{"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}}]}}]}} \ No newline at end of file diff --git a/example/lib/home_page.dart b/example/lib/home_page.dart index 07c4840c9..54f004858 100644 --- a/example/lib/home_page.dart +++ b/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 { 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 { ); } } - } else { - final blob = html.Blob([result], 'text/plain', 'native'); - html.AnchorElement( - href: html.Url.createObjectUrlFromBlob(blob).toString(), - ) - ..setAttribute('download', 'document.${fileType.extension}') - ..click(); } } diff --git a/example/lib/pages/mobile_editor.dart b/example/lib/pages/mobile_editor.dart index 6248a91b3..e6d7dbccf 100644 --- a/example/lib/pages/mobile_editor.dart +++ b/example/lib/pages/mobile_editor.dart @@ -107,14 +107,16 @@ class _MobileEditorState extends State { // showcase 1: customize the editor style. EditorStyle _buildMobileEditorStyle() { return EditorStyle.mobile( - cursorColor: Colors.blue, - selectionColor: Colors.blue.shade200, + cursorColor: const Color.fromARGB(255, 134, 46, 247), + 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), ); diff --git a/pubspec.yaml b/pubspec.yaml index 483b15799..f20604958 100644 --- a/pubspec.yaml +++ b/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