Class: LexicalEditor
lexical.LexicalEditor
Properties
constructor
• constructor: KlassConstructor<typeof LexicalEditor>
Defined in
packages/lexical/src/LexicalEditor.ts:529
Methods
blur
▸ blur(): void
Removes focus from the editor.
Returns
void
Defined in
packages/lexical/src/LexicalEditor.ts:1146
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
| 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:913
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:1102
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:924
getEditorState
▸ getEditorState(): EditorState
Gets the active editor state.
Returns
The editor state
Defined in
packages/lexical/src/LexicalEditor.ts:1016
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:1008
getKey
▸ getKey(): string
Gets the key of the editor
Returns
string
The editor key
Defined in
packages/lexical/src/LexicalEditor.ts:942
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
packages/lexical/src/LexicalEditor.ts:934
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:893
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:902
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:657
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:1163
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
| Name | Type |
|---|---|
maybeStringifiedEditorState | string | SerializedEditorState<SerializedLexicalNode> |
updateFn? | () => void |
Returns
Defined in
packages/lexical/src/LexicalEditor.ts:1066
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
| 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 |
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
packages/lexical/src/LexicalEditor.ts:753
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
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
packages/lexical/src/LexicalEditor.ts:697
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
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
packages/lexical/src/LexicalEditor.ts:681
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
| 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. |
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
packages/lexical/src/LexicalEditor.ts:811
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
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
packages/lexical/src/LexicalEditor.ts:864
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
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
packages/lexical/src/LexicalEditor.ts:732
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
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
packages/lexical/src/LexicalEditor.ts:714
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
| Name | Type |
|---|---|
listener | UpdateListener |
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
packages/lexical/src/LexicalEditor.ts:667
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:1171
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:1025
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:950
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
A JSON-serializable javascript object
Defined in
packages/lexical/src/LexicalEditor.ts:1186
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
Defined in
packages/lexical/src/LexicalEditor.ts:1091