AppFlowy/frontend/app_flowy/packages/flowy_editor

AppFlowyEditor

An completely customize, test-covered rich text editing component for Flutter

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

Getting started

flutter pub add flowy_editor
flutter pub get

Usage

Creates editor with empty document

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

Creates editor from JSON file

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

For more. Run the example.

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

How to customizes ...

Customizing a component

Please refer to customizing a component for more details.

Customizing a shortcut event

Please refer to customizing a shortcut event for more details.

Code Examples

• Customizing a component.
  • Checkbox Text - Showing how to extend new styles based on existing rich text components.
  • Image - Showing how to extend a new node and render it.
  • More examples. Rich text plugins
• Customizing a shortcut event.
  • BIUS - Showing how to make text bold/italic/underline/strikethrough through shortcut keys
  • Paste HTML - Showing how to handle pasted styles through shortcut keys
  • More examples. Internal key event handlers

Glossary

We are working on more detailed instructions, for now 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 for details.