Skip to content

Commit

Permalink
feat: export JSON in mobile and update mobile_example.json (#515)
Browse files Browse the repository at this point in the history 
* feat: add export json in mobile

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

* chore: improve text content
  • Loading branch information
@hyj1204
hyj1204 authored Oct 10, 2023
1 parent adb05d4 commit 8970330
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 151 deletions.
141 changes: 1 addition & 140 deletions example/assets/mobile_example.json
View file
Original file line number Diff line number Diff line change
@@ -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}}]}}]}}
34 changes: 26 additions & 8 deletions example/lib/home_page.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -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}',
);
Expand All @@ -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();
}
}

Expand Down
8 changes: 5 additions & 3 deletions example/lib/pages/mobile_editor.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,14 +107,16 @@ class _MobileEditorState extends State<MobileEditor> {
// 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),
);
Expand Down
1 change: 1 addition & 0 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 8970330

Please sign in to comment.