React Plugins

Plugins extend Lexical editors with additional functionality. All plugins are React components that return null and use hooks to register functionality with the editor.

Core Plugins

RichTextPlugin

Enables rich text editing capabilities including formatting, headings, quotes, and more.

import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
import { ContentEditable } from '@lexical/react/LexicalContentEditable';
import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';

<RichTextPlugin
  contentEditable={<ContentEditable />}
  placeholder={<div>Enter some text...</div>}
  ErrorBoundary={LexicalErrorBoundary}
/>

contentEditable

JSX.Element

required

The ContentEditable component where users type.

placeholder

JSX.Element | ((isEditable: boolean) => JSX.Element | null) | null

Placeholder content shown when the editor is empty. Deprecated: Use the placeholder prop on ContentEditable instead.

ErrorBoundary

ErrorBoundaryType

required

Error boundary component to catch and handle decorator errors.

PlainTextPlugin

Enables plain text editing without rich text features.

import { PlainTextPlugin } from '@lexical/react/LexicalPlainTextPlugin';

<PlainTextPlugin
  contentEditable={<ContentEditable />}
  placeholder={<div>Enter text...</div>}
  ErrorBoundary={LexicalErrorBoundary}
/>

contentEditable

JSX.Element

required

The ContentEditable component.

placeholder

JSX.Element | ((isEditable: boolean) => JSX.Element | null) | null

Placeholder content. Deprecated: Use ContentEditable placeholder instead.

ErrorBoundary

ErrorBoundaryType

required

Error boundary component.

History and State

HistoryPlugin

Enables undo/redo functionality.

import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';

<HistoryPlugin delay={1000} />

delay

number

Delay in milliseconds before creating a new history entry. Default is 1000ms.

externalHistoryState

HistoryState

External history state for sharing undo/redo across multiple editors.

OnChangePlugin

Listens to editor state changes and triggers a callback.

import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';

function MyEditor() {
  const onChange = (editorState, editor, tags) => {
    console.log('Editor state changed');
  };

  return <OnChangePlugin onChange={onChange} />;
}

onChange

(editorState: EditorState, editor: LexicalEditor, tags: Set<string>) => void

required

Callback invoked when the editor state changes.

ignoreHistoryMergeTagChange

boolean

If true, ignores changes with the history merge tag. Default is true.

ignoreSelectionChange

boolean

If true, ignores pure selection changes. Default is false.

ClearEditorPlugin

Registers the clear editor command.

import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';

<ClearEditorPlugin onClear={() => console.log('Editor cleared')} />

onClear

() => void

Optional callback invoked when the editor is cleared.

Node-Specific Plugins

ListPlugin

Enables ordered lists, unordered lists, and checklist functionality.

import { ListPlugin } from '@lexical/react/LexicalListPlugin';

<ListPlugin hasStrictIndent={true} shouldPreserveNumbering={true} />

hasStrictIndent

boolean

If true, enforces strict indentation rules. Default is false.

shouldPreserveNumbering

boolean

If true, splitting a numbered list preserves numbering continuity. Default is false.

CheckListPlugin

Enables interactive checkboxes in checklists.

import { CheckListPlugin } from '@lexical/react/LexicalCheckListPlugin';

<CheckListPlugin disableTakeFocusOnClick={false} />

disableTakeFocusOnClick

boolean

If true, clicking checkboxes won’t focus the editor. Default is false.

TablePlugin

Enables table functionality with cell merging, styling, and navigation.

import { TablePlugin } from '@lexical/react/LexicalTablePlugin';

<TablePlugin
  hasCellMerge={true}
  hasCellBackgroundColor={true}
  hasTabHandler={true}
  hasHorizontalScroll={false}
/>

hasCellMerge

boolean

If false, disables cell merging (colspan/rowspan). Default is true.

hasCellBackgroundColor

boolean

If false, removes cell background colors. Default is true.

hasTabHandler

boolean

If true, tab key navigates table cells. Default is true.

hasHorizontalScroll

boolean

If true, wraps tables in a scrollable container. Default is false.

hasNestedTables

boolean

Experimental: If true, allows nested tables. Default is false.

hasFitNestedTables

boolean

Experimental: If true, resizes nested tables to fit parent cells. Default is false.

LinkPlugin

Enables link node functionality.

import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';

<LinkPlugin
  validateUrl={(url) => url.startsWith('https://')}
  attributes={{ rel: 'noopener noreferrer' }}
/>

validateUrl

(url: string) => boolean

Function to validate URLs before creating links.

attributes

LinkAttributes

Additional HTML attributes to add to link elements.

AutoLinkPlugin

Automatically converts URLs and patterns to links as you type.

import {
  AutoLinkPlugin,
  createLinkMatcherWithRegExp,
} from '@lexical/react/LexicalAutoLinkPlugin';

const URL_MATCHER = /((https?:\/\/)?(www\.)?[\w#%+.:=@~-]{1,256}\.\w{2,6}\b([\w#%&+./:=?@~-]*))/;

const matchers = [
  createLinkMatcherWithRegExp(URL_MATCHER, (text) => text),
];

<AutoLinkPlugin matchers={matchers} />

matchers

Array<LinkMatcher>

required

Array of link matchers defining patterns to auto-link.

onChange

ChangeHandler

Callback invoked when auto-links are created or removed.

excludeParents

Array<(parent: ElementNode) => boolean>

Functions to determine if auto-linking should be excluded in certain parent nodes.

ClickableLinkPlugin

Makes links clickable in read-only mode or with specific key combinations.

import { ClickableLinkPlugin } from '@lexical/react/LexicalClickableLinkPlugin';

<ClickableLinkPlugin newTab={true} disabled={false} />

newTab

boolean

If true, links open in a new tab. Default is true.

disabled

boolean

If true, disables clickable links. Default is false.

HashtagPlugin

Enables hashtag recognition and styling.

import { HashtagPlugin } from '@lexical/react/LexicalHashtagPlugin';

<HashtagPlugin />

No props. Requires HashtagNode to be registered.

HorizontalRulePlugin

Enables horizontal rule insertion via command.

import { HorizontalRulePlugin } from '@lexical/react/LexicalHorizontalRulePlugin';

<HorizontalRulePlugin />

No props. Registers the INSERT_HORIZONTAL_RULE_COMMAND.

MarkdownShortcutPlugin

Enables markdown shortcuts (e.g., **bold**, # heading, - list).

import { MarkdownShortcutPlugin } from '@lexical/react/LexicalMarkdownShortcutPlugin';

<MarkdownShortcutPlugin transformers={DEFAULT_TRANSFORMERS} />

transformers

Array<Transformer>

Array of markdown transformers. Defaults to DEFAULT_TRANSFORMERS.

Behavior and Interaction

AutoFocusPlugin

Automatically focuses the editor on mount.

import { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';

<AutoFocusPlugin defaultSelection="rootStart" />

defaultSelection

'rootStart' | 'rootEnd'

Where to place the cursor: start or end of the editor.

TabIndentationPlugin

Enables tab key indentation. Warning: May affect accessibility by trapping keyboard focus.

import { TabIndentationPlugin } from '@lexical/react/LexicalTabIndentationPlugin';

<TabIndentationPlugin maxIndent={7} />

maxIndent

number

Maximum indentation level allowed.

$canIndent

CanIndentPredicate

Function to determine if specific nodes can be indented.

CharacterLimitPlugin

Enforces a character limit on the editor content.

import { CharacterLimitPlugin } from '@lexical/react/LexicalCharacterLimitPlugin';

<CharacterLimitPlugin maxLength={280} charset="UTF-16" />

maxLength

number

required

Maximum number of characters allowed.

charset

'UTF-8' | 'UTF-16'

required

Character encoding for counting.

renderer

({ remainingCharacters: number }) => JSX.Element

Custom component to render the character count.

NodeEventPlugin

Listens to DOM events on specific node types.

import { NodeEventPlugin } from '@lexical/react/LexicalNodeEventPlugin';
import { ImageNode } from './nodes/ImageNode';

<NodeEventPlugin
  nodeType={ImageNode}
  eventType="click"
  eventListener={(event, editor, nodeKey) => {
    console.log('Image clicked', nodeKey);
  }}
/>

nodeType

Klass<LexicalNode>

required

The node class to listen for events on.

eventType

string

required

DOM event type (e.g., ‘click’, ‘mouseenter’, ‘mouseleave’).

eventListener

(event: Event, editor: LexicalEditor, nodeKey: NodeKey) => void

required

Callback invoked when the event occurs on the node.

EditorRefPlugin

Provides access to the editor instance outside the composer tree.

import { EditorRefPlugin } from '@lexical/react/LexicalEditorRefPlugin';
import { useRef } from 'react';

function App() {
  const editorRef = useRef(null);

  return (
    <LexicalComposer initialConfig={config}>
      <EditorRefPlugin editorRef={editorRef} />
      {/* ... */}
    </LexicalComposer>
  );
}

editorRef

RefObject<LexicalEditor> | RefCallback<LexicalEditor>

required

React ref or callback ref to receive the editor instance.

Core

React

Packages

Core Plugins

RichTextPlugin

PlainTextPlugin

History and State

HistoryPlugin

OnChangePlugin

ClearEditorPlugin

Node-Specific Plugins

ListPlugin

CheckListPlugin

TablePlugin

LinkPlugin

AutoLinkPlugin

ClickableLinkPlugin

HashtagPlugin

HorizontalRulePlugin

MarkdownShortcutPlugin

Behavior and Interaction

AutoFocusPlugin

TabIndentationPlugin

CharacterLimitPlugin

NodeEventPlugin

EditorRefPlugin

Build docs developers (and LLMs) love

Core

React

Packages

​Core Plugins

​RichTextPlugin

​PlainTextPlugin

​History and State

​HistoryPlugin

​OnChangePlugin

​ClearEditorPlugin

​Node-Specific Plugins

​ListPlugin

​CheckListPlugin

​TablePlugin

​LinkPlugin

​AutoLinkPlugin

​ClickableLinkPlugin

​HashtagPlugin

​HorizontalRulePlugin

​MarkdownShortcutPlugin

​Behavior and Interaction

​AutoFocusPlugin

​TabIndentationPlugin

​CharacterLimitPlugin

​NodeEventPlugin

​EditorRefPlugin

Build docs developers (and LLMs) love

Core Plugins

RichTextPlugin

PlainTextPlugin

History and State

HistoryPlugin

OnChangePlugin

ClearEditorPlugin

Node-Specific Plugins

ListPlugin

CheckListPlugin

TablePlugin

LinkPlugin

AutoLinkPlugin

ClickableLinkPlugin

HashtagPlugin

HorizontalRulePlugin

MarkdownShortcutPlugin

Behavior and Interaction

AutoFocusPlugin

TabIndentationPlugin

CharacterLimitPlugin

NodeEventPlugin

EditorRefPlugin