DOCSEARCHbyAlgolia
Submit Docs

Lexical Text Editor Framework

website·Indexed 35 days ago

https://lexical.dev

An extensible JavaScript web text-editor framework. It provides a set of abstractions for React 18+ and 19, including plugins like LexicalPlainTextPlugin and LexicalRichTextPlugin, as well as specialized packages for tables, history, Yjs collaborative editing, and selection. The framework supports HTML serialization via LexicalNode.exportDOM() and LexicalNode.importDOM(), and offers experimental DOMRenderExtension and DOMImportExtension APIs for custom DOM rendering and imports.

Tokens
191.6K
Snippets
1.1K
Records
1.6K
Agent score
73%

What's inside Lexical

  1. Overview of DOMRenderExtension

    The DOMRenderExtension (introduced in Lexical v0.44.0) provides a middleware-based API to override how Lexical nodes are rendered to the DOM during reconciliation (create/update/decorate cycle) and how they are serialized to HTML for clipboard exports and $generateHtmlFromNodes. A single override can affect both the in-editor render path and the export path. This is an @experimental API and may change between releases.

  3. Overview of the lexical-clipboard package

    The lexical-clipboard package provides the necessary functionality to implement and manage clipboard features (such as copying, cutting, and pasting) within a Lexical editor instance.

  4. Overview of Lexical Named Slots

    Named slots are an experimental feature that allows a single host node (an ElementNode or DecoratorNode) to contain several isolated editable regions addressed by name (e.g., a Card with a title slot).

    Key characteristics include:

    • Isolation: Each slot acts as a virtual shadow root. Carets and formatting do not merge across slot boundaries, and Cmd+A is scoped to the slot, not the whole document.
    • Single Tree: Unlike nested editors, named slots exist within the same EditorState, simplifying history and collaboration.
    • Structural Boundary: getParent() stops at the slot boundary; to reach the host, you must use $getSlotHost().
    • DOM Representation: Each slot renders into a hidden <div data-lexical-slot="<name>"> container by default until the host explicitly attaches it during rendering.

  6. Overview of Lexical Extensions

    Lexical Extensions provide a modular, framework-independent convention for adding configuration and behavior to a Lexical editor. Unlike the legacy React plug-in scheme, extensions encapsulate all dependent configuration, registration, and dependencies in a single place. This eliminates the need to manually manage the two-phase setup process (configuration before editor construction and registration after construction) and ensures that features are registered exactly once, reducing runtime errors and debugging complexity.

  7. Overview of Lexical NodeCaret API

    The NodeCaret API provides a unified way to represent and traverse specific points in the document tree. A caret is defined by an origin node, a direction (next or previous), and a type (pointing towards a sibling or a child).

    Key characteristics:

    • Immutable: Carets do not automatically update when the document changes. Methods that modify the document structure will return a new caret.
    • Directional: The D type parameter ensures next and previous carets are not mixed.
    • Target-Oriented: Caret methods operate on the node attached to the origin in the designated direction, not the origin node itself.

  8. Overview of @lexical/mdast

    The @lexical/mdast package is an experimental alternative to @lexical/markdown. It delegates Markdown parsing and serialization to micromark and mdast-util-*, ensuring CommonMark and GFM compliance. Unlike regex-based parsers, it uses the same parser for both initial import and real-time typing shortcuts. It preserves the original syntax of constructs (e.g., specific bullet characters or code block fences) to ensure minimally different round-trip serialization.

  9. Overview of @lexical/mdast

    @lexical/mdast is an experimental alternative to @lexical/markdown. Unlike the latter, which uses regular expressions, @lexical/mdast delegates parsing and serialization to the micromark/mdast ecosystem. This ensures CommonMark and GFM compliance and allows a single shared grammar for both importing Markdown and handling real-time typing shortcuts. The trade-off is a larger bundle size (approximately 26 kB min+gzip increase).

  10. Overview of Lexical NodeState API

    The NodeState API allows arbitrary state to be added ad-hoc to any node. This state automatically participates in reconciliation, history, and JSON serialization. It is particularly useful for adding document-level metadata to the RootNode or adding data to nodes without the boilerplate of overriding constructor, updateFromJSON, and exportJSON in custom node subclasses.

  11. Overview of lexical-code-shiki

    The lexical-code-shiki package provides a code highlighter for the Lexical editor powered by the Shiki (shikijs) engine, enabling high-quality syntax highlighting within code blocks.

  12. Overview of the Lexical text editor framework

    Lexical is a lightweight, lean text editor framework that uses a modular package system to add features such as lists, links, and tables. It is designed to be fast and minimal, decoupling the core editor logic from UI components, toolbars, and rich-text features, which are instead implemented via a plugin interface. Lexical follows WCAG best practices to ensure compatibility with screen readers and other assistive technologies.