yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-11-04 03:54:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: #1649 add document for importing data

Browse Source
This commit is contained in:
Lucas.Xu 2023-01-05 18:12:39 +08:00
parent 2fb0e8da28
commit 50f9ac1657
2 changed files with 44 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/app_flowy/packages/appflowy_editor/README.md
View File

@ -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.

36
frontend/app_flowy/packages/appflowy_editor/documentation/importing.md Normal file
View File

@ -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).