Skip to main content

Class: LexicalEditor

lexical.LexicalEditor

Properties

constructor

constructor: KlassConstructor<typeof LexicalEditor>

Defined in

lexical/src/LexicalEditor.ts:531

Methods

blur

blur(): void

Removes focus from the editor.

Returns

void

Defined in

lexical/src/LexicalEditor.ts:1148


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


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


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


getEditorState

getEditorState(): EditorState

Gets the active editor state.

Returns

EditorState

The editor state

Defined in

lexical/src/LexicalEditor.ts:1018


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


getKey

getKey(): string

Gets the key of the editor

Returns

string

The editor key

Defined in

lexical/src/LexicalEditor.ts:944


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


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 KlassConstructor<typeof LexicalNode>

Parameters

NameType
nodeT

Returns

boolean

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

Defined in

lexical/src/LexicalEditor.ts:895


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 KlassConstructor<typeof 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:904


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


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


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


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


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


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


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
klassKlassConstructor<typeof 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:813


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


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


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


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


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


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


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


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


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