AppFlowy/frontend/app_flowy/packages/appflowy_editor
abichinger 000569a836
feat: callout (#1732)
* feat: add callout plugin

* refactor: add SelectionMenuItem.node factory

makes calloutMenuItem more readable

* feat: add color picker

* feat: add popover to callout

* feat: add emoji to callout

* fix: store tint name

* fix: remove leading underscores

* fix: revert export of editor_entry

* refactor: move color tint names to appflowy_editor

* fix: #1732 only re-insert text node if it's parent is text node too while deleting

* docs: doc comment for SelectionMenuItem.node

* fix: disable callout plugin

should be re-enabled after #1753 is done

* fix: typo

---------

Co-authored-by: Lucas.Xu <lucas.xu@appflowy.io>
2023-01-30 10:56:19 +08:00
..
assets/images Added : customize the color and background color of selected text (#1601) 2022-12-23 19:57:17 +08:00
documentation feat: #1649 add document for importing data 2023-01-05 18:12:39 +08:00
example feat: refactor the gpt3 api and support multi line completion 2023-01-10 10:14:52 +08:00
lib feat: callout (#1732) 2023-01-30 10:56:19 +08:00
test feat: #1061 Support markdown to create a blockquote 2023-01-28 16:10:52 +08:00
.gitignore chore: rename flowy_editor to appflowy_editor 2022-08-17 17:23:20 +08:00
.metadata chore: rename flowy_editor to appflowy_editor 2022-08-17 17:23:20 +08:00
analysis_options.yaml chore: rename flowy_editor to appflowy_editor 2022-08-17 17:23:20 +08:00
CHANGELOG.md feat: add openAI plugin 2023-01-10 10:14:52 +08:00
LICENSE chore: add LICENSE 2022-08-18 17:38:04 +08:00
pubspec.yaml feat: add openAI plugin 2023-01-10 10:14:52 +08:00
README.md feat: #1649 add document for importing data 2023-01-05 18:12:39 +08:00

AppFlowy Editor

A highly customizable rich-text editor for Flutter

DiscordTwitter

Key Features

  • 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
    • themes
    • menu options (coming soon!)
  • Test-coverage and ongoing maintenance by AppFlowy's core team and community of more than 1,000 builders

Getting Started

Add the AppFlowy editor Flutter package to your environment.

flutter pub add appflowy_editor
flutter pub get

Creating Your First Editor

Start by creating a new empty AppFlowyEditor object.

final editorState = EditorState.empty(); // an empty state
final editor = AppFlowyEditor(
    editorState: editorState,
);

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.

final json = ...;
final editorState = EditorState(Document.fromJson(data));
final editor = AppFlowyEditor(
    editorState: editorState,
);

Note: The parameters localizationsDelegates need to be assigned in MaterialApp widget

MaterialApp(
    localizationsDelegates: const [
        AppFlowyEditorLocalizations.delegate,
    ]
);

To get a sense of how the AppFlowy Editor works, run our example:

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

Customizing Your Editor

Customizing Components

Please refer to our documentation on customizing AppFlowy for a detailed discussion about customizing components.

Below are some examples of component customizations:

  • Checkbox Text demonstrates how to extend new styles based on existing rich text components
  • Image demonstrates how to extend a new node and render it
  • See further examples of rich-text plugins

Customizing Shortcut Events

Please refer to our documentation on customizing AppFlowy for a detailed discussion about customizing shortcut events.

Below are some examples of shortcut event customizations:

  • BIUS demonstrates 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? Check out 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 learn, inspire, and create. Any contributions you make are greatly appreciated.

Please look at CONTRIBUTING.md for details.

License

Distributed under the AGPLv3 License. See LICENSE for more information.