Skip to main content

@lexical/rich-text

Classes​

HeadingNode​

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

Extends​

Constructors​

Constructor​

new HeadingNode(tag?, key?): HeadingNode

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

Parameters​
tag?​

HeadingTagType = 'h1'

key?​

string

Returns​

HeadingNode

Overrides​

ElementNode.constructor

Methods​

afterCloneFrom()​

afterCloneFrom(prevNode): void

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

Perform any state updates on the clone of prevNode that are not already handled by the constructor call in the static clone method. If you have state to update in your clone that is not handled directly by the constructor, it is advisable to override this method but it is required to include a call to super.afterCloneFrom(prevNode) in your implementation. This is only intended to be called by $cloneWithProperties function or via a super call.

Parameters​
prevNode​

this

Returns​

void

Example​
class ClassesTextNode extends TextNode {
  // Not shown: static getType, static importJSON, exportJSON, createDOM, updateDOM
  __classes = new Set<string>();
  static clone(node: ClassesTextNode): ClassesTextNode {
    // The inherited TextNode constructor is used here, so
    // classes is not set by this method.
    return new ClassesTextNode(node.__text, node.__key);
  }
  afterCloneFrom(node: this): void {
    // This calls TextNode.afterCloneFrom and LexicalNode.afterCloneFrom
    // for necessary state updates
    super.afterCloneFrom(node);
    this.__addClasses(node.__classes);
  }
  // This method is a private implementation detail, it is not
  // suitable for the public API because it does not call getWritable
  __addClasses(classNames: Iterable<string>): this {
    for (const className of classNames) {
      this.__classes.add(className);
    }
    return this;
  }
  addClass(...classNames: string[]): this {
    return this.getWritable().__addClasses(classNames);
  }
  removeClass(...classNames: string[]): this {
    const node = this.getWritable();
    for (const className of classNames) {
      this.__classes.delete(className);
    }
    return this;
  }
  getClasses(): Set<string> {
    return this.getLatest().__classes;
  }
}
Overrides​

ElementNode.afterCloneFrom

collapseAtStart()​

collapseAtStart(): true

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

Returns​

true

Overrides​

ElementNode.collapseAtStart

createDOM()​

createDOM(config): HTMLElement

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

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:334

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:370

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:414

Returns​

boolean

Overrides​

ElementNode.extractWithChild

getTag()​

getTag(): HeadingTagType

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

Returns​

HeadingTagType

insertNewAfter()​

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

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

Parameters​
selection?​

RangeSelection

restoreSelection?​

boolean = true

Returns​

HeadingNode | ParagraphNode

Overrides​

ElementNode.insertNewAfter

setTag()​

setTag(tag): this

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

Parameters​
tag​

HeadingTagType

Returns​

this

updateDOM()​

updateDOM(prevNode, dom, config): boolean

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

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:364

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:238

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:234

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(): DOMConversionMap | null

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

Returns​

DOMConversionMap | null

Overrides​

ElementNode.importDOM

importJSON()​

static importJSON(serializedNode): HeadingNode

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

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:137

Extends​

Methods​

canMergeWhenEmpty()​

canMergeWhenEmpty(): true

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

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:204

Returns​

true

Overrides​

ElementNode.collapseAtStart

createDOM()​

createDOM(config): HTMLElement

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

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:166

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:196

Parameters​
_​

RangeSelection

restoreSelection?​

boolean

Returns​

ParagraphNode

Overrides​

ElementNode.insertNewAfter

updateDOM()​

updateDOM(prevNode, dom): boolean

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

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:142

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:138

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(): DOMConversionMap | null

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

Returns​

DOMConversionMap | null

Overrides​

ElementNode.importDOM

importJSON()​

static importJSON(serializedNode): QuoteNode

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

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

Interfaces​

RichTextConfig​

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

Configuration for RichTextExtension.

Properties​

escapeFormatTriggers​

escapeFormatTriggers: EscapeFormatTriggerConfig

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

Per-format trigger configuration that controls which text formats are automatically cleared from the selection on specific user interactions.

Defaults to:

{
  capitalize: {enter: true, space: true, tab: true},
  lowercase: {enter: true, space: true, tab: true},
  uppercase: {enter: true, space: true, tab: true},
}

To opt in to escaping code formatting at text node boundaries:

configExtension(RichTextExtension, {
  escapeFormatTriggers: {
    code: {onlyAtBoundary: true, enter: true, click: true, arrow: true},
  },
})

Type Aliases​

EscapeFormatTrigger​

EscapeFormatTrigger = "enter" | "click" | "arrow" | "space" | "tab"

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

Trigger types that cause format escape at text node boundaries.

  • enter: Escape on Enter key press
  • click: Escape on mouse click
  • arrow: Escape on arrow key navigation (left/right)
  • space: Escape on Space key press
  • tab: Escape on Tab key press

EscapeFormatTriggerConfig​

EscapeFormatTriggerConfig = { [K in TextFormatType]?: TriggerConfig | null }

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

Per-format trigger configuration. Each TextFormatType maps to its own set of triggers, or null to explicitly disable escape for that format (useful when overriding defaults via configExtension).

HeadingTagType​

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

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

SerializedHeadingNode​

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

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

SerializedQuoteNode​

SerializedQuoteNode = SerializedElementNode

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

TriggerConfig​

TriggerConfig = { [K in EscapeFormatTrigger]?: boolean } & object

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

Trigger flags for a single format type. Set a trigger key to true to escape that format when the corresponding user interaction occurs.

When onlyAtBoundary is true, the format is only escaped when the cursor is at the start or end of a formatted text node with no adjacent sibling in that direction. When onlyAtBoundary is false or omitted the format is always escaped regardless of cursor position (matching the legacy $resetCapitalization behavior).

Type Declaration​

onlyAtBoundary?​

optional onlyAtBoundary?: boolean

Variables​

DRAG_DROP_PASTE​

const DRAG_DROP_PASTE: LexicalCommand<File[]>

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

RichTextExtension​

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

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

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

Includes configurable format escape via escapeFormatTriggers. Use configExtension to customize which formats escape on which triggers.

Example​

configExtension(RichTextExtension, {
  escapeFormatTriggers: {
    code: {click: true, arrow: true},
  },
})

Functions​

$createHeadingNode()​

$createHeadingNode(headingTag?): HeadingNode

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

Parameters​

headingTag?​

HeadingTagType = 'h1'

Returns​

HeadingNode

$createQuoteNode()​

$createQuoteNode(): QuoteNode

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

Returns​

QuoteNode

$isHeadingNode()​

$isHeadingNode(node): node is HeadingNode

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

Parameters​

node​

LexicalNode | null | undefined

Returns​

node is HeadingNode

$isQuoteNode()​

$isQuoteNode(node): node is QuoteNode

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

Parameters​

node​

LexicalNode | null | undefined

Returns​

node is QuoteNode

eventFiles()​

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

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

Parameters​

event​

DragEvent | PasteCommandType

Returns​

[boolean, File[], boolean]

registerRichText()​

registerRichText(editor, escapeFormatTriggers?): () => void

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

Parameters​

editor​

LexicalEditor

escapeFormatTriggers?​

ReadonlySignal<EscapeFormatTriggerConfig> = ...

Returns​

() => void