feat: #1649 add document for importing data

frontend/app_flowy/packages/appflowy_editor/README.md

@@ -1,14 +1,14 @@
-<!-- 
+<!--
 This README describes the package. If you publish this package to pub.dev,
 this README's contents appear on the landing page for your package.
 
 For information about how to write a good package README, see the guide for
-[writing package pages](https://dart.dev/guides/libraries/writing-package-pages). 
+[writing package pages](https://dart.dev/guides/libraries/writing-package-pages).
 
 For general information about developing packages, see the Dart guide for
 [creating packages](https://dart.dev/guides/libraries/create-library-packages)
 and the Flutter guide for
-[developing packages and plugins](https://flutter.dev/developing-packages). 
+[developing packages and plugins](https://flutter.dev/developing-packages).
 -->
 
 <h1 align="center"><b>AppFlowy Editor</b></h1>
@@ -51,7 +51,7 @@ flutter pub get
 
 ## Creating Your First Editor
 
-Start by creating a new empty AppFlowyEditor object. 
+Start by creating a new empty AppFlowyEditor object.
 
 ```dart
 final editorState = EditorState.empty(); // an empty state
@@ -60,7 +60,7 @@ final editor = AppFlowyEditor(
 );
 ```
 
-You can also create an editor from a JSON object in order to configure your initial state.
+You can also create an editor from a JSON object in order to configure your initial state. Or you can [create an editor from Markdown or Quill Delta](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/importing.md).
 
 ```dart
 final json = ...;
@@ -79,7 +79,7 @@ MaterialApp(
 );
 ```
 
-To get a sense for how the AppFlowy Editor works, run our example:
+To get a sense of how the AppFlowy Editor works, run our example:
 
 ```shell
 git clone https://github.com/AppFlowy-IO/AppFlowy.git
@@ -98,7 +98,7 @@ Below are some examples of component customizations:
  * [Checkbox Text](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/checkbox_text.dart) demonstrates how to extend new styles based on existing rich text components
  * [Image](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/network_image_node_widget.dart) demonstrates how to extend a new node and render it
  * See further examples of [rich-text plugins](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text)
-    
+
 ### Customizing Shortcut Events
 
 Please refer to our documentation on customizing AppFlowy for a detailed discussion about [customizing shortcut events](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/customizing.md#customize-a-shortcut-event).
@@ -113,7 +113,7 @@ Below are some examples of shortcut event customizations:
 Please refer to the API documentation.
 
 ## Contributing
-Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. 
+Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
 
 Please look at [CONTRIBUTING.md](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/contributing-to-appflowy) for details.
 

frontend/app_flowy/packages/appflowy_editor/documentation/importing.md

@@ -0,0 +1,36 @@
+# Importing data
+
+For now, we have supported three ways to import data to initialize AppFlowy Editor.
+
+1. From AppFlowy Document JSON
+
+```dart
+const document = r'''{"document":{"type":"editor","children":[{"type":"text","attributes":{"subtype":"heading","heading":"h1"},"delta":[{"insert":"Hello AppFlowy!"}]}]}}''';
+final json = jsonDecode(document);
+final editorState = EditorState(
+    document: Document.fromJson(
+        Map<String, Object>.from(json),
+    ),
+);
+```
+
+2. From Markdown
+
+```dart
+const markdown = r'''# Hello AppFlowy!''';
+final editorState = EditorState(
+    document: markdownToDocument(markdown),
+);
+```
+
+3. From Quill Delta
+
+```dart
+const delta = r'''[{"insert":"Hello AppFlowy!"},{"attributes":{"header":1},"insert":"\n"}]''';
+final json = jsonDecode(delta);
+final editorState = EditorState(
+    document: DeltaDocumentConvert().convertFromJSON(json),
+);
+```
+
+For more details, please refer to the function `_importFile` through this [link](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/example/lib/home_page.dart).