Skip to main content

Class: ElementNode

lexical.ElementNode

Hierarchy

Constructors

constructor

new ElementNode(key?): ElementNode

Parameters

NameType
key?string

Returns

ElementNode

Inherited from

LexicalNode.constructor

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:85

Properties

constructor

constructor: KlassConstructor<typeof ElementNode>

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:69


importDOM

Static Optional importDOM: () => null | DOMConversionMap<any>

Type declaration

▸ (): null | DOMConversionMap<any>

Returns

null | DOMConversionMap<any>

Inherited from

LexicalNode.importDOM

Defined in

packages/lexical/src/LexicalNode.ts:209

Methods

append

append(...nodesToAppend): this

Parameters

NameType
...nodesToAppendLexicalNode[]

Returns

this

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:362


canBeEmpty

canBeEmpty(): boolean

Returns

boolean

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:555


canIndent

canIndent(): boolean

Returns

boolean

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:533


canInsertTextAfter

canInsertTextAfter(): boolean

Returns

boolean

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:561


canInsertTextBefore

canInsertTextBefore(): boolean

Returns

boolean

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:558


canMergeWhenEmpty

canMergeWhenEmpty(): boolean

Determines whether this node, when empty, can merge with a first block of nodes being inserted.

This method is specifically called in RangeSelection.insertNodes to determine merging behavior during nodes insertion.

Returns

boolean

Example

// In a ListItemNode or QuoteNode implementation:
canMergeWhenEmpty(): true {
return true;
}

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:599


clear

clear(): this

Returns

this

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:356


collapseAtStart

collapseAtStart(selection): boolean

Parameters

NameType
selectionRangeSelection

Returns

boolean

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:541


createDOM

createDOM(_config, _editor): HTMLElement

Called during the reconciliation process to determine which nodes to insert into the DOM for this Lexical Node.

This method must return exactly one HTMLElement. Nested elements are not supported.

Do not attempt to update the Lexical EditorState during this phase of the update lifecyle.

Parameters

NameTypeDescription
_configEditorConfigallows access to things like the EditorTheme (to apply classes) during reconciliation.
_editorLexicalEditorallows access to the editor for context during reconciliation.

Returns

HTMLElement

Inherited from

LexicalNode.createDOM

Defined in

packages/lexical/src/LexicalNode.ts:769


createParentElementNode

createParentElementNode(): ElementNode

The creation logic for any required parent. Should be implemented if isParentRequired returns true.

Returns

ElementNode

Inherited from

LexicalNode.createParentElementNode

Defined in

packages/lexical/src/LexicalNode.ts:1048


excludeFromCopy

excludeFromCopy(destination?): boolean

Parameters

NameType
destination?"clone" | "html"

Returns

boolean

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:544


exportDOM

exportDOM(editor): DOMExportOutput

Controls how the this node is serialized to HTML. This is important for copy and paste between Lexical and non-Lexical editors, or Lexical editors with different namespaces, in which case the primary transfer format is HTML. It's also important if you're serializing to HTML for any other reason via $generateHtmlFromNodes. You could also use this method to build your own HTML renderer.

Parameters

NameType
editorLexicalEditor

Returns

DOMExportOutput

Inherited from

LexicalNode.exportDOM

Defined in

packages/lexical/src/LexicalNode.ts:799


exportJSON

exportJSON(): SerializedElementNode<SerializedLexicalNode>

Controls how the this node is serialized to JSON. This is important for copy and paste between Lexical editors sharing the same namespace. It's also important if you're serializing to JSON for persistent storage somewhere. See Serialization & Deserialization.

Returns

SerializedElementNode<SerializedLexicalNode>

Inherited from

LexicalNode.exportJSON

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:516


extractWithChild

extractWithChild(child, selection, destination): boolean

Parameters

NameType
childLexicalNode
selectionnull | BaseSelection
destination"clone" | "html"

Returns

boolean

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:578


getAllTextNodes

getAllTextNodes(): TextNode[]

Returns

TextNode[]

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:147


getChildAtIndex

getChildAtIndex<T>(index): null | T

Type parameters

NameType
Textends LexicalNode

Parameters

NameType
indexnumber

Returns

null | T

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:228


getChildren

getChildren<T>(): T[]

Type parameters

NameType
Textends LexicalNode

Returns

T[]

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:112


getChildrenKeys

getChildrenKeys(): string[]

Returns

string[]

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:121


getChildrenSize

getChildrenSize(): number

Returns

number

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:130


getCommonAncestor

getCommonAncestor<T>(node): null | T

Returns the closest common ancestor of this node and the provided one or null if one cannot be found.

Type parameters

NameType
Textends ElementNode = ElementNode

Parameters

NameTypeDescription
nodeLexicalNodethe other node to find the common ancestor of.

Returns

null | T

Inherited from

LexicalNode.getCommonAncestor

Defined in

packages/lexical/src/LexicalNode.ts:508


getDescendantByIndex

getDescendantByIndex<T>(index): null | T

Type parameters

NameType
Textends LexicalNode

Parameters

NameType
indexnumber

Returns

null | T

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:184


getDirection

getDirection(): null | "ltr" | "rtl"

Returns

null | "ltr" | "rtl"

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:289


getFirstChild

getFirstChild<T>(): null | T

Type parameters

NameType
Textends LexicalNode

Returns

null | T

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:204


getFirstChildOrThrow

getFirstChildOrThrow<T>(): T

Type parameters

NameType
Textends LexicalNode

Returns

T

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:209


getFirstDescendant

getFirstDescendant<T>(): null | T

Type parameters

NameType
Textends LexicalNode

Returns

null | T

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:162


getFormat

getFormat(): number

Returns

number

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:96


getFormatType

getFormatType(): ElementFormatType

Returns

ElementFormatType

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:100


getIndent

getIndent(): number

Returns

number

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:108


getIndexWithinParent

getIndexWithinParent(): number

Returns the zero-based index of this node within the parent.

Returns

number

Inherited from

LexicalNode.getIndexWithinParent

Defined in

packages/lexical/src/LexicalNode.ts:336


getKey

getKey(): string

Returns this nodes key.

Returns

string

Inherited from

LexicalNode.getKey

Defined in

packages/lexical/src/LexicalNode.ts:328


getLastChild

getLastChild<T>(): null | T

Type parameters

NameType
Textends LexicalNode

Returns

null | T

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:216


getLastChildOrThrow

getLastChildOrThrow<T>(): T

Type parameters

NameType
Textends LexicalNode

Returns

T

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:221


getLastDescendant

getLastDescendant<T>(): null | T

Type parameters

NameType
Textends LexicalNode

Returns

null | T

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:173


getLatest

getLatest(): this

Returns the latest version of the node from the active EditorState. This is used to avoid getting values from stale node references.

Returns

this

Inherited from

LexicalNode.getLatest

Defined in

packages/lexical/src/LexicalNode.ts:694


getNextSibling

getNextSibling<T>(): null | T

Returns the "next" siblings - that is, the node that comes after this one in the same parent

Type parameters

NameType
Textends LexicalNode

Returns

null | T

Inherited from

LexicalNode.getNextSibling

Defined in

packages/lexical/src/LexicalNode.ts:481


getNextSiblings

getNextSiblings<T>(): T[]

Returns all "next" siblings - that is, the nodes that come between this one and the last child of it's parent, inclusive.

Type parameters

NameType
Textends LexicalNode

Returns

T[]

Inherited from

LexicalNode.getNextSiblings

Defined in

packages/lexical/src/LexicalNode.ts:492


getNodesBetween

getNodesBetween(targetNode): LexicalNode[]

Returns a list of nodes that are between this node and the target node in the EditorState.

Parameters

NameTypeDescription
targetNodeLexicalNodethe node that marks the other end of the range of nodes to be returned.

Returns

LexicalNode[]

Inherited from

LexicalNode.getNodesBetween

Defined in

packages/lexical/src/LexicalNode.ts:613


getParent

getParent<T>(): null | T

Returns the parent of this node, or null if none is found.

Type parameters

NameType
Textends ElementNode

Returns

null | T

Inherited from

LexicalNode.getParent

Defined in

packages/lexical/src/LexicalNode.ts:356


getParentKeys

getParentKeys(): string[]

Returns a list of the keys of every ancestor of this node, all the way up to the RootNode.

Returns

string[]

Inherited from

LexicalNode.getParentKeys

Defined in

packages/lexical/src/LexicalNode.ts:433


getParentOrThrow

getParentOrThrow<T>(): T

Returns the parent of this node, or throws if none is found.

Type parameters

NameType
Textends ElementNode

Returns

T

Inherited from

LexicalNode.getParentOrThrow

Defined in

packages/lexical/src/LexicalNode.ts:367


getParents

getParents(): ElementNode[]

Returns a list of the every ancestor of this node, all the way up to the RootNode.

Returns

ElementNode[]

Inherited from

LexicalNode.getParents

Defined in

packages/lexical/src/LexicalNode.ts:418


getPreviousSibling

getPreviousSibling<T>(): null | T

Returns the "previous" siblings - that is, the node that comes before this one in the same parent.

Type parameters

NameType
Textends LexicalNode

Returns

null | T

Inherited from

LexicalNode.getPreviousSibling

Defined in

packages/lexical/src/LexicalNode.ts:448


getPreviousSiblings

getPreviousSiblings<T>(): T[]

Returns the "previous" siblings - that is, the nodes that come between this one and the first child of it's parent, inclusive.

Type parameters

NameType
Textends LexicalNode

Returns

T[]

Inherited from

LexicalNode.getPreviousSiblings

Defined in

packages/lexical/src/LexicalNode.ts:459


getStyle

getStyle(): string

Returns

string

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:104


getTextContent

getTextContent(): string

Returns the text content of the node. Override this for custom nodes that should have a representation in plain text format (for copy + paste, for example)

Returns

string

Inherited from

LexicalNode.getTextContent

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:255


getTextContentSize

getTextContentSize(): number

Returns the length of the string produced by calling getTextContent on this node.

Returns

number

Inherited from

LexicalNode.getTextContentSize

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:272


getTopLevelElement

getTopLevelElement(): null | ElementNode

Returns the highest (in the EditorState tree) non-root ancestor of this node, or null if none is found. See $isRootOrShadowRoot for more information on which Elements comprise "roots".

Returns

null | ElementNode

Inherited from

LexicalNode.getTopLevelElement

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:62


getTopLevelElementOrThrow

getTopLevelElementOrThrow(): ElementNode

Returns the highest (in the EditorState tree) non-root ancestor of this node, or throws if none is found. See $isRootOrShadowRoot for more information on which Elements comprise "roots".

Returns

ElementNode

Inherited from

LexicalNode.getTopLevelElementOrThrow

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:63


getType

getType(): string

Returns the string type of this node.

Returns

string

Inherited from

LexicalNode.getType

Defined in

packages/lexical/src/LexicalNode.ts:230


getWritable

getWritable(): this

Returns a mutable version of the node. Will throw an error if called outside of a Lexical Editor LexicalEditor.update callback.

Returns

this

Inherited from

LexicalNode.getWritable

Defined in

packages/lexical/src/LexicalNode.ts:710


hasFormat

hasFormat(type): boolean

Parameters

NameType
typeElementFormatType

Returns

boolean

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:293


insertAfter

insertAfter(nodeToInsert, restoreSelection?): LexicalNode

Inserts a node after this LexicalNode (as the next sibling).

Parameters

NameTypeDefault valueDescription
nodeToInsertLexicalNodeundefinedThe node to insert after this one.
restoreSelectionbooleantrueWhether or not to attempt to resolve the selection to the appropriate place after the operation is complete.

Returns

LexicalNode

Inherited from

LexicalNode.insertAfter

Defined in

packages/lexical/src/LexicalNode.ts:933


insertBefore

insertBefore(nodeToInsert, restoreSelection?): LexicalNode

Inserts a node before this LexicalNode (as the previous sibling).

Parameters

NameTypeDefault valueDescription
nodeToInsertLexicalNodeundefinedThe node to insert before this one.
restoreSelectionbooleantrueWhether or not to attempt to resolve the selection to the appropriate place after the operation is complete.

Returns

LexicalNode

Inherited from

LexicalNode.insertBefore

Defined in

packages/lexical/src/LexicalNode.ts:1000


insertNewAfter

insertNewAfter(selection, restoreSelection?): null | LexicalNode

Parameters

NameType
selectionRangeSelection
restoreSelection?boolean

Returns

null | LexicalNode

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:527


is

is(object): boolean

Returns true if the provided node is the exact same one as this node, from Lexical's perspective. Always use this instead of referential equality.

Parameters

NameTypeDescription
objectundefined | null | LexicalNodethe node to perform the equality comparison on.

Returns

boolean

Inherited from

LexicalNode.is

Defined in

packages/lexical/src/LexicalNode.ts:540


isAttached

isAttached(): boolean

Returns true if there is a path between this node and the RootNode, false otherwise. This is a way of determining if the node is "attached" EditorState. Unattached nodes won't be reconciled and will ultimatelt be cleaned up by the Lexical GC.

Returns

boolean

Inherited from

LexicalNode.isAttached

Defined in

packages/lexical/src/LexicalNode.ts:247


isBefore

isBefore(targetNode): boolean

Returns true if this node logical precedes the target node in the editor state.

Parameters

NameTypeDescription
targetNodeLexicalNodethe node we're testing to see if it's after this one.

Returns

boolean

Inherited from

LexicalNode.isBefore

Defined in

packages/lexical/src/LexicalNode.ts:552


isDirty

isDirty(): boolean

Returns true if this node has been marked dirty during this update cycle.

Returns

boolean

Inherited from

LexicalNode.isDirty

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:137


isEmpty

isEmpty(): boolean

Returns

boolean

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:134


isInline

isInline(): boolean

Returns

boolean

Inherited from

LexicalNode.isInline

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:564


isLastChild

isLastChild(): boolean

Returns

boolean

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:142


isParentOf

isParentOf(targetNode): boolean

Returns true if this node is the parent of the target node, false otherwise.

Parameters

NameTypeDescription
targetNodeLexicalNodethe would-be child node.

Returns

boolean

Inherited from

LexicalNode.isParentOf

Defined in

packages/lexical/src/LexicalNode.ts:591


isParentRequired

isParentRequired(): boolean

Whether or not this node has a required parent. Used during copy + paste operations to normalize nodes that would otherwise be orphaned. For example, ListItemNodes without a ListNode parent or TextNodes with a ParagraphNode parent.

Returns

boolean

Inherited from

LexicalNode.isParentRequired

Defined in

packages/lexical/src/LexicalNode.ts:1040


isSelected

isSelected(selection?): boolean

Returns true if this node is contained within the provided Selection., false otherwise. Relies on the algorithms implemented in BaseSelection.getNodes to determine what's included.

Parameters

NameTypeDescription
selection?null | BaseSelectionThe selection that we want to determine if the node is in.

Returns

boolean

Inherited from

LexicalNode.isSelected

Defined in

packages/lexical/src/LexicalNode.ts:271


isShadowRoot

isShadowRoot(): boolean

Returns

boolean

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:571


markDirty

markDirty(): void

Marks a node dirty, triggering transforms and forcing it to be reconciled during the update cycle.

Returns

void

Inherited from

LexicalNode.markDirty

Defined in

packages/lexical/src/LexicalNode.ts:1109


remove

remove(preserveEmptyParent?): void

Removes this LexicalNode from the EditorState. If the node isn't re-inserted somewhere, the Lexical garbage collector will eventually clean it up.

Parameters

NameTypeDescription
preserveEmptyParent?booleanIf falsy, the node's parent will be removed if it's empty after the removal operation. This is the default behavior, subject to other node heuristics such as ElementNode#canBeEmpty

Returns

void

Inherited from

LexicalNode.remove

Defined in

packages/lexical/src/LexicalNode.ts:852


replace

replace<N>(replaceWith, includeChildren?): N

Replaces this LexicalNode with the provided node, optionally transferring the children of the replaced node to the replacing node.

Type parameters

NameType
Nextends LexicalNode

Parameters

NameTypeDescription
replaceWithNThe node to replace this one with.
includeChildren?booleanWhether or not to transfer the children of this node to the replacing node.

Returns

N

Inherited from

LexicalNode.replace

Defined in

packages/lexical/src/LexicalNode.ts:863


select

select(_anchorOffset?, _focusOffset?): RangeSelection

Parameters

NameType
_anchorOffset?number
_focusOffset?number

Returns

RangeSelection

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:303


selectEnd

selectEnd(): RangeSelection

Returns

RangeSelection

Inherited from

LexicalNode.selectEnd

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:352


selectNext

selectNext(anchorOffset?, focusOffset?): RangeSelection

Moves selection to the next sibling of this node, at the specified offsets.

Parameters

NameTypeDescription
anchorOffset?numberThe anchor offset for selection.
focusOffset?numberThe focus offset for selection

Returns

RangeSelection

Inherited from

LexicalNode.selectNext

Defined in

packages/lexical/src/LexicalNode.ts:1088


selectPrevious

selectPrevious(anchorOffset?, focusOffset?): RangeSelection

Moves selection to the previous sibling of this node, at the specified offsets.

Parameters

NameTypeDescription
anchorOffset?numberThe anchor offset for selection.
focusOffset?numberThe focus offset for selection

Returns

RangeSelection

Inherited from

LexicalNode.selectPrevious

Defined in

packages/lexical/src/LexicalNode.ts:1066


selectStart

selectStart(): RangeSelection

Returns

RangeSelection

Inherited from

LexicalNode.selectStart

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:348


setDirection

setDirection(direction): this

Parameters

NameType
directionnull | "ltr" | "rtl"

Returns

this

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:365


setFormat

setFormat(type): this

Parameters

NameType
typeElementFormatType

Returns

this

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:370


setIndent

setIndent(indentLevel): this

Parameters

NameType
indentLevelnumber

Returns

this

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:380


setStyle

setStyle(style): this

Parameters

NameType
stylestring

Returns

this

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:375


splice

splice(start, deleteCount, nodesToInsert): this

Parameters

NameType
startnumber
deleteCountnumber
nodesToInsertLexicalNode[]

Returns

this

Defined in

packages/lexical/src/nodes/LexicalElementNode.ts:385


updateDOM

updateDOM(_prevNode, _dom, _config): boolean

Called when a node changes and should update the DOM in whatever way is necessary to make it align with any changes that might have happened during the update.

Returning "true" here will cause lexical to unmount and recreate the DOM node (by calling createDOM). You would need to do this if the element tag changes, for instance.

Parameters

NameType
_prevNodeunknown
_domHTMLElement
_configEditorConfig

Returns

boolean

Inherited from

LexicalNode.updateDOM

Defined in

packages/lexical/src/LexicalNode.ts:783


clone

clone(_data): LexicalNode

Clones this node, creating a new node with a different key and adding it to the EditorState (but not attaching it anywhere!). All nodes must implement this method.

Parameters

NameType
_dataunknown

Returns

LexicalNode

Inherited from

LexicalNode.clone

Defined in

packages/lexical/src/LexicalNode.ts:200


getType

getType(): string

Returns the string type of this node. Every node must implement this and it MUST BE UNIQUE amongst nodes registered on the editor.

Returns

string

Inherited from

LexicalNode.getType

Defined in

packages/lexical/src/LexicalNode.ts:186


importJSON

importJSON(_serializedNode): LexicalNode

Controls how the this node is deserialized from JSON. This is usually boilerplate, but provides an abstraction between the node implementation and serialized interface that can be important if you ever make breaking changes to a node schema (by adding or removing properties). See Serialization & Deserialization.

Parameters

NameType
_serializedNodeSerializedLexicalNode

Returns

LexicalNode

Inherited from

LexicalNode.importJSON

Defined in

packages/lexical/src/LexicalNode.ts:822


transform

transform(): null | (node: LexicalNode) => void

Registers the returned function as a transform on the node during Editor initialization. Most such use cases should be addressed via the LexicalEditor.registerNodeTransform API.

Experimental - use at your own risk.

Returns

null | (node: LexicalNode) => void

Inherited from

LexicalNode.transform

Defined in

packages/lexical/src/LexicalNode.ts:838