Few days ago news broke that Facebook has open sourced the Lexical library JavaScript, which provides components for creating advanced text editing web forms and text editors for websites and web applications.
In essence, Lexical is a text editing engine, a plataform to create feature-rich web editors. At the same time, we believe that users shouldn't have to rewrite the same rich text functionality over and over again with each implementation. Lexical exposes a set of individual modular packages that can be used to add common features like lists, links, and tables.
The distinctive qualities of the library are the ease of integration into sites, compact design, modularity and support for tools for people with disabilities, such as screen readers.
Lexical is an extensible JavaScript web text editor framework with an emphasis on reliability, accessibility, and performance. Lexical aims to provide a best-in-class developer experience, so you can easily prototype and build features with confidence. Combined with a highly extensible architecture, Lexical enables developers to create unique text editing experiences that scale in size and functionality.
About Lexical
The library is designed to be easy to connect and does not depend on external web frameworks, but it provides out-of-the-box bindings for easy integration with the React framework.
To use Lexical, you simply bind an instance of the editor to the element being edited, after which, during the editing process, you can control the state of the editor through command and event processing. The library allows the user to be able to keep track of the states of the editor at any time and reflect the changes in the DOM based on the calculation of the differences between the states.
You can create forms for entering plain text without markup, as well as create interfaces for visual document editing that resemble word processors and provide features such as inserting tables, images, and lists, manipulating fonts, and controlling text alignment.
The developer has the ability to override the behavior of the editor or connect controllers to implement atypical functionality.
Of the features that stand out from Lexical, the following are mentioned:
- Lexical is made up of editor instances that are attached to a single editable element of content. A set of editor states represents the current and pending states of the editor at a given time.
- Lexical is designed for everyone. It follows the best practices established in WCAG and is compatible with screen readers and other assistive technologies.
- Lexical is minimal. It does not directly address user interface components, toolbars, or rich text features and markdowns. The logic for these functions can be included via a plugin interface
The basic framework of the library contains the minimum required set of components, whose functionality is extended through the connection of plugins. For example, through plugins, you can connect additional interface elements, panels, tools for visual editing in WYSIWYG mode, support for the Markdown format, or components for working with certain types of content, such as lists and tables.
In the form of plugins, features such as autocomplete input, limit the maximum size of input data, open and save files, attach notes/comments, voice input, etc. are also available.
Finally it is worth mentioning that currently Lexical is currently under development early and the APIs and packages are likely to change quite frequently. The code is written in JavaScript and is distributed under the MIT license.
Several demonstrations have been prepared interactive to become familiar with the possibilities of the library and you can consult one of thems in the following link.
If you want to know more about it, you can consult the details in the following link.