Rich text editor for Flutter based on Delta format (Quill fork)

Last update: May 24, 2022

Visual Editor

Visual Editor is a Rich Text editor for Flutter originally forked from Flutter Quill. The editor is built around the powerful 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.

Our core motivation to fork Quill was the severe lack of documentation and testing plus a lack of support from the maintainers when it comes to receiving technical support. Considering that we plan to release many more open source Flutter widgets, starting with the rich text editor was a no brainer.

Planned Features

  • Improved, easy to digest architecture
  • Full docs
  • Full test coverage
  • Highlights
  • Code Samples
  • Tables
  • Nested bullets
  • Layouts
  • Styled blocks
  • Color coding for source code
  • Themes
  • Search
  • Bug fixes

Visual Coding - Tutorials about Visual Editor and software architecture

FlutterQuill - The Original repo that we forked

How To Start

Minimal example, toolbar and editor with a shared controller:

QuillController _controller = QuillController.basic();
Column(
  children: [
    QuillToolbar.basic(controller: _controller),
    Expanded(
      child: Container(
        child: QuillEditor.basic(
          controller: _controller,
          readOnly: false,
        ),
      ),
    )
  ],
)

Input / Output

This library uses Quill as an internal data format.

  • _controller.document.toDelta() - Extract the deltas.
  • _controller.document.toPlainText() - Extract plain text.

Saving a document as JSON

Saving a document

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

Retrieving a document

const blogPost = jsonDecode(response);

_controller = QuillController(
  document: Document.fromJson(blogPost),
  selection: TextSelection.collapsed(offset: 0)
);

This readme will be expanded with detailed instruction on how to use Visual Editor. Currently we are ongoing a deep cleanup effort.

GitHub

https://github.com/visual-space/visual-editor
Comments
  • 1. React to package name change. Fixes example.

    When building the example, i get this error:

    Error on line 1, column 7 of ..\pubspec.yaml: "name" field doesn't match expected name "flutter_quill".

    This PR solves the problem.

    Reviewed by xclud at 2022-05-20 19:30
  • 2. RawEditorState does not implement TextInputClient.

    TextInputClient has two methods which are not implemented by RawEditorState .

    void insertTextPlaceholder(Size size);
    
    void removeTextPlaceholder();
    

    I guess they are new in Flutter 3.0.

    #25

    Reviewed by xclud at 2022-05-20 20:26
  • 3. Bump to Flutter 3.0

    We need to upgrade the codebase to support Flutter 3.0. I'm currently researching what needs changing. Also got several fixes to make before tackling this one. Unless there is huge demand for 3.0 I'm not in an imediate hurry.

    Reviewed by visual-space at 2022-05-20 20:04
  • 4. Opacity for text, for presentational reasons

    This is a rather unusual feature for your typical text editor since there's little need for it. It wasn't present in Flutter Quill neither in other editors such as Super Editor. However I plan to use this feature in the Visual Space app to be able to construct text layouts and visual compositions that need to blend text and color together. Having control over the opacity of the text will be a major feature that enables more expressive and creative layouts.

    Since Flutter uses the Skia rendering engine and gives full control over the canvas It's possible to go really crazy on the effects (fire on text, blurred text, scratch to see the answer, etc). I plan to implement many of these effects beginning of next year.

    Join us on discord to get implementation advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter software architecture advice.

    Reviewed by adrian-moisa at 2022-05-20 11:08
  • 5. [Web] Currently there is no web player default embed

    I'm not entirely sure why this was not implemented in Flutter Quill already. I do need this feature for my own Visual Space project so I'll be researching for ideas to make it work. If you got any insight to share please write a reply here. Cheers.

    I've also fixed an issue where due to missing embeds the sample page was dying horribly. Thus nobody could run the demo in the browser. The error was really difficult to spot since it was flushed away by a really verbose log.

    Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

    Reviewed by adrian-moisa at 2022-05-20 11:06
  • 6. [Web] Cursor pointer on link hover

    Currently the cursor pointer shows only in edit mode when pressing the meta key. In read only mode the pointer arrow is not visible. Also the link should change colors on hover similar to a web link. However this is rather convoluted due to some technical limitations.

    Currently flutter does not provide a HoverGestureRegonizer for text. Therefore it's rather difficult to make the link hover work A request to add this feature in Flutter was made a while ago.

    The link hover pointer is also not working, though the code looks like it should be working. It works only in edit mode when presing the meta key on Mac. Hover on links does not work even if the behaviour seems to be defined. You can click on it but the pointer does not work.

    recognizer: isLink && canLaunchLinks ? _getRecognizer(node) : null,
    mouseCursor: isLink && canLaunchLinks ? SystemMouseCursors.click : null,
    

    First I attempted adding a WidgetSpan in the SpanText of the TextLine. However this is not a workable solution. Although it does the job of detecting hover events, the selection no longer works as expected. The whole link gets selected because now it works as an embed.

    I think the current best solution is to proceed as in the case of detecting hover for the highlights, by analysing where the pointer lands in the text selection using quills internal utils. This approach keeps the delta document and line rendering code intact while alos adding hovering detection capabilities. Currently I'm working to implement this properly for highlights. I'm still facing an issue there. Once ready I will use the same code to solve this issue as well.

    More info https://github.com/flutter/flutter/issues/81159 https://stackoverflow.com/questions/43583411/how-to-create-a-hyperlink-in-flutter-widget

    Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

    Reviewed by adrian-moisa at 2022-05-20 11:03
  • 7. Highlights blinking modes

    Currently the highlights are static. However I'm considering adding a few states of blinking animations to enable the author to capture the user attention to a particular area of text. For sure I will want to develop this feature since I need it for Visual Space to be able to render interactive coding tutorials.

    Flutter Quill already has an easing animation for the caret. I've researched how it's done and I think I'll be applying the same technique there as well. Maybe I can isolate it in an util to be used in many other places of the codebase.

    Join on discord to get advice and help or follow us on YouTube Visual Coding to learn more about the architecture of Visual Editor and other Flutter apps.

    Reviewed by adrian-moisa at 2022-05-20 10:58

Related

An Instagram like text editor Flutter widget that helps you to change your text style.
An Instagram like text editor Flutter widget that helps you to change your text style.

TextEditor An instagram like text editor widget for flutter Show some ❤️ and star the repo to support the project Features Edit TextStyle object font

Apr 30, 2022
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)
WYSIWYG editor for Flutter with a rich set of supported formatting options. (WIP)

✨ rich_editor WYSIWYG editor for Flutter with a rich set of supported formatting options. Based on https://github.com/dankito/RichTextEditor, but for

Mar 9, 2022
Json editor - A json editor on flutter
Json editor - A json editor on flutter

Features Support add comment; Support show errors for invalid json text; Pretty

May 24, 2022
Masked text field - A flutter package for masked text field for formet your text and good UI
Masked text field - A flutter package for masked text field for formet your text and good UI

Masked Text Field Masked Text Field Features A package for masked text field for

Feb 22, 2022
A fork/modification of flutter epub view package
A fork/modification of flutter epub view package

epub_view Pure flutter widget for view EPUB documents on all platforms. Based on epub package. Render with flutter widgets (not native view) on any pl

Dec 28, 2021
Cross-platform flutter plugin for reading and writing NFC tags. Not maintained anymore - not looking for new maintainer, fork instead.
Cross-platform flutter plugin for reading and writing NFC tags. Not maintained anymore - not looking for new maintainer, fork instead.

nfc_in_flutter NFC in Flutter is a plugin for reading and writing NFC tags in Flutter. It works on both Android and iOS with a simple stream interface

Apr 29, 2022
Fluttersettingsui - Fork of settingsui. Create native settings for Flutter app in a minutes.
Fluttersettingsui - Fork of settingsui. Create native settings for Flutter app in a minutes.

Settings UI for Flutter Installing: In your pubspec.yaml dependencies: flutter_settings_ui: ^1.0.1 import 'package:flutter_settings_ui/flutter_setti

May 16, 2022
A text field that displays text on different languages based on your selection.

translatable_text_field A text field that displays text on different languages based on your selection. Its basic idea is that you place this fields i

Mar 13, 2022
📝 Simple text editor/notepad with cloud sync.

txt Simple text editor/notepad with cloud sync. Build Install dependencies: flutter pub get Build: flutter build apk, flutter build ios etc. ToDo's Ad

May 6, 2022
A Flutter based code editor
A Flutter based code editor

rich_code_editor A simple package that supports creating code editors in Flutter. Flutter version supported: Flutter 1.22.5 Getting Started There are

May 11, 2022
The Flutter app demonstrates displaying data in a weekly format.
The Flutter app demonstrates displaying data in a weekly format.

Flutter weekly chart The Flutter app demonstrates displaying data in a weekly format. I came across this kind of screen in the app that I have been wo

Apr 15, 2022
A simple and customizable flutter package for inputting phone number in intl / international format uses Google's libphonenumber
A simple and customizable flutter package for inputting phone number in intl / international format uses Google's libphonenumber

Intl Phone Number Input A simple and customizable flutter package for inputting phone number in intl / international format uses Google's libphonenumb

Apr 3, 2022
Flutter Currency Format Converter Library

Save your time on a little logic converting a currency from integer to string or string to integer. if you intrested to contribute to our little proje

Dec 7, 2021
MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying the output format in realtime.
MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying the output format in realtime.

MoneyTextFormField MoneyTextFormField is one of the flutter widget packages that can be used to input values in the form of currencies, by displaying

Feb 7, 2022
A Flutter App To Download Videos From YouTube In Mp3 Format
A Flutter App To Download Videos From YouTube In Mp3 Format

Flutter_YouTube_MP3 App A Simple app To Download mp3 Videos From YouTube ❤️ Found this project useful? If you found this project useful, then please c

May 17, 2022
Jan 29, 2022
A simple dart package to convert large numbers to a human readable format. 1278 to 1.2K instead, for example.

A simple dart package to convert large numbers to a human readable format. 1278 to 1.2K instead, for example. Features Represents large numbers in ter

Mar 22, 2022
Grad text package - A Flutter Widget to draw gradients into text
Grad text package - A Flutter Widget to draw gradients into text

grad_text A Flutter Widget to draw gradients into text.(Null safe) Demo Install

Jan 31, 2022