FORMATUS

A plain Flutter Rich-Text-Editor without any dependencies.

Features

  • Runs on all platforms
  • Supports multiple section and inline formats
  • Easy integration into TextField and TextFormField
  • Small and easy to use
  • No dependencies to other packages
  • Includes a viewer for the formatted text

Getting started

Add the latest version of Formatus to the pubspec.yaml file:

flutter:
  formatus: ^2.0.1

Create a FormatusController and a FormatusBar. Supply a FocusNode to both the FormatusBar and the TextField or TextFormField.

Usage

Use Formatus like this:

  FocusNode focusNode = FocusNode(debugLabel: 'formatus');
  late FormatusController controller;
  String savedText = '';

void initState() {
  controller = FormatusController( formattedText: savedText,
      onChanged: (v) => setState(() => savedText = v ),);
}

Widget build(BuildContext context) => Column( children: [
  FormatusBar(
    controller: controller,
    textFieldFocus: _formatusFocus,
  ),
  TextFormField(
    controller: controller,
    focusNode: _formatusFocus,
    minLines: 3,
    maxLines: 10 ),
  ]);

//--- Don't forget the standard dispose of the controller
void dispose() {
  controller.dispose();
}

Supported Formats

  • H1 → Header 1 with largest font size
  • H2 → Header 2 with larger font size
  • H3 → Header 3 with large font size
  • P → Paragraph with standard font size
  • OL → Ordered list
  • UL → Unordered list
  • B → bold text
  • I → italicized text
  • U → underlined text
  • S → strike-through text
  • sub → subscript text
  • sup → superscript text
  • color → text coloring

🔗 Project Links

Known Deficiencies

  1. Horizontal ruler not yet implemented
  2. Coloring is restricted to 19 included colors
  3. Line-breaks in pasted text are replaced by spaces
  4. Lists cannot be nested
  5. Subscript and superscript are displayed correctly only in FormatusViewer because Flutter TextField and TextFormField do not support them

User Manual

Definition of Terms

Caret : visible display of the cursor position

Format : All text has a format. Its format is specified by the section format and all inline formats applied to the text

Section : All text belongs to a section. Each section has a format. Multiple sections are separated by a newline

Use cases

This section describes the use cases for Formatus.

  • Position caret → updates FormatusBar with formats at caret position
  • Select a text range → updates FormatusBar with formats from selection start
  • Activate another section-format in FormatusBar → the current section (defined by caret position or start of a selected text-range) will be changed to the activated section-format
  • Change an inline-format in FormatusBar → if a text range is selected then the selected text will be updated with the new format
  • Enter characters (via keyboard or by pasting from a clipboard) → characters will be inserted at caret position. Current format settings will be applied
  • Delete characters → if this includes one or more (requires a text-range) line-breaks then the text right of the deleted text will be integrated into the top-level node at deletion start
  • Display the formatted text with FormatusViewer

Future Enhancements

  1. Add format for unordered list
  2. Add format for ordered list (auto-counting)
  3. Add anchor with editable reference and displayed text
  4. Add action to insert an emoji. This should become an optional add-on action similar to FormatusAnchor. Could also include converting an emoji name into emoji inline (insert into current text node).
  5. Implement a FormatusHistoryController which supports formats and color
  6. Parse markdown as formatted input
  7. Export formatted text in markdown format

For an additional enhancement-request please open an issue.

Additional information

Please find additional information like architecture considerations at https://www.djarjo.com/formatus

If you encounter any issues or have ideas for some enhancements please open a ticket at https://github.com/hlemcke/formatus

Libraries

formatus