Visual Editor is a Rich Text editor for Flutter originally forked from Flutter Quill. The editor is built around the powerful Quilljs Delta document format originally developed by QuillJs. Delta documents can be easily converted to JSON, the encoding is easy to read and modify and offers many extensibility options.

Why Fork Flutter Quill?

While building the Visual Space platform we begun using Flutter Quill to render text content for nextgen interactive tutorials and projects. Initially we attempted to extend Quill with additional features such as custom highlights. However, we had to deal with major issues such as opaque architecture, severe lack of documentation, lack of automatic testing and a complete lack of technical support from the maintainers. Therefore, we decided to fork Quill and improve it with additional features and a focus on higher quality standards. This reddit post contains a detailed explanation.

Major Improvements Compared To Quill

Check out the changelog for a detailed review of what was changed. Also there's a migration guide for users migrating from Quill.

• Maintainable Architecture - Source code was split in modules. Files were split in smaller files. A distinct state management layer was introduced. Class names have been simplified. We replaced the ChangedNotifiers with standalone streams. We simplified the build() methods. We merged the Editor and RawEditor in one file.
• Extended Documentation - We are continuously adding in depth documentation to make it easier for new contributors to extend the source code. Quill has very little documentation and it lacks in depth explanation over the architecture. Our goal is to cover both new features and the legacy ones in detailed documentation.
• Demo Pages - We've provided simple, concise demo pages to exemplify how to use Visual Editor for the various tasks you have.
• Automatic Testing - In Quill there's no automatic testing available. New contributions constantly break the legacy code. The PR's are not policed enough. We started by adding tests and we are slowly increasing the coverage of the tests.
• Custom Highlights - Highlights custom regions of text that are sensitive to taps and hovering.
• Custom Markers - Same as highlights but instead of being temporary in the controller they are permanent in the document.
• Markers Attachments - Markers provide support for attachments by returning their pixel coordinates and dimensions for positioning in text. Based on this information any widget can be linked to a marker.
• Active Discord Support Community - You'll be able to get quick answers from the maintainers of the repo. We are available almost at all times to answer your questions. Including general Flutter and Dart questions.

How To Start

Unstable Code, Under Refactoring

The current version is not stable enough to be reliable and to be published in pub.dev. Until then you can try it out by linking directly from Github:

pubspec.yaml

dependencies:
  visual_editor:
    git: https://github.com/visual-space/visual-editor.git

Minimal example

Make sure you don't overwrite the EditorController via setState(), otherwise you will lose the contents of the history. Which means no more undo, redo with the previous states. In general avoid using setState() to update the document. There are methods available in the EditorController for such tasks.

final _controller = EditorController.basic();

Column(
  children: [
    EditorToolbar.basic(
      controller: _controller,
    ),
    Expanded(
      child: Container(
        child: VisualEditor.basic(
          controller: _controller,
        ),
      ),
    )
  ],
)

Saving a document

final json = jsonEncode(_controller.document.toDelta().toJson());

Retrieving a document

const blogPost = jsonDecode(response);

final _controller = EditorController(
  document: DocumentM.fromJson(blogPost)
);

Empty document

When a document is empty a custom placeholder should be insert. An empty document looks like:

[
  {
    "insert":"\n"
  }
] 

For convenience you can use a constant: const EMPTY_DELTA_DOC_JSON = '[{"insert":"\\n"}]'

Delta or plain text

Visual Editor uses [Delta] objects as an internal data format to describe the attributes of each fragment of text.

_controller.document.toDelta(); // Extract the deltas
_controller.document.toPlainText(); // Extract plain text

Youtube Subscribe to our Visual Coding Youtube channel to learn the skills needed to use and extend Visual Editor. Our episodes go in many topics including Flutter and production ready Software Architecture.

Discord Join us on Visual Editor Discord to get live advice from the maintainers and core users. Our goal is to create a friendly and active support community that shares help and resources.

Demos & Code Samples

In this repository you can also find a demo app with various pages that showcase all sorts of configurations for the editor. One particularly useful page is the "Delta Sandbox" page. In this page you can see side by side a live editor and a json preview panel. This demo will help you to quickly learn how the Delta format works.

• You can start the demo app by running main.dart in Android Studio.
• Soon we will have a website with the same demo pages so you don't have to run the samples locally.

Documentation

Learn more about Visual Editor architecture and how to use the features.

• Editor (WIP) - Renders the document content as commanded by the EditorController.
• Editor Controller (WIP) - Controls the editor, sync the toolbar, exposes useful callbacks.
• Documents (WIP) - Delta documents are used to store text edits and styling attributes.
• Toolbar (WIP) - Displays buttons used to edit the styling of the text.
• Blocks (WIP) - Documents templates are composed of lines of text and blocks of text.
• Embeds (WIP) - Visual Editor can display any custom component inside of the documents.
• Cursor (WIP) - Indicates the position where new characters will be inserted.
• Inputs (WIP) - Hardware Keyboard and Software keyboard.
• Rules (WIP) - Rules execute behavior when certain condition are met.
• Selection (WIP) - Handles the rendering of text selection handles and toolbar.
• Highlights - Renders temporary text markers sensitive to taps.
• Markers - Renders permanent text markers sensitive to taps as part of the delta document.
• Performance - Basic tips to follow in order to maintain the editor's performance.
• Migration - A simple guide with instructions to migrate from Flutter Quill.
• Changelog - Journal of changes made to the visual editor.

For Contributors:

• State Store - Explains the state store architecture and how to extend it.
• Project Structure (WIP) - How the codebase is structured and split in modules.
• Guidelines - Coding guidelines for improving code quality and architecture clarity.

Who is using Visual Editor?

• Visual Space - Next generation interactive tutorials and projects

Send us a message on Visual Editor Discord if you want your app to be listed here.

Useful Resources

QuillJs Delta • Designing The Delta Format • Language Tool • Language Server Protocol • Word Processing Terminology 1 • Word Processing Terminology 2 • Flutter custom selection toolbar