Lexical is an extensible text editor framework that provides excellent reliability, accessible and performance.
Lexical is a modern, extensible text editor framework that provides a set of tools and APIs to build rich text editors with ease. It is designed to be highly performant, flexible, and easy to integrate into various applications.
Basic Text Editing
This feature allows you to create a basic text editor instance and perform simple text editing operations such as appending text.
const { createEditor } = require('lexical');
const editor = createEditor();
editor.update(() => {
const root = editor.getRoot();
root.appendText('Hello, Lexical!');
});Custom Plugins
Lexical supports custom plugins to extend the editor's functionality. This example demonstrates how to create a custom plugin that logs the editor state changes.
const { createEditor, LexicalComposer } = require('lexical');
const MyCustomPlugin = () => {
return {
onChange(editorState) {
console.log('Editor state changed:', editorState);
}
};
};
const editor = createEditor({ plugins: [MyCustomPlugin] });Rich Text Formatting
This feature allows you to apply rich text formatting such as bold, italic, and underline to the text within the editor.
const { createEditor, $createParagraphNode, $createTextNode } = require('lexical');
const editor = createEditor();
editor.update(() => {
const root = editor.getRoot();
const paragraph = $createParagraphNode();
const text = $createTextNode('Bold Text');
text.toggleFormat('bold');
paragraph.append(text);
root.append(paragraph);
});Draft.js is a rich text editor framework for React. It provides a set of tools to build complex text editors with support for rich text formatting, custom blocks, and more. Compared to Lexical, Draft.js is more mature but may have a steeper learning curve and less flexibility in terms of customization.
Slate is another highly customizable framework for building rich text editors in React. It offers a more flexible and extensible architecture compared to Draft.js, allowing developers to define their own data models and editor behaviors. Slate is similar to Lexical in terms of flexibility but may require more boilerplate code to set up.
ProseMirror is a toolkit for building rich text editors with a focus on extensibility and performance. It provides a highly customizable schema system and a range of plugins to extend the editor's capabilities. ProseMirror is comparable to Lexical in terms of performance and extensibility but may have a more complex API.
lexical
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 allows developers to create unique text editing experiences that scale in size and functionality.
The core of Lexical is a dependency-free text editor engine that allows for powerful, simple and complex, editor implementations to be built on top. Lexical's engine provides three main parts:
By design, the core of Lexical tries to be as minimal as possible. Lexical doesn't directly concern itself with things that monolithic editors tend to do – such as UI components, toolbars or rich-text features and markdown. Instead the logic for those features can be included via a plugin interface and used as and when they're needed. This ensures great extensibility and keeps code-sizes to a minimal – ensuring apps only pay the cost for what they actually import.
For React apps, Lexical has tight integration with React 18+ via the optional @lexical/react package. This package provides
production-ready utility functions, helpers and React hooks that make it seemless to create text editors within React.
The lexical package contains only the core Lexical engine and nodes. This package is intended to be used in conjunction with packages that wire Lexical up to applications, such as @lexical/react.
This section covers how to use Lexical, independently of any framework or library. For those intending to use Lexical in their React applications,
it's advisable to check out the source-code for the hooks that are shipped in @lexical/react.
When you work with Lexical, you normally work with a single editor instance. An editor instance can be thought of as the one responsible for wiring up an EditorState with the DOM. The editor is also the place where you can register custom nodes, add listeners, and transforms.
An editor instance can be created from the lexical package and accepts an optional configuration object that allows for theming and other options:
import {createEditor} from 'lexical';
const config = {
namespace: 'MyEditor',
theme: {
...
},
};
const editor = createEditor(config);
Once you have an editor instance, when ready, you can associate the editor instance with a content editable <div> element in your document:
const contentEditableElement = document.getElementById('editor');
editor.setRootElement(contentEditableElement);
If you want to clear the editor instance from the element, you can pass null. Alternatively, you can switch to another element if need be,
just pass an alternative element reference to setRootElement().
With Lexical, the source of truth is not the DOM, but rather an underlying state model
that Lexical maintains and associates with an editor instance. You can get the latest
editor state from an editor by calling editor.getEditorState().
Editor states have two phases:
Editor states contain two core things:
Editor states are serializable to JSON, and the editor instance provides a useful method to deserialize stringified editor states.
const stringifiedEditorState = JSON.stringify(editor.getEditorState().toJSON());
const newEditorState = editor.parseEditorState(stringifiedEditorState);
There are a few ways to update an editor instance:
editor.update()editor.setEditorState()editor.registerNodeTransform()editor.registerCommand(EXAMPLE_COMMAND, () => {...}, priority)The most common way to update the editor is to use editor.update(). Calling this function
requires a function to be passed in that will provide access to mutate the underlying
editor state. When starting a fresh update, the current editor state is cloned and
used as the starting point. From a technical perspective, this means that Lexical leverages a technique
called double-buffering during updates. There's an editor state to represent what is current on
the screen, and another work-in-progress editor state that represents future changes.
Creating an update is typically an async process that allows Lexical to batch multiple updates together in
a single update – improving performance. When Lexical is ready to commit the update to
the DOM, the underlying mutations and changes in the update will form a new immutable
editor state. Calling editor.getEditorState() will then return the latest editor state
based on the changes from the update.
Here's an example of how you can update an editor instance:
import {$getRoot, $getSelection} from 'lexical';
import {$createParagraphNode} from 'lexical/PargraphNode';
// Inside the `editor.update` you can use special $ prefixed helper functions.
// These functions cannot be used outside the closure, and will error if you try.
// (If you're familiar with React, you can imagine these to be a bit like using a hook
// outside of a React function component).
editor.update(() => {
// Get the RootNode from the EditorState
const root = $getRoot();
// Get the selection from the EditorState
const selection = $getSelection();
// Create a new ParagraphNode
const paragraphNode = $createParagraphNode();
// Create a new TextNode
const textNode = $createTextNode('Hello world');
// Append the text node to the paragraph
paragraphNode.append(textNode);
// Finally, append the paragraph to the root
root.append(paragraphNode);
});
If you want to know when the editor updates so you can react to the changes, you can add an update listener to the editor, as shown below:
editor.registerUpdateListener(({editorState}) => {
// The latest EditorState can be found as `editorState`.
// To read the contents of the EditorState, use the following API:
editorState.read(() => {
// Just like editor.update(), .read() expects a closure where you can use
// the $ prefixed helper functions.
});
});
v0.17.1 (2024-08-26)
FAQs
Lexical is an extensible text editor framework that provides excellent reliability, accessible and performance.
The npm package lexical receives a total of 360,510 weekly downloads. As such, lexical popularity was classified as popular.
We found that lexical demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.