Mirrored_Repos/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2024-08-30 18:12:39 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update README.md

Browse Source
This commit is contained in:
Annie 2022-08-17 20:16:39 +08:00 committed by GitHub
parent 555beed47b
commit 2324be2532
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,26 +11,20 @@ and the Flutter guide for
[developing packages and plugins](https://flutter.dev/developing-packages).
-->
<h1 align="center"><b>AppFlowyEditor</b></h1>
<h1 align="center"><b>AppFlowy Editor</b></h1>
<p align="center">An completely customize, test-covered rich text editing component for Flutter</p>
<p align="center">A highly customizable rich-text editor for Flutter</p>
<div align="center">
<img src="https://raw.githubusercontent.com/LucasXu0/AppFlowy/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/documentation/images/example.png" width = "900"/>
</div>
## Features
## Key Features
* Customize
* Support customizing components.
* Support customizing shortcut event.
* Support customizing toolbar and popup list. (WIP)
* Support customizing theme and any styles. (WIP)
* Test-covered
* Current code coverage >= 63%, we will still continue to add more test cases.
> Due to the extensible structure and the increase in functionality, we encourage each commit to add test case code under test to ensure that the other committer does not have to worry about their code affecting the existing logic as much as possible. For more testing information, please check [TESTING.md](https://github.com/LucasXu0/AppFlowy/blob/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/documentation/testing.md)
* Allow you to build rich, intuitive editors like those in Notion
* Customize to your needs by customizing components, shortcut events, and many more coming soon including menu options and themes
* [Test-covered](https://github.com/LucasXu0/AppFlowy/blob/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/documentation/testing.md) and maintained by AppFlowy's core team along with a community of more than 1,000 builders
## Getting started
@ -40,11 +34,11 @@ flutter pub add appflowy_editor
flutter pub get
```
## Usage
## How to use
Creates editor with empty document
Let's create a new AppFlowyEditor object
```dart
final editorState = EditorState.empty();
final editorState = EditorState.empty(); // an empty state
final editor = AppFlowyEditor(
editorState: editorState,
keyEventHandlers: const [],
@ -52,7 +46,7 @@ final editor = AppFlowyEditor(
);
```
Creates editor from JSON file
You can also create an editor from a JSON file
```dart
final json = ...;
final editorState = EditorState(StateTree.fromJson(data));
@ -63,7 +57,7 @@ final editor = AppFlowyEditor(
);
```
For more. Run the example.
To get a sense for how you might use it, run this example:
```shell
git clone https://github.com/AppFlowy-IO/AppFlowy.git
cd frontend/app_flowy/packages/appflowy_editor/example
@ -71,26 +65,26 @@ flutter run
```
## How to customizes ...
### Customizing a component
## How to customize
### Customize a component
Please refer to [customizing a component](documentation/customizing.md#customizing-a-custom-component) for more details.
### Customizing a shortcut event
### Customize a shortcut event
Please refer to [customizing a shortcut event](documentation/customizing.md#customizing-a-custom-shortcut-event) for more details.
## Code Examples
* Customizing a component.
* [Checkbox Text](https://github.com/LucasXu0/AppFlowy/blob/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/checkbox_text.dart) - Showing how to extend new styles based on existing rich text components.
* [Image](https://github.com/LucasXu0/AppFlowy/blob/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/image_node_widget.dart) - Showing how to extend a new node and render it.
* More examples. [Rich text plugins](https://github.com/LucasXu0/AppFlowy/tree/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text)
* Customizing a shortcut event.
## More Example
* Customize a component.
* [Checkbox Text](https://github.com/LucasXu0/AppFlowy/blob/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text/checkbox_text.dart) shows you how to extend new styles based on existing rich text components.
* [Image](https://github.com/LucasXu0/AppFlowy/blob/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/image_node_widget.dart) teaches you how to extend a new node and render it.
* and more examples on [rich-text plugins](https://github.com/LucasXu0/AppFlowy/tree/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text)
* Customize a shortcut event
* [BIUS](https://github.com/LucasXu0/AppFlowy/blob/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart) - Showing how to make text bold/italic/underline/strikethrough through shortcut keys
* [Paste HTML](https://github.com/LucasXu0/AppFlowy/blob/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers/copy_paste_handler.dart) - Showing how to handle pasted styles through shortcut keys
* More examples. [Internal key event handlers](https://github.com/LucasXu0/AppFlowy/tree/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers)
* [Paste HTML](https://github.com/LucasXu0/AppFlowy/blob/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers/copy_paste_handler.dart) gives you an idea on how to handle pasted styles through shortcut keys
* need more examples? [Internal key event handlers](https://github.com/LucasXu0/AppFlowy/tree/documentation/appflowy_editor/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers)
## Glossary
We are working on more detailed instructions, for now please refer to the API documentation.
Please refer to the API documentation (link).
## Contributing
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated. Please look at [CONTRIBUTING.md](documentation/contributing.md) for details.
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated. Please look at [CONTRIBUTING.md](documentation/contributing.md) for details.