Overview
The @lexical/rich-text package provides rich text editing capabilities for Lexical, including support for headings, quotes, and comprehensive keyboard/editing commands.
Installation
npm install @lexical/rich-text
Nodes
HeadingNode
Represents heading elements (h1-h6) in the editor.
The heading level: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
Methods
Returns the heading tag type (h1-h6)
Sets the heading tag type
QuoteNode
Represents block quote elements in the editor.
Called when collapsing at the start of a quote, converts it to a paragraph
Factory Functions
$createHeadingNode
Creates a new HeadingNode.
function $createHeadingNode(headingTag?: HeadingTagType): HeadingNode
headingTag
HeadingTagType
default:"'h1'"
The heading level to create
import { $createHeadingNode } from '@lexical/rich-text';
editor.update(() => {
const heading = $createHeadingNode('h2');
heading.append($createTextNode('My Heading'));
$getRoot().append(heading);
});
$createQuoteNode
Creates a new QuoteNode.
function $createQuoteNode(): QuoteNode
import { $createQuoteNode } from '@lexical/rich-text';
editor.update(() => {
const quote = $createQuoteNode();
quote.append($createParagraphNode());
$getRoot().append(quote);
});
Type Guards
$isHeadingNode
Checks if a node is a HeadingNode.
function $isHeadingNode(node: LexicalNode | null | undefined): node is HeadingNode
$isQuoteNode
Checks if a node is a QuoteNode.
function $isQuoteNode(node: LexicalNode | null | undefined): node is QuoteNode
Commands
DRAG_DROP_PASTE
Command for handling file drag and drop paste operations.
const DRAG_DROP_PASTE: LexicalCommand<Array<File>>
Registration
registerRichText
Registers all rich text editing functionality including keyboard handlers and commands.
function registerRichText(editor: LexicalEditor): () => void
The editor instance to register rich text behavior on
import { createEditor } from 'lexical';
import { registerRichText } from '@lexical/rich-text';
const editor = createEditor({
nodes: [HeadingNode, QuoteNode]
});
const unregister = registerRichText(editor);
// Later, cleanup:
unregister();
Extension
RichTextExtension
A Lexical extension that bundles HeadingNode, QuoteNode, and rich text behavior.
import { createEditor } from 'lexical';
import { RichTextExtension } from '@lexical/rich-text';
const editor = createEditor({
extensions: [RichTextExtension]
});
Conflicts with @lexical/plain-text
Depends on DragonExtension for Dragon NaturallySpeaking support
Utilities
eventFiles
Extracts files from drag or paste events.
function eventFiles(
event: DragEvent | PasteCommandType
): [boolean, Array<File>, boolean]
return
[boolean, File[], boolean]
Returns [hasFiles, files, hasTextContent]
Types
SerializedHeadingNode
type SerializedHeadingNode = Spread<
{
tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
},
SerializedElementNode
>
SerializedQuoteNode
type SerializedQuoteNode = SerializedElementNode
HeadingTagType
type HeadingTagType = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'