Override this to implement the new static node configuration protocol, this method is called directly on the prototype and must not depend on anything initialized in the constructor. Generally it should be a trivial implementation.

Returns

BaseStaticNodeConfig

Example

class MyNode extends TextNode {
  $config() {
    return this.config('my-node', {extends: TextNode});
  }
}

Inherited from

DecoratorNode.$config

afterCloneFrom()

afterCloneFrom(prevNode): void

Defined in: packages/lexical-react/src/LexicalDecoratorBlockNode.ts:36

Perform any state updates on the clone of prevNode that are not already handled by the constructor call in the static clone method. If you have state to update in your clone that is not handled directly by the constructor, it is advisable to override this method but it is required to include a call to super.afterCloneFrom(prevNode) in your implementation. This is only intended to be called by $cloneWithProperties function or via a super call.

Parameters

prevNode

this

Returns

void

Example

class ClassesTextNode extends TextNode {
  // Not shown: static getType, static importJSON, exportJSON, createDOM, updateDOM
  __classes = new Set<string>();
  static clone(node: ClassesTextNode): ClassesTextNode {
    // The inherited TextNode constructor is used here, so
    // classes is not set by this method.
    return new ClassesTextNode(node.__text, node.__key);
  }
  afterCloneFrom(node: this): void {
    // This calls TextNode.afterCloneFrom and LexicalNode.afterCloneFrom
    // for necessary state updates
    super.afterCloneFrom(node);
    this.__addClasses(node.__classes);
  }
  // This method is a private implementation detail, it is not
  // suitable for the public API because it does not call getWritable
  __addClasses(classNames: Iterable<string>): this {
    for (const className of classNames) {
      this.__classes.add(className);
    }
    return this;
  }
  addClass(...classNames: string[]): this {
    return this.getWritable().__addClasses(classNames);
  }
  removeClass(...classNames: string[]): this {
    const node = this.getWritable();
    for (const className of classNames) {
      this.__classes.delete(className);
    }
    return this;
  }
  getClasses(): Set<string> {
    return this.getLatest().__classes;
  }
}

Overrides

DecoratorNode.afterCloneFrom

canIndent()

canIndent(): false

Defined in: packages/lexical-react/src/LexicalDecoratorBlockNode.ts:56

Returns

false

config()

config<Type, Config>(type, config): StaticNodeConfigRecord<Type, Config>

Defined in: packages/lexical/src/LexicalNode.ts:547

This is a convenience method for $config that aids in type inference. See LexicalNode.$config for example usage.

Type Parameters

Type

Type extends string

Config

Config extends StaticNodeConfigValue<DecoratorBlockNode, Type>

Parameters

type

Type

config

Config

Returns

StaticNodeConfigRecord<Type, Config>

Inherited from

DecoratorNode.config

createDOM()

createDOM(): HTMLElement

Defined in: packages/lexical-react/src/LexicalDecoratorBlockNode.ts:60

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 lifecycle.

Returns

HTMLElement

Overrides

DecoratorNode.createDOM

createParentElementNode()

createParentElementNode(): ElementNode

Defined in: packages/lexical/src/LexicalNode.ts:1573

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

Returns

ElementNode

Inherited from

DecoratorNode.createParentElementNode

decorate()

decorate(editor, config): Element | null

Defined in: packages/lexical/src/nodes/LexicalDecoratorNode.ts:30

The returned value is added to the LexicalEditor._decorators

Parameters

editor

LexicalEditor

config

EditorConfig

Returns

Element | null

Inherited from

DecoratorNode.decorate

exportDOM()

exportDOM(editor): DOMExportOutput

Defined in: packages/lexical/src/LexicalNode.ts:1204

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

exportJSON()

exportJSON(): SerializedDecoratorBlockNode

Defined in: packages/lexical-react/src/LexicalDecoratorBlockNode.ts:41

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

SerializedDecoratorBlockNode

Overrides

DecoratorNode.exportJSON

getCommonAncestor()

getCommonAncestor<T>(node): T | null

Defined in: packages/lexical/src/LexicalNode.ts:923

Type Parameters

T

T extends ElementNode = ElementNode

Parameters

node

LexicalNode

the other node to find the common ancestor of.

Returns

T | null

Deprecated

use $getCommonAncestor

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

Inherited from

DecoratorNode.getCommonAncestor

getDOMSlot()

getDOMSlot(element): DOMSlot<HTMLElement>

Defined in: packages/lexical/src/LexicalNode.ts:1192

Experimental

Returns a DOMSlot pointing at the content-bearing element of this node's DOM. The default returns a slot wrapping the keyed DOM as-is.

Override this when createDOM returns a wrapper around the content-bearing element (e.g. <span><br/></span> for a styled line break), so selection / reconciliation logic can target the inner element.

ElementNode overrides this to return an ElementDOMSlot with children-management semantics (used by the reconciler to place managed children).

Parameters

element

HTMLElement

Returns

DOMSlot<HTMLElement>

Inherited from

DecoratorNode.getDOMSlot

getFormat()

getFormat(): ElementFormatType

Defined in: packages/lexical-react/src/LexicalDecoratorBlockNode.ts:74

Returns

ElementFormatType

getIndexWithinParent()

getIndexWithinParent(): number

Defined in: packages/lexical/src/LexicalNode.ts:749

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

Returns

number

Inherited from

DecoratorNode.getIndexWithinParent

getKey()

getKey(): string

Defined in: packages/lexical/src/LexicalNode.ts:741

Returns this nodes key.

Returns

string

Inherited from

DecoratorNode.getKey

getLatest()

getLatest(): this

Defined in: packages/lexical/src/LexicalNode.ts:1074

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

DecoratorNode.getLatest

getNextSibling()

getNextSibling<T>(): T | null

Defined in: packages/lexical/src/LexicalNode.ts:894

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

Type Parameters

T

T extends LexicalNode

Returns

T | null

Inherited from

DecoratorNode.getNextSibling

getNextSiblings()

getNextSiblings<T>(): T[]

Defined in: packages/lexical/src/LexicalNode.ts:905

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

Type Parameters

T

T extends LexicalNode

Returns

T[]

Inherited from

DecoratorNode.getNextSiblings

getNodesBetween()

getNodesBetween(targetNode): LexicalNode[]

Defined in: packages/lexical/src/LexicalNode.ts:993

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

Parameters

targetNode

LexicalNode

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

Returns

LexicalNode[]

Inherited from

DecoratorNode.getNodesBetween

getParent()

getParent<T>(): T | null

Defined in: packages/lexical/src/LexicalNode.ts:769

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

Type Parameters

T

T extends ElementNode

Returns

T | null

Inherited from

DecoratorNode.getParent

getParentKeys()

getParentKeys(): string[]

Defined in: packages/lexical/src/LexicalNode.ts:846

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

Returns

string[]

Inherited from

DecoratorNode.getParentKeys

getParentOrThrow()

getParentOrThrow<T>(): T

Defined in: packages/lexical/src/LexicalNode.ts:780

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

Type Parameters

T

T extends ElementNode

Returns

T

Inherited from

DecoratorNode.getParentOrThrow

getParents()

getParents(): ElementNode[]

Defined in: packages/lexical/src/LexicalNode.ts:831

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

Returns

ElementNode[]

Inherited from

DecoratorNode.getParents

getPreviousSibling()

getPreviousSibling<T>(): T | null

Defined in: packages/lexical/src/LexicalNode.ts:861

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

Type Parameters

T

T extends LexicalNode

Returns

T | null

Inherited from

DecoratorNode.getPreviousSibling

getPreviousSiblings()

getPreviousSiblings<T>(): T[]

Defined in: packages/lexical/src/LexicalNode.ts:872

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

Type Parameters

T

T extends LexicalNode

Returns

T[]

Inherited from

DecoratorNode.getPreviousSiblings

getTextContent()

getTextContent(): string

Defined in: packages/lexical/src/LexicalNode.ts:1130

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

DecoratorNode.getTextContent

getTextContentSize()

getTextContentSize(): number

Defined in: packages/lexical/src/LexicalNode.ts:1138

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

Returns

number

Inherited from

DecoratorNode.getTextContentSize

getTopLevelElement()

getTopLevelElement(): ElementNode | DecoratorBlockNode | null

Defined in: packages/lexical/src/nodes/LexicalDecoratorNode.ts:17

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

ElementNode | DecoratorBlockNode | null

Inherited from

DecoratorNode.getTopLevelElement

getTopLevelElementOrThrow()

getTopLevelElementOrThrow(): ElementNode | DecoratorBlockNode

Defined in: packages/lexical/src/nodes/LexicalDecoratorNode.ts:18

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 | DecoratorBlockNode

Inherited from

DecoratorNode.getTopLevelElementOrThrow

getType()

getType(): string

Defined in: packages/lexical/src/LexicalNode.ts:655

Returns the string type of this node.

Returns

string

Inherited from

DecoratorNode.getType

getWritable()

getWritable(): this

Defined in: packages/lexical/src/LexicalNode.ts:1094

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

Returns

this

Inherited from

DecoratorNode.getWritable

insertAfter()

insertAfter(nodeToInsert, restoreSelection?): LexicalNode

Defined in: packages/lexical/src/LexicalNode.ts:1424

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

Parameters

nodeToInsert

LexicalNode

The node to insert after this one.

restoreSelection?

boolean = true

Whether or not to attempt to resolve the selection to the appropriate place after the operation is complete.

Returns

LexicalNode

Inherited from

DecoratorNode.insertAfter

insertBefore()

insertBefore(nodeToInsert, restoreSelection?): LexicalNode

Defined in: packages/lexical/src/LexicalNode.ts:1505

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

Parameters

nodeToInsert

LexicalNode

The node to insert before this one.

restoreSelection?

boolean = true

Whether or not to attempt to resolve the selection to the appropriate place after the operation is complete.

Returns

LexicalNode

Inherited from

DecoratorNode.insertBefore

is()

is(object): boolean

Defined in: packages/lexical/src/LexicalNode.ts:940

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

object

LexicalNode | null | undefined

the node to perform the equality comparison on.

Returns

boolean

Inherited from

DecoratorNode.is

isAttached()

isAttached(): boolean

Defined in: packages/lexical/src/LexicalNode.ts:672

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 ultimately be cleaned up by the Lexical GC.

Returns

boolean

Inherited from

DecoratorNode.isAttached

isBefore()

isBefore(targetNode): boolean

Defined in: packages/lexical/src/LexicalNode.ts:958

Returns true if this node logically precedes the target node in the editor state, false otherwise (including if there is no common ancestor).

Note that this notion of isBefore is based on post-order; a descendant node is always before its ancestors. See also $getCommonAncestor and $comparePointCaretNext for more flexible ways to determine the relative positions of nodes.

Parameters

targetNode

LexicalNode

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

Returns

boolean

Inherited from

DecoratorNode.isBefore

isDirty()

isDirty(): boolean

Defined in: packages/lexical/src/LexicalNode.ts:1063

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

Returns

boolean

Inherited from

DecoratorNode.isDirty

isInline()

isInline(): false

Defined in: packages/lexical-react/src/LexicalDecoratorBlockNode.ts:78

Returns

false

Overrides

DecoratorNode.isInline

isIsolated()

isIsolated(): boolean

Defined in: packages/lexical/src/nodes/LexicalDecoratorNode.ts:34

Returns

boolean

Inherited from

DecoratorNode.isIsolated

isKeyboardSelectable()

isKeyboardSelectable(): boolean

Defined in: packages/lexical/src/nodes/LexicalDecoratorNode.ts:42

Returns

boolean

Inherited from

DecoratorNode.isKeyboardSelectable

isParentOf()

isParentOf(targetNode): boolean

Defined in: packages/lexical/src/LexicalNode.ts:981

Returns true if this node is an ancestor of and distinct from the target node, false otherwise.

Parameters

targetNode

LexicalNode

the would-be child node.

Returns

boolean

Inherited from

DecoratorNode.isParentOf

isParentRequired()

isParentRequired(): boolean

Defined in: packages/lexical/src/LexicalNode.ts:1565

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

DecoratorNode.isParentRequired

isSelected()

isSelected(selection?): boolean

Defined in: packages/lexical/src/LexicalNode.ts:696

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

selection?

BaseSelection | null

The selection that we want to determine if the node is in.

Returns

boolean

Inherited from

DecoratorNode.isSelected

markDirty()

markDirty(): void

Defined in: packages/lexical/src/LexicalNode.ts:1634

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

Returns

void

Inherited from

DecoratorNode.markDirty

remove()

remove(preserveEmptyParent?): void

Defined in: packages/lexical/src/LexicalNode.ts:1297

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

Parameters

preserveEmptyParent?

boolean

If 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

DecoratorNode.remove

replace()

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

Defined in: packages/lexical/src/LexicalNode.ts:1308

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

Type Parameters

N

N extends LexicalNode

Parameters

replaceWith

N

The node to replace this one with.

includeChildren?

boolean

Whether or not to transfer the children of this node to the replacing node.

Returns

N

Inherited from

DecoratorNode.replace

resetOnCopyNodeFrom()

resetOnCopyNodeFrom(originalNode): void

Defined in: packages/lexical/src/LexicalNode.ts:623

Reset state in this copy of originalNode, if necessary

Parameters

originalNode

this

Returns

void

Inherited from

DecoratorNode.resetOnCopyNodeFrom

selectEnd()

selectEnd(): RangeSelection

Defined in: packages/lexical/src/LexicalNode.ts:1581

Returns

RangeSelection

Inherited from

DecoratorNode.selectEnd

selectNext()

selectNext(anchorOffset?, focusOffset?): RangeSelection

Defined in: packages/lexical/src/LexicalNode.ts:1613

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

Parameters

anchorOffset?

number

The anchor offset for selection.

focusOffset?

number

The focus offset for selection

Returns

RangeSelection

Inherited from

DecoratorNode.selectNext

selectPrevious()

selectPrevious(anchorOffset?, focusOffset?): RangeSelection

Defined in: packages/lexical/src/LexicalNode.ts:1591

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

Parameters

anchorOffset?

number

The anchor offset for selection.

focusOffset?

number

The focus offset for selection

Returns

RangeSelection

Inherited from

DecoratorNode.selectPrevious

selectStart()

selectStart(): RangeSelection

Defined in: packages/lexical/src/LexicalNode.ts:1577

Returns

RangeSelection

Inherited from

DecoratorNode.selectStart

setFormat()

setFormat(format): this

Defined in: packages/lexical-react/src/LexicalDecoratorBlockNode.ts:68

Parameters

format

ElementFormatType

Returns

this

updateDOM()

updateDOM(): false

Defined in: packages/lexical-react/src/LexicalDecoratorBlockNode.ts:64

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.

Returns

false

Overrides

DecoratorNode.updateDOM

updateFromJSON()

updateFromJSON(serializedNode): this

Defined in: packages/lexical-react/src/LexicalDecoratorBlockNode.ts:48

Update this LexicalNode instance from serialized JSON. It's recommended to implement as much logic as possible in this method instead of the static importJSON method, so that the functionality can be inherited in subclasses.

The LexicalUpdateJSON utility type should be used to ignore any type, version, or children properties in the JSON so that the extended JSON from subclasses are acceptable parameters for the super call.

If overridden, this method must call super.

Parameters

serializedNode

LexicalUpdateJSON<SerializedDecoratorBlockNode>

Returns

this

Example

class MyTextNode extends TextNode {
  // ...
  static importJSON(serializedNode: SerializedMyTextNode): MyTextNode {
    return $createMyTextNode()
      .updateFromJSON(serializedNode);
  }
  updateFromJSON(
    serializedNode: LexicalUpdateJSON<SerializedMyTextNode>,
  ): this {
    return super.updateFromJSON(serializedNode)
      .setMyProperty(serializedNode.myProperty);
  }
}

Overrides

DecoratorNode.updateFromJSON

clone()

static clone(_data): LexicalNode

Defined in: packages/lexical/src/LexicalNode.ts:515

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

_data

unknown

Returns

LexicalNode

Inherited from

DecoratorNode.clone

getType()

static getType(): string

Defined in: packages/lexical/src/LexicalNode.ts:499

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

DecoratorNode.getType

importJSON()

static importJSON(_serializedNode): LexicalNode

Defined in: packages/lexical/src/LexicalNode.ts:1232

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

_serializedNode

SerializedLexicalNode

Returns

LexicalNode

Inherited from

DecoratorNode.importJSON

transform()

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

Defined in: packages/lexical/src/LexicalNode.ts:1283

Experimental

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

((node) => void) | null

Inherited from

DecoratorNode.transform

Type Aliases

SerializedDecoratorBlockNode

SerializedDecoratorBlockNode = Spread<{ format: ElementFormatType; }, SerializedLexicalNode>

Defined in: packages/lexical-react/src/LexicalDecoratorBlockNode.ts:21

Functions

$isDecoratorBlockNode()

$isDecoratorBlockNode(node): node is DecoratorBlockNode

Defined in: packages/lexical-react/src/LexicalDecoratorBlockNode.ts:83

Parameters

node

LexicalNode | null | undefined

Returns

node is DecoratorBlockNode

Classes​

DecoratorBlockNode​

Extends​

Constructors​

Constructor​

Parameters​

format?​

key?​

Returns​

Overrides​

Properties​

__format​

importDOM?​

Returns​

Inherited from​

Methods​

$config()​

Returns​

Example​

Inherited from​

afterCloneFrom()​

Parameters​

prevNode​

Returns​

Example​

Overrides​

canIndent()​

Returns​

config()​

Type Parameters​

Type​

Config​

Parameters​

type​

config​

Returns​

Inherited from​

createDOM()​

Returns​

Overrides​

createParentElementNode()​

Returns​

Inherited from​

decorate()​

Parameters​

editor​

config​

Returns​

Inherited from​

exportDOM()​

Parameters​

editor​

Returns​

Inherited from​

exportJSON()​

Returns​

Overrides​

getCommonAncestor()​

Type Parameters​

T​

Parameters​

node​

Returns​

Deprecated​

Inherited from​

getDOMSlot()​

Parameters​

element​

Returns​

Inherited from​

getFormat()​

Returns​

getIndexWithinParent()​

Returns​

Inherited from​

getKey()​

Returns​

Inherited from​

getLatest()​

Returns​

Classes

DecoratorBlockNode

Extends

Constructors

Constructor

Parameters

format?

key?

Returns

Overrides

Properties

__format

importDOM?

Returns

Inherited from

Methods

$config()

Returns

Example

Inherited from

afterCloneFrom()

Parameters

prevNode

Returns

Example

Overrides

canIndent()

Returns

config()

Type Parameters

Type

Config

Parameters

type

config

Returns

Inherited from

createDOM()

Returns

Overrides

createParentElementNode()

Returns

Inherited from

decorate()

Parameters

editor

config

Returns

Inherited from

exportDOM()

Parameters

editor

Returns

Inherited from

exportJSON()

Returns

Overrides

getCommonAncestor()

Type Parameters

T

Parameters

node

Returns

Deprecated

Inherited from

getDOMSlot()

Parameters

element

Returns

Inherited from

getFormat()

Returns

getIndexWithinParent()

Returns

Inherited from

getKey()

Returns

Inherited from

getLatest()

Returns