Skip to main content

Class: LexicalEditor

lexical.LexicalEditor

Methods

blur

blur(): void

Removes focus from the editor.

Returns

void

Defined in

lexical/src/LexicalEditor.ts:1137


dispatchCommand

dispatchCommand<TCommand>(type, payload): boolean

Dispatches a command of the specified type with the specified payload. This triggers all command listeners (set by registerCommand) for this type, passing them the provided payload.

Type parameters

NameType
TCommandextends LexicalCommand<unknown>

Parameters

NameTypeDescription
typeTCommandthe type of command listeners to trigger.
payloadCommandPayloadType<TCommand>the data to pass as an argument to the command listeners.

Returns

boolean

Defined in

lexical/src/LexicalEditor.ts:904


focus

focus(callbackFn?, options?): void

Focuses the editor

Parameters

NameTypeDescription
callbackFn?() => voidA function to run after the editor is focused.
optionsEditorFocusOptionsA bag of options

Returns

void

Defined in

lexical/src/LexicalEditor.ts:1093


getDecorators

getDecorators<T>(): Record<string, T>

Gets a map of all decorators in the editor.

Type parameters

Name
T

Returns

Record<string, T>

A mapping of call decorator keys to their decorated content

Defined in

lexical/src/LexicalEditor.ts:915


getEditorState

getEditorState(): EditorState

Gets the active editor state.

Returns

EditorState

The editor state

Defined in

lexical/src/LexicalEditor.ts:1007


getElementByKey

getElementByKey(key): null | HTMLElement

Gets the underlying HTMLElement associated with the LexicalNode for the given key.

Parameters

NameTypeDescription
keystringthe key of the LexicalNode.

Returns

null | HTMLElement

the HTMLElement rendered by the LexicalNode associated with the key.

Defined in

lexical/src/LexicalEditor.ts:999


getKey

getKey(): string

Gets the key of the editor

Returns

string

The editor key

Defined in

lexical/src/LexicalEditor.ts:933


getRootElement

getRootElement(): null | HTMLElement

Returns

null | HTMLElement

the current root element of the editor. If you want to register an event listener, do it via registerRootListener, since this reference may not be stable.

Defined in

lexical/src/LexicalEditor.ts:925


hasNode

hasNode<T>(node): boolean

Used to assert that a certain node is registered, usually by plugins to ensure nodes that they depend on have been registered.

Type parameters

NameType
Textends Klass<LexicalNode>

Parameters

NameType
nodeT

Returns

boolean

True if the editor has registered the provided node type, false otherwise.

Defined in

lexical/src/LexicalEditor.ts:884


hasNodes

hasNodes<T>(nodes): boolean

Used to assert that certain nodes are registered, usually by plugins to ensure nodes that they depend on have been registered.

Type parameters

NameType
Textends Klass<LexicalNode>

Parameters

NameType
nodesT[]

Returns

boolean

True if the editor has registered all of the provided node types, false otherwise.

Defined in

lexical/src/LexicalEditor.ts:893


isComposing

isComposing(): boolean

Returns

boolean

true if the editor is currently in "composition" mode due to receiving input through an IME, or 3P extension, for example. Returns false otherwise.

Defined in

lexical/src/LexicalEditor.ts:648


isEditable

isEditable(): boolean

Returns true if the editor is editable, false otherwise.

Returns

boolean

True if the editor is editable, false otherwise.

Defined in

lexical/src/LexicalEditor.ts:1154


parseEditorState

parseEditorState(maybeStringifiedEditorState, updateFn?): EditorState

Parses a SerializedEditorState (usually produced by toJSON) and returns and EditorState object that can be, for example, passed to setEditorState. Typically, deserliazation from JSON stored in a database uses this method.

Parameters

NameType
maybeStringifiedEditorStatestring | SerializedEditorState<SerializedLexicalNode>
updateFn?() => void

Returns

EditorState

Defined in

lexical/src/LexicalEditor.ts:1057


registerCommand

registerCommand<P>(command, listener, priority): () => void

Registers a listener that will trigger anytime the provided command is dispatched, subject to priority. Listeners that run at a higher priority can "intercept" commands and prevent them from propagating to other handlers by returning true.

Listeners registered at the same priority level will run deterministically in the order of registration.

Type parameters

Name
P

Parameters

NameTypeDescription
commandLexicalCommand<P>the command that will trigger the callback.
listenerCommandListener<P>the function that will execute when the command is dispatched.
priorityCommandListenerPrioritythe relative priority of the listener. 0 | 1 | 2 | 3 | 4

Returns

fn

a teardown function that can be used to cleanup the listener.

▸ (): void

Registers a listener that will trigger anytime the provided command is dispatched, subject to priority. Listeners that run at a higher priority can "intercept" commands and prevent them from propagating to other handlers by returning true.

Listeners registered at the same priority level will run deterministically in the order of registration.

Returns

void

a teardown function that can be used to cleanup the listener.

Defined in

lexical/src/LexicalEditor.ts:744


registerDecoratorListener

registerDecoratorListener<T>(listener): () => void

Registers a listener for when the editor's decorator object changes. The decorator object contains all DecoratorNode keys -> their decorated value. This is primarily used with external UI frameworks.

Will trigger the provided callback each time the editor transitions between these states until the teardown function is called.

Type parameters

Name
T

Parameters

NameType
listenerDecoratorListener<T>

Returns

fn

a teardown function that can be used to cleanup the listener.

▸ (): void

Registers a listener for when the editor's decorator object changes. The decorator object contains all DecoratorNode keys -> their decorated value. This is primarily used with external UI frameworks.

Will trigger the provided callback each time the editor transitions between these states until the teardown function is called.

Returns

void

a teardown function that can be used to cleanup the listener.

Defined in

lexical/src/LexicalEditor.ts:688


registerEditableListener

registerEditableListener(listener): () => void

Registers a listener for for when the editor changes between editable and non-editable states. Will trigger the provided callback each time the editor transitions between these states until the teardown function is called.

Parameters

NameType
listenerEditableListener

Returns

fn

a teardown function that can be used to cleanup the listener.

▸ (): void

Registers a listener for for when the editor changes between editable and non-editable states. Will trigger the provided callback each time the editor transitions between these states until the teardown function is called.

Returns

void

a teardown function that can be used to cleanup the listener.

Defined in

lexical/src/LexicalEditor.ts:672


registerMutationListener

registerMutationListener(klass, listener): () => void

Registers a listener that will run when a Lexical node of the provided class is mutated. The listener will receive a list of nodes along with the type of mutation that was performed on each: created, destroyed, or updated.

One common use case for this is to attach DOM event listeners to the underlying DOM nodes as Lexical nodes are created. getElementByKey can be used for this.

Parameters

NameTypeDescription
klassKlass<LexicalNode>The class of the node that you want to listen to mutations on.
listenerMutationListenerThe logic you want to run when the node is mutated.

Returns

fn

a teardown function that can be used to cleanup the listener.

▸ (): void

Registers a listener that will run when a Lexical node of the provided class is mutated. The listener will receive a list of nodes along with the type of mutation that was performed on each: created, destroyed, or updated.

One common use case for this is to attach DOM event listeners to the underlying DOM nodes as Lexical nodes are created. getElementByKey can be used for this.

Returns

void

a teardown function that can be used to cleanup the listener.

Defined in

lexical/src/LexicalEditor.ts:802


registerNodeTransform

registerNodeTransform<T>(klass, listener): () => void

Registers a listener that will run when a Lexical node of the provided class is marked dirty during an update. The listener will continue to run as long as the node is marked dirty. There are no guarantees around the order of transform execution!

Watch out for infinite loops. See Node Transforms

Type parameters

NameType
Textends LexicalNode

Parameters

NameTypeDescription
klassKlass<T>The class of the node that you want to run transforms on.
listenerTransform<T>The logic you want to run when the node is updated.

Returns

fn

a teardown function that can be used to cleanup the listener.

▸ (): void

Registers a listener that will run when a Lexical node of the provided class is marked dirty during an update. The listener will continue to run as long as the node is marked dirty. There are no guarantees around the order of transform execution!

Watch out for infinite loops. See Node Transforms

Returns

void

a teardown function that can be used to cleanup the listener.

Defined in

lexical/src/LexicalEditor.ts:855


registerRootListener

registerRootListener(listener): () => void

Registers a listener for when the editor's root DOM element (the content editable Lexical attaches to) changes. This is primarily used to attach event listeners to the root element. The root listener function is executed directly upon registration and then on any subsequent update.

Will trigger the provided callback each time the editor transitions between these states until the teardown function is called.

Parameters

NameType
listenerRootListener

Returns

fn

a teardown function that can be used to cleanup the listener.

▸ (): void

Registers a listener for when the editor's root DOM element (the content editable Lexical attaches to) changes. This is primarily used to attach event listeners to the root element. The root listener function is executed directly upon registration and then on any subsequent update.

Will trigger the provided callback each time the editor transitions between these states until the teardown function is called.

Returns

void

a teardown function that can be used to cleanup the listener.

Defined in

lexical/src/LexicalEditor.ts:723


registerTextContentListener

registerTextContentListener(listener): () => void

Registers a listener for when Lexical commits an update to the DOM and the text content of the editor changes from the previous state of the editor. If the text content is the same between updates, no notifications to the listeners will happen.

Will trigger the provided callback each time the editor transitions between these states until the teardown function is called.

Parameters

NameType
listenerTextContentListener

Returns

fn

a teardown function that can be used to cleanup the listener.

▸ (): void

Registers a listener for when Lexical commits an update to the DOM and the text content of the editor changes from the previous state of the editor. If the text content is the same between updates, no notifications to the listeners will happen.

Will trigger the provided callback each time the editor transitions between these states until the teardown function is called.

Returns

void

a teardown function that can be used to cleanup the listener.

Defined in

lexical/src/LexicalEditor.ts:705


registerUpdateListener

registerUpdateListener(listener): () => void

Registers a listener for Editor update event. Will trigger the provided callback each time the editor goes through an update (via update) until the teardown function is called.

Parameters

NameType
listenerUpdateListener

Returns

fn

a teardown function that can be used to cleanup the listener.

▸ (): void

Registers a listener for Editor update event. Will trigger the provided callback each time the editor goes through an update (via update) until the teardown function is called.

Returns

void

a teardown function that can be used to cleanup the listener.

Defined in

lexical/src/LexicalEditor.ts:658


setEditable

setEditable(editable): void

Sets the editable property of the editor. When false, the editor will not listen for user events on the underling contenteditable.

Parameters

NameTypeDescription
editablebooleanthe value to set the editable mode to.

Returns

void

Defined in

lexical/src/LexicalEditor.ts:1162


setEditorState

setEditorState(editorState, options?): void

Imperatively set the EditorState. Triggers reconciliation like an update.

Parameters

NameTypeDescription
editorStateEditorStatethe state to set the editor
options?EditorSetOptionsoptions for the update.

Returns

void

Defined in

lexical/src/LexicalEditor.ts:1016


setRootElement

setRootElement(nextRootElement): void

Imperatively set the root contenteditable element that Lexical listens for events on.

Parameters

NameType
nextRootElementnull | HTMLElement

Returns

void

Defined in

lexical/src/LexicalEditor.ts:941


toJSON

toJSON(): SerializedEditor

Returns a JSON-serializable javascript object NOT a JSON string. You still must call JSON.stringify (or something else) to turn the state into a string you can transfer over the wire and store in a database.

See exportJSON

Returns

SerializedEditor

A JSON-serializable javascript object

Defined in

lexical/src/LexicalEditor.ts:1177


update

update(updateFn, options?): void

Executes an update to the editor state. The updateFn callback is the ONLY place where Lexical editor state can be safely mutated.

Parameters

NameTypeDescription
updateFn() => voidA function that has access to writable editor state.
options?EditorUpdateOptionsA bag of options to control the behavior of the update.

Returns

void

Defined in

lexical/src/LexicalEditor.ts:1082