Skip to main content

@lexical/rich-text

Classes

HeadingNode

Defined in: packages/lexical-rich-text/src/index.ts:220

Extends

Constructors

Constructor

new HeadingNode(tag, key?): HeadingNode

Defined in: packages/lexical-rich-text/src/index.ts:232

Parameters
tag

HeadingTagType

key?

string

Returns

HeadingNode

Overrides

ElementNode.constructor

Methods

collapseAtStart()

collapseAtStart(): true

Defined in: packages/lexical-rich-text/src/index.ts:389

Returns

true

Overrides

ElementNode.collapseAtStart

createDOM()

createDOM(config): HTMLElement

Defined in: packages/lexical-rich-text/src/index.ts:249

Called during the reconciliation process to determine which nodes to insert into the DOM for this Lexical Node.

This method must return exactly one HTMLElement. Nested elements are not supported.

Do not attempt to update the Lexical EditorState during this phase of the update lifecycle.

Parameters
config

EditorConfig

Returns

HTMLElement

Overrides

ElementNode.createDOM

exportDOM()

exportDOM(editor): DOMExportOutput

Defined in: packages/lexical-rich-text/src/index.ts:319

Controls how the this node is serialized to HTML. This is important for copy and paste between Lexical and non-Lexical editors, or Lexical editors with different namespaces, in which case the primary transfer format is HTML. It's also important if you're serializing to HTML for any other reason via $generateHtmlFromNodes. You could also use this method to build your own HTML renderer.

Parameters
editor

LexicalEditor

Returns

DOMExportOutput

Overrides

ElementNode.exportDOM

exportJSON()

exportJSON(): SerializedHeadingNode

Defined in: packages/lexical-rich-text/src/index.ts:355

Controls how the this node is serialized to JSON. This is important for copy and paste between Lexical editors sharing the same namespace. It's also important if you're serializing to JSON for persistent storage somewhere. See Serialization & Deserialization.

Returns

SerializedHeadingNode

Overrides

ElementNode.exportJSON

extractWithChild()

extractWithChild(): boolean

Defined in: packages/lexical-rich-text/src/index.ts:399

Returns

boolean

Overrides

ElementNode.extractWithChild

getTag()

getTag(): HeadingTagType

Defined in: packages/lexical-rich-text/src/index.ts:237

Returns

HeadingTagType

insertNewAfter()

insertNewAfter(selection?, restoreSelection?): ParagraphNode | HeadingNode

Defined in: packages/lexical-rich-text/src/index.ts:363

Parameters
selection?

RangeSelection

restoreSelection?

boolean = true

Returns

ParagraphNode | HeadingNode

Overrides

ElementNode.insertNewAfter

setTag()

setTag(tag): this

Defined in: packages/lexical-rich-text/src/index.ts:241

Parameters
tag

HeadingTagType

Returns

this

updateDOM()

updateDOM(prevNode, dom, config): boolean

Defined in: packages/lexical-rich-text/src/index.ts:261

Called when a node changes and should update the DOM in whatever way is necessary to make it align with any changes that might have happened during the update.

Returning "true" here will cause lexical to unmount and recreate the DOM node (by calling createDOM). You would need to do this if the element tag changes, for instance.

Parameters
prevNode

this

dom

HTMLElement

config

EditorConfig

Returns

boolean

Overrides

ElementNode.updateDOM

updateFromJSON()

updateFromJSON(serializedNode): this

Defined in: packages/lexical-rich-text/src/index.ts:349

Update this LexicalNode instance from serialized JSON. It's recommended to implement as much logic as possible in this method instead of the static importJSON method, so that the functionality can be inherited in subclasses.

The LexicalUpdateJSON utility type should be used to ignore any type, version, or children properties in the JSON so that the extended JSON from subclasses are acceptable parameters for the super call.

If overridden, this method must call super.

Parameters
serializedNode

LexicalUpdateJSON<SerializedHeadingNode>

Returns

this

Example
class MyTextNode extends TextNode {
// ...
static importJSON(serializedNode: SerializedMyTextNode): MyTextNode {
return $createMyTextNode()
.updateFromJSON(serializedNode);
}
updateFromJSON(
serializedNode: LexicalUpdateJSON<SerializedMyTextNode>,
): this {
return super.updateFromJSON(serializedNode)
.setMyProperty(serializedNode.myProperty);
}
}
Overrides

ElementNode.updateFromJSON

clone()

static clone(node): HeadingNode

Defined in: packages/lexical-rich-text/src/index.ts:228

Clones this node, creating a new node with a different key and adding it to the EditorState (but not attaching it anywhere!). All nodes must implement this method.

Parameters
node

HeadingNode

Returns

HeadingNode

Overrides

ElementNode.clone

getType()

static getType(): string

Defined in: packages/lexical-rich-text/src/index.ts:224

Returns the string type of this node. Every node must implement this and it MUST BE UNIQUE amongst nodes registered on the editor.

Returns

string

Overrides

ElementNode.getType

importDOM()

static importDOM(): null | DOMConversionMap

Defined in: packages/lexical-rich-text/src/index.ts:265

Returns

null | DOMConversionMap

Overrides

ElementNode.importDOM

importJSON()

static importJSON(serializedNode): HeadingNode

Defined in: packages/lexical-rich-text/src/index.ts:343

Controls how the this node is deserialized from JSON. This is usually boilerplate, but provides an abstraction between the node implementation and serialized interface that can be important if you ever make breaking changes to a node schema (by adding or removing properties). See Serialization & Deserialization.

Parameters
serializedNode

SerializedHeadingNode

Returns

HeadingNode

Overrides

ElementNode.importJSON


QuoteNode

Defined in: packages/lexical-rich-text/src/index.ts:127

Extends

Methods

canMergeWhenEmpty()

canMergeWhenEmpty(): true

Defined in: packages/lexical-rich-text/src/index.ts:202

Determines whether this node, when empty, can merge with a first block of nodes being inserted.

This method is specifically called in RangeSelection.insertNodes to determine merging behavior during nodes insertion.

Returns

true

Example
// In a ListItemNode or QuoteNode implementation:
canMergeWhenEmpty(): true {
return true;
}
Overrides

ElementNode.canMergeWhenEmpty

collapseAtStart()

collapseAtStart(): true

Defined in: packages/lexical-rich-text/src/index.ts:194

Returns

true

Overrides

ElementNode.collapseAtStart

createDOM()

createDOM(config): HTMLElement

Defined in: packages/lexical-rich-text/src/index.ts:138

Called during the reconciliation process to determine which nodes to insert into the DOM for this Lexical Node.

This method must return exactly one HTMLElement. Nested elements are not supported.

Do not attempt to update the Lexical EditorState during this phase of the update lifecycle.

Parameters
config

EditorConfig

Returns

HTMLElement

Overrides

ElementNode.createDOM

exportDOM()

exportDOM(editor): DOMExportOutput

Defined in: packages/lexical-rich-text/src/index.ts:156

Controls how the this node is serialized to HTML. This is important for copy and paste between Lexical and non-Lexical editors, or Lexical editors with different namespaces, in which case the primary transfer format is HTML. It's also important if you're serializing to HTML for any other reason via $generateHtmlFromNodes. You could also use this method to build your own HTML renderer.

Parameters
editor

LexicalEditor

Returns

DOMExportOutput

Overrides

ElementNode.exportDOM

insertNewAfter()

insertNewAfter(_, restoreSelection?): ParagraphNode

Defined in: packages/lexical-rich-text/src/index.ts:186

Parameters
_

RangeSelection

restoreSelection?

boolean

Returns

ParagraphNode

Overrides

ElementNode.insertNewAfter

updateDOM()

updateDOM(prevNode, dom): boolean

Defined in: packages/lexical-rich-text/src/index.ts:143

Called when a node changes and should update the DOM in whatever way is necessary to make it align with any changes that might have happened during the update.

Returning "true" here will cause lexical to unmount and recreate the DOM node (by calling createDOM). You would need to do this if the element tag changes, for instance.

Parameters
prevNode

this

dom

HTMLElement

Returns

boolean

Overrides

ElementNode.updateDOM

clone()

static clone(node): QuoteNode

Defined in: packages/lexical-rich-text/src/index.ts:132

Clones this node, creating a new node with a different key and adding it to the EditorState (but not attaching it anywhere!). All nodes must implement this method.

Parameters
node

QuoteNode

Returns

QuoteNode

Overrides

ElementNode.clone

getType()

static getType(): string

Defined in: packages/lexical-rich-text/src/index.ts:128

Returns the string type of this node. Every node must implement this and it MUST BE UNIQUE amongst nodes registered on the editor.

Returns

string

Overrides

ElementNode.getType

importDOM()

static importDOM(): null | DOMConversionMap

Defined in: packages/lexical-rich-text/src/index.ts:147

Returns

null | DOMConversionMap

Overrides

ElementNode.importDOM

importJSON()

static importJSON(serializedNode): QuoteNode

Defined in: packages/lexical-rich-text/src/index.ts:180

Controls how the this node is deserialized from JSON. This is usually boilerplate, but provides an abstraction between the node implementation and serialized interface that can be important if you ever make breaking changes to a node schema (by adding or removing properties). See Serialization & Deserialization.

Parameters
serializedNode

SerializedQuoteNode

Returns

QuoteNode

Overrides

ElementNode.importJSON

Type Aliases

HeadingTagType

HeadingTagType = "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

Defined in: packages/lexical-rich-text/src/index.ts:217


SerializedHeadingNode

SerializedHeadingNode = Spread<{ tag: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"; }, SerializedElementNode>

Defined in: packages/lexical-rich-text/src/index.ts:113


SerializedQuoteNode

SerializedQuoteNode = SerializedElementNode

Defined in: packages/lexical-rich-text/src/index.ts:124

Variables

DRAG_DROP_PASTE

const DRAG_DROP_PASTE: LexicalCommand<File[]>

Defined in: packages/lexical-rich-text/src/index.ts:120


RichTextExtension

const RichTextExtension: LexicalExtension<ExtensionConfigBase, "@lexical/rich-text", unknown, unknown>

Defined in: packages/lexical-rich-text/src/index.ts:1150

An extension to register @lexical/rich-text behavior and nodes (HeadingNode, QuoteNode)

Functions

$createHeadingNode()

$createHeadingNode(headingTag): HeadingNode

Defined in: packages/lexical-rich-text/src/index.ts:440

Parameters

headingTag

HeadingTagType = 'h1'

Returns

HeadingNode


$createQuoteNode()

$createQuoteNode(): QuoteNode

Defined in: packages/lexical-rich-text/src/index.ts:207

Returns

QuoteNode


$isHeadingNode()

$isHeadingNode(node): node is HeadingNode

Defined in: packages/lexical-rich-text/src/index.ts:446

Parameters

node

undefined | null | LexicalNode

Returns

node is HeadingNode


$isQuoteNode()

$isQuoteNode(node): node is QuoteNode

Defined in: packages/lexical-rich-text/src/index.ts:211

Parameters

node

undefined | null | LexicalNode

Returns

node is QuoteNode


eventFiles()

eventFiles(event): [boolean, File[], boolean]

Defined in: packages/lexical-rich-text/src/index.ts:496

Parameters

event

DragEvent | PasteCommandType

Returns

[boolean, File[], boolean]


registerRichText()

registerRichText(editor): () => void

Defined in: packages/lexical-rich-text/src/index.ts:593

Parameters

editor

LexicalEditor

Returns

(): void

Returns

void