Class: LexicalEditor
lexical.LexicalEditor
Properties
constructor
• constructor: KlassConstructor<typeof LexicalEditor>
Defined in
packages/lexical/src/LexicalEditor.ts:560
version
▪ Static version: undefined | string
The version with build identifiers for this editor (since 0.17.1)
Defined in
packages/lexical/src/LexicalEditor.ts:563
Methods
blur
▸ blur(): void
Removes focus from the editor.
Returns
void
Defined in
packages/lexical/src/LexicalEditor.ts:1268
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
| Name | Type |
|---|---|
TCommand | extends LexicalCommand<unknown> |
Parameters
| Name | Type | Description |
|---|---|---|
type | TCommand | the type of command listeners to trigger. |
payload | CommandPayloadType<TCommand> | the data to pass as an argument to the command listeners. |
Returns
boolean
Defined in
packages/lexical/src/LexicalEditor.ts:1008
focus
▸ focus(callbackFn?, options?): void
Focuses the editor
Parameters
| Name | Type | Description |
|---|---|---|
callbackFn? | () => void | A function to run after the editor is focused. |
options | EditorFocusOptions | A bag of options |
Returns
void
Defined in
packages/lexical/src/LexicalEditor.ts:1224
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:1019
getEditorState
▸ getEditorState(): EditorState
Gets the active editor state.
Returns
The editor state
Defined in
packages/lexical/src/LexicalEditor.ts:1111
getElementByKey
▸ getElementByKey(key): null | HTMLElement
Gets the underlying HTMLElement associated with the LexicalNode for the given key.
Parameters
| Name | Type | Description |
|---|---|---|
key | string | the key of the LexicalNode. |
Returns
null | HTMLElement
the HTMLElement rendered by the LexicalNode associated with the key.
Defined in
packages/lexical/src/LexicalEditor.ts:1103
getKey
▸ getKey(): string
Gets the key of the editor
Returns
string
The editor key
Defined in
packages/lexical/src/LexicalEditor.ts:1037
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:1029
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
| Name | Type |
|---|---|
T | extends KlassConstructor<typeof LexicalNode> |
Parameters
| Name | Type |
|---|---|
node | T |
Returns
boolean
True if the editor has registered the provided node type, false otherwise.
Defined in
packages/lexical/src/LexicalEditor.ts:985
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
| Name | Type |
|---|---|
T | extends KlassConstructor<typeof LexicalNode> |
Parameters
| Name | Type |
|---|---|
nodes | T[] |
Returns
boolean
True if the editor has registered all of the provided node types, false otherwise.
Defined in
packages/lexical/src/LexicalEditor.ts:994
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:691
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:1285
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
| Name | Type |
|---|---|
maybeStringifiedEditorState | string | SerializedEditorState<SerializedLexicalNode> |
updateFn? | () => void |
Returns
Defined in
packages/lexical/src/LexicalEditor.ts:1175
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
| Name | Type | Description |
|---|---|---|
callbackFn | () => T | A function that has access to read-only editor state. |
Returns
T
Defined in
packages/lexical/src/LexicalEditor.ts:1194
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
| Name | Type | Description |
|---|---|---|
command | LexicalCommand<P> | the command that will trigger the callback. |
listener | CommandListener<P> | the function that will execute when the command is dispatched. |
priority | CommandListenerPriority | the 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:797
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
| Name | Type |
|---|---|
listener | DecoratorListener<T> |
Returns
fn
a teardown function that can be used to cleanup the listener.
▸ (): void
Returns
void
Defined in
packages/lexical/src/LexicalEditor.ts:731
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
| Name | Type |
|---|---|
listener | EditableListener |
Returns
fn
a teardown function that can be used to cleanup the listener.
▸ (): void
Returns
void
Defined in
packages/lexical/src/LexicalEditor.ts:715
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
| Name | Type | Description |
|---|---|---|
klass | KlassConstructor<typeof LexicalNode> | The class of the node that you want to listen to mutations on. |
listener | MutationListener | The logic you want to run when the node is mutated. |
options? | MutationListenerOptions | see MutationListenerOptions |
Returns
fn
a teardown function that can be used to cleanup the listener.
▸ (): void
Returns
void
Defined in
packages/lexical/src/LexicalEditor.ts:861
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
| Name | Type |
|---|---|
T | extends LexicalNode |
Parameters
| Name | Type | Description |
|---|---|---|
klass | Klass<T> | The class of the node that you want to run transforms on. |
listener | Transform<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:956
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
| Name | Type |
|---|---|
listener | RootListener |
Returns
fn
a teardown function that can be used to cleanup the listener.
▸ (): void
Returns
void
Defined in
packages/lexical/src/LexicalEditor.ts:766
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
| Name | Type |
|---|---|
listener | TextContentListener |
Returns
fn
a teardown function that can be used to cleanup the listener.
▸ (): void
Returns
void
Defined in
packages/lexical/src/LexicalEditor.ts:748
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
| Name | Type |
|---|---|
listener | UpdateListener |
Returns
fn
a teardown function that can be used to cleanup the listener.
▸ (): void
Returns
void
Defined in
packages/lexical/src/LexicalEditor.ts:701
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
| Name | Type | Description |
|---|---|---|
editable | boolean | the value to set the editable mode to. |
Returns
void
Defined in
packages/lexical/src/LexicalEditor.ts:1293
setEditorState
▸ setEditorState(editorState, options?): void
Imperatively set the EditorState. Triggers reconciliation like an update.
Parameters
| Name | Type | Description |
|---|---|---|
editorState | EditorState | the state to set the editor |
options? | EditorSetOptions | options for the update. |
Returns
void
Defined in
packages/lexical/src/LexicalEditor.ts:1120
setRootElement
▸ setRootElement(nextRootElement): void
Imperatively set the root contenteditable element that Lexical listens for events on.
Parameters
| Name | Type |
|---|---|
nextRootElement | null | HTMLElement |
Returns
void
Defined in
packages/lexical/src/LexicalEditor.ts:1045
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.
Returns
A JSON-serializable javascript object
Defined in
packages/lexical/src/LexicalEditor.ts:1308
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
| Name | Type | Description |
|---|---|---|
updateFn | () => void | A function that has access to writable editor state. |
options? | EditorUpdateOptions | A bag of options to control the behavior of the update. |
Returns
void