AppFlowy/frontend/app_flowy/packages/appflowy_editor

AppFlowy Editor

A highly customizable rich-text editor for Flutter

Key Features

• 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 and maintained by AppFlowy's core team along with a community of more than 1,000 builders

Getting started

flutter pub add appflowy_editor
flutter pub get

How to use

Let's create a new AppFlowyEditor object

final editorState = EditorState.empty(); // an empty state
final editor = AppFlowyEditor(
    editorState: editorState,
    keyEventHandlers: const [],
    customBuilders: const {},
);

You can also create an editor from a JSON file

final json = ...;
final editorState = EditorState(StateTree.fromJson(data));
final editor = AppFlowyEditor(
    editorState: editorState,
    keyEventHandlers: const [],
    customBuilders: const {},
);

To get a sense for how you might use it, run this example:

git clone https://github.com/AppFlowy-IO/AppFlowy.git
cd frontend/app_flowy/packages/appflowy_editor/example
flutter run

How to customize

Customize a component

Please refer to customizing a component for more details.

Customize a shortcut event

Please refer to customizing a shortcut event for more details.

More Example

• Customize a component.
  • Checkbox Text shows you how to extend new styles based on existing rich text components.
  • Image teaches you how to extend a new node and render it.
  • and more examples on rich-text plugins
• Customize a shortcut event
  • BIUS - Showing how to make text bold/italic/underline/strikethrough through shortcut keys
  • Paste HTML gives you an idea on how to handle pasted styles through shortcut keys
  • need more examples? Internal key event handlers

Glossary

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 for details.