Presenting a new RichTextArea control


One of the frequently asked features for JavaFX is the availability of a rich text editor. JavaFX comes with a great and simple built-in TextArea control, which contains the greatest common divisor of what developers want. The JavaFX core modules are simple and generic on purpose, and they allow third parties to create more complex controls and tools.
One such component is a rich text editor. While there have been some successful contributions in the past, like Tomas Mikula’s RichTextFX control, Gluon is proud to present a new control created with Java and JavaFX standard APIs, called RichTextArea.

Based on the combination of VirtualFlow and multiple TextFlow controls, the RichTextArea control has features like:

– Any part of the content can be selected and can have any styling (all font attributes, foreground or background color, …). This can be changed at any time. Selection of caret navigation of words, lines or paragraphs and can be done via mouse and keyboard platform-standard keys (arrows and key modifiers).
– Any paragraph can be styled with text alignment, line separation, indentation, bulleted or numbered list.
– Has support for non-text nodes like images that can be added at any point, even via drag and drop
– Has support for event handling of hyperlinks and image custom actions
– Copy/cut/paste, unlimited undo and redo are supported.
– Save/open documents to persist and restore the content with its different styles.
– Inline table support
– … (and more to come)

On the inside, the control has being designed following the MVVM pattern. The data model, called the TextBuffer, is based on piece table implementation.

Within the piece table changes are represented by one or more pieces. A piece does not contain the text itself but points to one of two buffers: the original buffer with the fixed original text, and the additional buffer, that includes only the changes.
The actual text can be restored by walking through the pieces. Each piece contains text, image and paragraph decoration.
The model implements insert, append and delete text operations, a simplistic change listening, and an undo/redo mechanism based on abstract independent API (which is reused by the ViewModel too). Each operation is represented as a command, which stores the state and can be undone/redone.

The ViewModel, called RichTextAreaViewModel, is fully independent of the view. It operates with the model (TextBuffer) via Actions or internal methods, that use the built-in undo/redo manager.

Finally, the View, or the RichTextAreaSkin, is based on a ListView control: each paragraph uses a ListCell that has a single TextFlow control to render text, images and other nodes, and also the selection that can span different paragraphs. It also handles all usual events.

The RichTextArea control ultimately has some API to allow developers interact with documents, but mainly all interaction with the View/ViewModel is done via a set of actions.

The demo class

The following image shows one possible use of the RichTextControl, with a number of menus and toolbars that allow the user apply actions over selections or at the caret location.

Have a look at the sample code in the RichTextArea repository for more details.

License

One of the core principles at Gluon is that we want developers to be able to create great applications, without being hindered by large license fees. Therefore, the RichTextArea is available for free under the GPLv3 license. If you create Open Source application, you can use our software for free.
For our Gluon Mobile customers, we have great news, as the existing Gluon Mobile licenses cover the commercial usage of the RichTextArea starting today!

Moving JavaFX forward

The JavaFX platform, developed in the OpenJFX project, is a great piece of software and the foundation for many high-quality components. With the RichTextArea, the JavaFX ecosystem becomes even stronger. Work on this component is co-funded by Navielektro. The investment of Navielektro in the RichTextArea allowed the creation and first milestone of this important component. We highly welcome more interested companies and contributors to drive RichTextArea forward.