Skip to main content

Class: LexicalEditor

lexical.LexicalEditor

Properties

constructor

constructor: KlassConstructor<typeof LexicalEditor>

Defined in

packages/lexical/src/LexicalEditor.ts:561


version

Static version: undefined | string

The version with build identifiers for this editor (since 0.17.1)

Defined in

packages/lexical/src/LexicalEditor.ts:564

Methods

blur

blur(): void

Removes focus from the editor.

Returns

void

Defined in

packages/lexical/src/LexicalEditor.ts:1282


dispatchCommand

dispatchCommand<TCommand>(type, payload): boolean

Dispatches a command of the specified type with the specified payload. This triggers all command listeners (set by LexicalEditor.registerCommand) for this type, passing them the provided payload. The command listeners will be triggered in an implicit LexicalEditor.update, unless this was invoked from inside an update in which case that update context will be re-used (as if this was a dollar function itself).

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

packages/lexical/src/LexicalEditor.ts:1009


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

packages/lexical/src/LexicalEditor.ts:1238


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

packages/lexical/src/LexicalEditor.ts:1020


getEditorState

getEditorState(): EditorState

Gets the active editor state.

Returns

EditorState

The editor state

Defined in

packages/lexical/src/LexicalEditor.ts:1125


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

packages/lexical/src/LexicalEditor.ts:1117


getKey

getKey(): string

Gets the key of the editor

Returns

string

The editor key

Defined in

packages/lexical/src/LexicalEditor.ts:1038


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 LexicalEditor.registerRootListener, since this reference may not be stable.

Defined in

packages/lexical/src/LexicalEditor.ts:1030


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

packages/lexical/src/LexicalEditor.ts:986


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

packages/lexical/src/LexicalEditor.ts:995


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

packages/lexical/src/LexicalEditor.ts:692


isEditable

isEditable(): boolean

Returns true if the editor is editable, false otherwise.

Returns

boolean

True if the editor is editable, false otherwise.

Defined in

packages/lexical/src/LexicalEditor.ts:1299


parseEditorState

parseEditorState(maybeStringifiedEditorState, updateFn?): EditorState

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

Parameters

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

Returns

EditorState

Defined in

packages/lexical/src/LexicalEditor.ts:1189


read

read<T>(callbackFn): T

Executes a read of the editor's state, with the editor context available (useful for exporting and read-only DOM operations). Much like update, but prevents any mutation of the editor's state. Any pending updates will be flushed immediately before the read.

Type parameters

Name
T

Parameters

NameTypeDescription
callbackFn() => TA function that has access to read-only editor state.

Returns

T

Defined in

packages/lexical/src/LexicalEditor.ts:1208


registerCommand

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

Registers a listener that will trigger anytime the provided command is dispatched with LexicalEditor.dispatch, 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 are always invoked in an LexicalEditor.update and can call dollar functions.

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 (or COMMAND_PRIORITY_EDITOR | COMMAND_PRIORITY_LOW | COMMAND_PRIORITY_NORMAL | COMMAND_PRIORITY_HIGH | COMMAND_PRIORITY_CRITICAL)

Returns

fn

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

▸ (): void

Returns

void

Defined in

packages/lexical/src/LexicalEditor.ts:798


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

Returns

void

Defined in

packages/lexical/src/LexicalEditor.ts:732


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

Returns

void

Defined in

packages/lexical/src/LexicalEditor.ts:716


registerMutationListener

registerMutationListener(klass, listener, options?): () => 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. LexicalEditor.getElementByKey can be used for this.

If any existing nodes are in the DOM, and skipInitialization is not true, the listener will be called immediately with an updateTag of 'registerMutationListener' where all nodes have the 'created' NodeMutation. This can be controlled with the skipInitialization option (whose default was previously true for backwards compatibility with <=0.16.1 but has been changed to false as of 0.21.0).

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.
options?MutationListenerOptionssee MutationListenerOptions

Returns

fn

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

▸ (): void

Returns

void

Defined in

packages/lexical/src/LexicalEditor.ts:862


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

Returns

void

Defined in

packages/lexical/src/LexicalEditor.ts:957


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

Returns

void

Defined in

packages/lexical/src/LexicalEditor.ts:767


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

Returns

void

Defined in

packages/lexical/src/LexicalEditor.ts:749


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 LexicalEditor.update) until the teardown function is called.

Parameters

NameType
listenerUpdateListener

Returns

fn

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

▸ (): void

Returns

void

Defined in

packages/lexical/src/LexicalEditor.ts:702


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

packages/lexical/src/LexicalEditor.ts:1307


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

packages/lexical/src/LexicalEditor.ts:1134


setRootElement

setRootElement(nextRootElement): void

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

Parameters

NameType
nextRootElementnull | HTMLElement

Returns

void

Defined in

packages/lexical/src/LexicalEditor.ts:1046


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 LexicalNode#exportJSON

Returns

SerializedEditor

A JSON-serializable javascript object

Defined in

packages/lexical/src/LexicalEditor.ts:1322


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

packages/lexical/src/LexicalEditor.ts:1227