Lexical Text Editor Framework

repository·main·Indexed 12 days ago

https://github.com/facebook/lexical

An extensible text editor framework designed for reliability, accessibility, and performance. Lexical features an immutable state model and a plugin-based architecture that works across different UI frameworks. Version 0.49.0 includes support for rich-text import pipelines, a spec-compliant CommonMark + GFM implementation via @lexical/mdast, and capabilities for implementing editors as form-associated Web Components using Shadow DOM.

Tokens
126.3K
Snippets
323
Records
508
Agent score
97%

What's inside Lexical

  1. Overview of the React Table Extension setup

    main

    The React Table Extension example demonstrates a Lexical editor configuration that includes a table plugin. The setup utilizes the following Lexical features:

    • Rich Text Configuration: Uses @lexical/rich-text for advanced text formatting.
    • History: Uses @lexical/history to enable undo/redo capabilities.
    • Accessibility: Uses @lexical/dragon to provide accessibility features.
    • Table Support: Implemented via a Lexical Extension to manage table structures within the editor.
  2. Overview of the Website Rich Input configuration

    main

    This example demonstrates a production-ready Lexical setup using a rich text configuration. It integrates several core Lexical packages and plugins to provide a feature-complete editor experience:

    • Rich Text: Uses @lexical/rich-text for advanced text formatting.
    • History: Uses @lexical/history to enable undo and redo functionality.
    • Hashtags: Uses @lexical/hashtag to support hashtag detection and functionality.
    • Custom Plugins: Includes a custom character counter plugin implementation.

    You can view the live implementation at https://lexical.dev/.

  3. Overview of @lexical/code-core

    main

    The @lexical/code-core package provides the foundational functionality for code blocks and code highlighting within Lexical.

    Note on usage: This package is currently considered an implementation detail and is being used transitionally. It is intended to eventually replace the deprecated highlighting functionality found in @lexical/code.

  4. Overview of @lexical/a11y accessibility helpers

    main

    The @lexical/a11y package provides framework-agnostic accessibility (a11y) helpers designed for use with Lexical editors. These primitives allow you to manage complex accessibility patterns such as ARIA live regions, focus management, roving tab index, and focus traps.

    Because these helpers are framework-agnostic, they can be used in vanilla DOM environments or with frameworks like Svelte, Vue, or Solid. If you are using React, you should instead use the React-specific wrappers provided by @lexical/react which are built upon these same primitives.

  5. Features of the Website Notion example

    main

    The Website Notion example demonstrates a complex Lexical configuration using several key packages and plugins to replicate a Notion-like experience:

    • Rich Text Configuration: Uses @lexical/rich-text for advanced text formatting.
    • History Support: Uses @lexical/history to enable undo/redo functionality.
    • Draggable Blocks: Implements draggable blocks with a menu using the experimental LexicalDraggableBlockPlugin from @lexical/react.
    • Slash Commands: Implements slash commands with a floating menu using the LexicalTypeaheadMenuPlugin from @lexical/react.
  6. Configure a basic React Plain Text Lexical editor

    main

    This example demonstrates the simplest Lexical setup using the @lexical/plain-text configuration. It integrates the following features:

    • Plain Text Editing: Uses @lexical/plain-text for a text-only editor experience.
    • History Support: Uses @lexical/history to enable undo and redo functionality.
    • Accessibility: Uses @lexical/dragon to provide accessibility features.
  7. Use @lexical/plain-text for basic text editing

    main

    The @lexical/plain-text package serves as a foundational starting point for Lexical editors that do not require rich-text features. It automatically registers listeners for a standard set of basic commands to enable essential text-editing behaviors, including:

    • Entering text
    • Deleting characters
    • Copy and paste operations
    • Selection changes via arrow keys

    Use this package when you need a functional text editor without the overhead of rich-text capabilities. If your requirements evolve to include headings, blockquotes, or formatted text, you should migrate to @lexical/rich-text instead.

  8. Use @lexical/mdast for Markdown serialization

    main

    The @lexical/mdast package is an experimental alternative to @lexical/markdown. It is built on the micromark and mdast ecosystem, providing CommonMark and GFM (GitHub Flavored Markdown) compliance. Unlike the regex-based @lexical/markdown, @lexical/mdast uses a shared grammar for both document parsing and typing shortcuts, ensuring consistency.

    Warning: Experimental API @lexical/mdast is marked @experimental and may undergo breaking changes in any release. For production applications requiring a stable API, use @lexical/markdown instead.

    import {
      $convertFromMarkdownString,
      $convertToMarkdownString,
      MdastCommonMarkExtension,
      MdastExtension,
      MdastGfmExtension,
      MdastShortcutsExtension,
    } from '@lexical/mdast';
    import {buildEditorFromExtensions} from '@lexical/extension';
    import {defineExtension} from 'lexical';
    
    const editor = buildEditorFromExtensions(
      defineExtension({
        dependencies: [
          MdastCommonMarkExtension,
          MdastGfmExtension,
          MdastExtension,
          MdastShortcutsExtension,
        ],
        name: '[root]',
      }),
    );
    
    editor.update(() => $convertFromMarkdownString('# Hello *world*'));
    const markdown = editor.read(() => $convertToMarkdownString());
  9. Use @lexical/clipboard for clipboard functionality

    main
    The @lexical/clipboard package provides the core functionality required to handle clipboard operations (copy, paste, cut) within a Lexical editor instance. It allows the editor to interact with the system clipboard while maintaining the integrity of the editor's internal state and data formats.