Design and Architecture of a High‑Performance Extensible Rich Text Editor for Flutter

Xianyu, a second‑hand trading platform, requires sellers to publish high‑quality product descriptions. Flutter lacks a built‑in rich‑text editor, offering only a basic TextField . To meet complex needs such as custom emojis, themes, ordered paragraphs, and native‑level interaction, a high‑performance, extensible rich‑text editor was designed for Flutter.

Overall architecture is divided into four layers from bottom to top:

Protocol layer – defines models, selection description, command handling, and validation (Normalizing).

Capability extension layer – provides plugins (e.g., plain‑text conversion, undo/redo) and allows business‑specific extensions.

Rendering layer – converts the rich‑text model to Flutter widgets, handles cursor, selection, toolbar, and gestures.

Business extension layer – offers flexible custom nodes, plugins, and Normalizing rules for emojis, themes, paragraphs, syntax highlighting, etc.

The team evaluated open‑source editors (CKEditor, Quill, ProseMirror, Draft, Slate) and chose Slate as the protocol because plugins are first‑class citizens, it uses a DOM‑like data model, has clear command design, and offers strong test coverage.

Slate defines three node types:

Editor : the root node containing the whole document.

Element : a container node with semantic meaning; can be a Block (independent paragraph), Inline (nested inside another element), or Void (non‑editable, e.g., mentions, images, videos).

Text : leaf node that holds the actual text and custom rendering attributes stored in a properties object.

The abstract interface of Editor is defined as:

Element

Operations are the atomic actions that modify the model. Slate abstracts nine basic operations:

insert_node

insert_text

merge_node

move_node

remove_node

remove_text

set_node

set_selection

split_node

For example, a “bold selected text” command is decomposed into three operations: split_node (split the Text node into three parts), set_selection (update the cursor range), and set_node (add a bold attribute to the target Text node’s properties ).

After each command, the editor invokes normalizeNode to enforce structural correctness. Slate’s built‑in Normalizing rules can be extended with custom rules to implement features such as custom themes.

In practice, the Mural editor has been deployed in Xianyu’s product publishing, detail, and messaging pages, supporting custom emojis, themes, and other business capabilities, significantly improving user experience.