doc: Editorial updates to the ReadMe for AppFlowyEditor (#900)
docs: Editorial updates to the ReadMe for AppFlowyEditor
This commit is contained in:
Eric Phillips
GitHub
parent
f2018969b2
commit
86f7f2844b
1 changed files with 115 additions and 82 deletions
|
|
@ -26,21 +26,27 @@ and the Flutter guide for
|
|||
|
||||
## Key Features
|
||||
|
||||
* Allow you to build rich, intuitive editors
|
||||
* Design and modify it your way by customizing components, shortcut events, and many more coming soon including menu options and themes
|
||||
* [Test-covered](https://github.com/AppFlowy-IO/AppFlowy/blob/main/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
|
||||
* Build rich, intuitive editors
|
||||
* Design and modify an ever expanding list of customizable features including
|
||||
* components (such as form input controls, numbered lists, and rich text widgets)
|
||||
* shortcut events
|
||||
* menu options (**coming soon!**)
|
||||
* themes (**coming soon!**)
|
||||
* [Test-coverage](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/testing.md) and on-going maintenance by AppFlowy's core team and community of more than 1,000 builders
|
||||
|
||||
## Getting Started
|
||||
|
||||
## Getting started
|
||||
Add the AppFlowy editor [Flutter package](https://docs.flutter.dev/development/packages-and-plugins/using-packages) to your environment.
|
||||
|
||||
```shell
|
||||
flutter pub add appflowy_editor
|
||||
flutter pub get
|
||||
```
|
||||
|
||||
## How to use
|
||||
## Creating Your First Editor
|
||||
|
||||
Start by creating a new empty AppFlowyEditor object.
|
||||
|
||||
Let's create a new AppFlowyEditor object
|
||||
```dart
|
||||
final editorState = EditorState.empty(); // an empty state
|
||||
final editor = AppFlowyEditor(
|
||||
|
|
@ -50,7 +56,8 @@ final editor = AppFlowyEditor(
|
|||
);
|
||||
```
|
||||
|
||||
You can also create an editor from a JSON file
|
||||
You can also create an editor from a JSON object in order to configure your initial state.
|
||||
|
||||
```dart
|
||||
final json = ...;
|
||||
final editorState = EditorState(StateTree.fromJson(data));
|
||||
|
|
@ -61,37 +68,43 @@ final editor = AppFlowyEditor(
|
|||
);
|
||||
```
|
||||
|
||||
To get a sense for how you might use it, run this example:
|
||||
To get a sense for how the AppFlowy Editor works, run our example:
|
||||
|
||||
```shell
|
||||
git clone https://github.com/AppFlowy-IO/AppFlowy.git
|
||||
cd frontend/app_flowy/packages/appflowy_editor/example
|
||||
flutter run
|
||||
```
|
||||
|
||||
## Customizing Your Editor
|
||||
|
||||
## How to customize
|
||||
### Customize a component
|
||||
Please refer to [customizing a component](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/customizing.md#customize-a-component) for more details.
|
||||
### Customizing Components
|
||||
|
||||
Please refer to our documentation on customizing AppFlowy for a detailed discussion about [customizing components](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/customizing.md#customize-a-component).
|
||||
|
||||
### Customize a shortcut event
|
||||
Please refer to [customizing a shortcut event](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/documentation/customizing.md#customize-a-shortcut-event) for more details.
|
||||
Below are some examples of component customizations:
|
||||
|
||||
## More Examples
|
||||
* Customize a component
|
||||
* [Checkbox Text](https://github.com/AppFlowy-IO/AppFlowy/blob/main/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/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/example/lib/plugin/network_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/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/render/rich_text)
|
||||
* Customize a shortcut event
|
||||
* [BIUS](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart) shows you how to make text bold/italic/underline/strikethrough through shortcut keys
|
||||
* [Paste HTML](https://github.com/AppFlowy-IO/AppFlowy/blob/main/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? Check out [Internal key event handlers](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers)
|
||||
* [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).
|
||||
|
||||
Below are some examples of shortcut event customizations:
|
||||
|
||||
* [BIUS](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers/update_text_style_by_command_x_handler.dart) demonstrates how to make text bold/italic/underline/strikethrough through shortcut keys
|
||||
* [Paste HTML](https://github.com/AppFlowy-IO/AppFlowy/blob/main/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? Check out [Internal key event handlers](https://github.com/AppFlowy-IO/AppFlowy/blob/main/frontend/app_flowy/packages/appflowy_editor/lib/src/service/internal_key_event_handlers)
|
||||
|
||||
## Glossary
|
||||
Please refer to the API documentation.
|
||||
|
||||
## 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](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/contributing-to-appflowy) 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](https://appflowy.gitbook.io/docs/essential-documentation/contribute-to-appflowy/contributing-to-appflowy) for details.
|
||||
|
||||
## License
|
||||
Distributed under the AGPLv3 License. See LICENSE for more information.
|
||||
Distributed under the AGPLv3 License. See [LICENSE](https://github.com/AppFlowy-IO/AppFlowy-Docs/blob/main/LICENSE) for more information.
|
||||
|
|
|
|||
Loading…
Reference in a new issue