@lexical/extension

DecoratorNode.constructor

Inherited from

Properties

importDOM?

static optional importDOM?: () => DOMConversionMap<any> | null

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

Returns

DOMConversionMap<any> | null

Inherited from

DecoratorNode.importDOM

Methods

$config()

$config(): BaseStaticNodeConfig & object & StaticNodeTypeAccessor<"decorator-text"> & StaticNodeConfigAccessor<{ extends: typeof DecoratorNode; stateConfigs: readonly [{ flat: true; stateConfig: StateConfig<"format", number>; }]; }>

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:50

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 & object & StaticNodeTypeAccessor<"decorator-text"> & StaticNodeConfigAccessor<{ extends: typeof DecoratorNode; stateConfigs: readonly [{ flat: true; stateConfig: StateConfig<"format", number>; }]; }>

Example

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

Overrides

DecoratorNode.$config

afterCloneFrom()

afterCloneFrom(prevNode): void

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

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;
  }
}

Inherited from

DecoratorNode.afterCloneFrom

config()

Call Signature

config<Config>(type, config): AbstractStaticNodeConfigRecord<Config>

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

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

An abstract base class that has no concrete node type may pass a well-known symbol (by convention Symbol.for(<NodeClassName>)) instead of a string type to declare configuration shared with its subclasses.

Type Parameters

Config

Config extends StaticNodeConfigValue<DecoratorTextNode, string>

Parameters

type

symbol

config

Config

Returns

AbstractStaticNodeConfigRecord<Config>

Inherited from

Call Signature

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

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

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<DecoratorTextNode, Type>

Parameters

type

Type

config

Config

Returns

StaticNodeConfigRecord<Type, Config>

Inherited from

createDOM()

createDOM(config, editor): HTMLElement

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:84

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.

Parameters

config

editor

DecoratorNode.createDOM

Returns

HTMLElement

Overrides

createParentElementNode()

createParentElementNode(): ElementNode

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

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

Returns

DecoratorNode.createParentElementNode

Inherited from

decorate()

decorate(editor, config): unknown

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

The returned value is added to the LexicalEditor._decorators

Parameters

editor

config

DecoratorNode.decorate

Returns

unknown

Inherited from

exportDOM()

exportDOM(editor): DOMExportOutput

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

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

editor

DecoratorNode.exportDOM

Returns

DOMExportOutput

Inherited from

exportJSON()

exportJSON(): SerializedLexicalNode

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

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

SerializedLexicalNode

Inherited from

DecoratorNode.exportJSON

getCommonAncestor()

getCommonAncestor<T>(node): T | null

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

Type Parameters

T

T extends ElementNode = ElementNode

Parameters

node

DecoratorNode.getCommonAncestor

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

getDOMSlot()

getDOMSlot(element): DOMSlot<HTMLElement>

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

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(version?): number

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:57

Parameters

version?

NodeStateVersion

Returns

number

Implementation of

InlineFormattableNode.getFormat

getFormatFlags()

getFormatFlags(type, alignWithFormat): number

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:61

Parameters

type

InlineFormattableNode.getFormatFlags

alignWithFormat

number | null

Returns

number

Implementation of

getIndexWithinParent()

getIndexWithinParent(): number

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

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:1010

Returns this nodes key.

Returns

string

Inherited from

DecoratorNode.getKey

getLatest()

getLatest(): this

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

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()

Call Signature

getNextSibling(): LexicalNode | null

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

Returns the node after this one in the same parent, or null if there is no such node.

Returns

LexicalNode | null

Inherited from

Call Signature

getNextSibling<T>(): T | null

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

Type Parameters

T

T extends LexicalNode

Returns

T | null

Deprecated

The type parameter is an unchecked and unsafe cast, equivalent to node.getNextSibling() as T | null, and will be removed in a future release. Call this method without a type argument and narrow the result with a type guard instead.

Inherited from

getNextSiblings()

Call Signature

getNextSiblings(): LexicalNode[]

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

Returns all nodes after this one in the same parent, in document order.

Returns

Inherited from

Call Signature

getNextSiblings<T>(): T[]

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

Type Parameters

T

T extends LexicalNode

Returns

T[]

Deprecated

The type parameter is an unchecked and unsafe cast, equivalent to node.getNextSiblings() as T[], and will be removed in a future release. Call this method without a type argument and narrow the results with a type guard instead.

Inherited from

getNodesBetween()

getNodesBetween(targetNode): LexicalNode[]

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

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

Parameters

targetNode

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

Returns

DecoratorNode.getNodesBetween

Inherited from

getParent()

Call Signature

getParent(): ElementNode | null

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

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

Returns

ElementNode | null

Inherited from

Call Signature

getParent<T>(): T | null

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

Type Parameters

T

T extends ElementNode

Returns

T | null

Deprecated

The type parameter is an unchecked and unsafe cast, equivalent to node.getParent() as T | null, and will be removed in a future release. Call this method without a type argument and narrow the result with a type guard instead.

Inherited from

DecoratorNode.getParentKeys

getParentKeys()

getParentKeys(): string[]

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

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

Returns

string[]

Inherited from

getParentOrThrow()

Call Signature

getParentOrThrow(): ElementNode

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

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

Returns

Inherited from

Call Signature

getParentOrThrow<T>(): T

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

Type Parameters

T

T extends ElementNode

Returns

T

Deprecated

The type parameter is an unchecked and unsafe cast, equivalent to node.getParentOrThrow() as T, and will be removed in a future release. Call this method without a type argument and narrow the result with a type guard instead.

Inherited from

DecoratorNode.getParents

getParents()

getParents(): ElementNode[]

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

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

Returns

ElementNode[]

Inherited from

getPreviousSibling()

Call Signature

getPreviousSibling(): LexicalNode | null

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

Returns the node before this one in the same parent, or null if there is no such node.

Returns

LexicalNode | null

Inherited from

Call Signature

getPreviousSibling<T>(): T | null

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

Type Parameters

T

T extends LexicalNode

Returns

T | null

Deprecated

The type parameter is an unchecked and unsafe cast, equivalent to node.getPreviousSibling() as T | null, and will be removed in a future release. Call this method without a type argument and narrow the result with a type guard instead.

Inherited from

getPreviousSiblings()

Call Signature

getPreviousSiblings(): LexicalNode[]

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

Returns all nodes before this one in the same parent, in document order.

Returns

Inherited from

Call Signature

getPreviousSiblings<T>(): T[]

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

Type Parameters

T

T extends LexicalNode

Returns

T[]

Deprecated

The type parameter is an unchecked and unsafe cast, equivalent to node.getPreviousSiblings() as T[], and will be removed in a future release. Call this method without a type argument and narrow the results with a type guard instead.

Inherited from

DecoratorNode.getTextContent

getTextContent()

getTextContent(): string

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

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

getTextContentSize()

getTextContentSize(): number

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

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

Returns

number

Inherited from

DecoratorNode.getTextContentSize

getTopLevelElement()

getTopLevelElement(): ElementNode | DecoratorTextNode | null

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

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 | DecoratorTextNode | null

Inherited from

DecoratorNode.getTopLevelElement

getTopLevelElementOrThrow()

getTopLevelElementOrThrow(): ElementNode | DecoratorTextNode

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

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

Inherited from

DecoratorNode.getTopLevelElementOrThrow

getType()

getType(): string

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

Returns the string type of this node.

Returns

string

Inherited from

DecoratorNode.getWritable

getWritable()

getWritable(): this

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

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

hasFormat()

hasFormat(type): boolean

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:65

Parameters

type

InlineFormattableNode.hasFormat

Returns

boolean

Implementation of

insertAfter()

insertAfter(nodeToInsert, restoreSelection?): LexicalNode

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

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

Parameters

nodeToInsert

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

DecoratorNode.insertAfter

Inherited from

insertBefore()

insertBefore(nodeToInsert, restoreSelection?): LexicalNode

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

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

Parameters

nodeToInsert

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

DecoratorNode.insertBefore

Inherited from

is()

is(object): boolean

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

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:938

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:1276

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

DecoratorNode.isBefore

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

Returns

boolean

Inherited from

isDirty()

isDirty(): boolean

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

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

Returns

boolean

Inherited from

DecoratorNode.isDirty

isInline()

isInline(): true

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:80

Returns

true

Overrides

DecoratorNode.isInline

isIsolated()

isIsolated(): boolean

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

Whether this decorator is isolated from caret interaction: an isolated decorator can not be traversed, extended over, selected as a node, or deleted by an adjacent caret operation. A caret that reaches one stops there, so an inline isolated decorator is only reachable by pointer.

Defaults to false, which lets the caret step over the decorator (and select it, when DecoratorNode.isKeyboardSelectable is also true).

Returns

boolean

Inherited from

DecoratorNode.isIsolated

isKeyboardSelectable()

isKeyboardSelectable(): boolean

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

Returns

boolean

Inherited from

DecoratorNode.isKeyboardSelectable

isParentOf()

isParentOf(targetNode): boolean

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

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

Parameters

targetNode

DecoratorNode.isParentOf

the would-be child node.

Returns

boolean

Inherited from

isParentRequired()

isParentRequired(): boolean

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

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:965

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:2059

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:1620

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:1637

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

Named slots are bound to their host node and are never transferred: this node keeps its slot map, so if it is reattached elsewhere (as $wrapNodeInElement does) its slots come with it, and if it stays detached the slot subtrees are garbage-collected along with it. To move a slot value onto another host, use $setSlot explicitly.

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:889

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:1992

Returns

DecoratorNode.selectEnd

Inherited from

selectNext()

selectNext(anchorOffset?, focusOffset?): RangeSelection

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

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

DecoratorNode.selectNext

Inherited from

selectPrevious()

selectPrevious(anchorOffset?, focusOffset?): RangeSelection

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

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

DecoratorNode.selectPrevious

Inherited from

selectStart()

selectStart(): RangeSelection

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

Returns

DecoratorNode.selectStart

Inherited from

setFormat()

setFormat(type): this

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:70

Parameters

type

StateValueOrUpdater<StateConfig<"format", number>>

Returns

this

Implementation of

InlineFormattableNode.setFormat

toggleFormat()

toggleFormat(type): this

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:74

Parameters

type

InlineFormattableNode.toggleFormat

Returns

this

Implementation of

updateDOM()

updateDOM(_prevNode, _dom, _config): boolean

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

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

_prevNode

unknown

_dom

HTMLElement

_config

DecoratorNode.updateDOM

Returns

boolean

Inherited from

updateFromJSON()

updateFromJSON(serializedNode): this

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

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

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);
  }
}

Inherited from

DecoratorNode.updateFromJSON

clone()

static clone(_data): LexicalNode

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

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

Inherited from

DecoratorNode.clone

getType()

static getType(): string

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

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

importJSON()

static importJSON(_serializedNode): LexicalNode

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

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 & Record<string, unknown>

Returns

DecoratorNode.importJSON

Inherited from

transform()

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

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

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

HorizontalRuleNode

Defined in: packages/lexical-extension/src/HorizontalRuleExtension.ts:63

Extends

DecoratorNode<unknown>

Extended by

HorizontalRuleNode

Constructors

Constructor

new HorizontalRuleNode(key?): HorizontalRuleNode

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

Parameters

key?

string

Returns

HorizontalRuleNode

Inherited from

DecoratorNode.constructor

Properties

importDOM?

static optional importDOM?: () => DOMConversionMap<any> | null

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

Returns

DOMConversionMap<any> | null

Inherited from

DecoratorNode.importDOM

Methods

$config()

$config(): BaseStaticNodeConfig & object

Defined in: packages/lexical-extension/src/HorizontalRuleExtension.ts:64

Returns

BaseStaticNodeConfig & object

Example

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

Overrides

DecoratorNode.$config

afterCloneFrom()

afterCloneFrom(prevNode): void

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

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;
  }
}

Inherited from

DecoratorNode.afterCloneFrom

config()

Call Signature

config<Config>(type, config): AbstractStaticNodeConfigRecord<Config>

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

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

Type Parameters

Config

Config extends StaticNodeConfigValue<HorizontalRuleNode, string>

Parameters

type

symbol

config

Config

Returns

AbstractStaticNodeConfigRecord<Config>

Inherited from

Call Signature

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

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

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<HorizontalRuleNode, Type>

Parameters

type

Type

config

Config

Returns

StaticNodeConfigRecord<Type, Config>

Inherited from

createDOM()

createDOM(config): HTMLElement

Defined in: packages/lexical-extension/src/HorizontalRuleExtension.ts:84

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.

Parameters

config

DecoratorNode.createDOM

Returns

HTMLElement

Overrides

createParentElementNode()

createParentElementNode(): ElementNode

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

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

Returns

DecoratorNode.createParentElementNode

Inherited from

decorate()

decorate(editor, config): unknown

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

The returned value is added to the LexicalEditor._decorators

Parameters

editor

config

DecoratorNode.decorate

Returns

unknown

Inherited from

exportDOM()

exportDOM(): DOMExportOutput

Defined in: packages/lexical-extension/src/HorizontalRuleExtension.ts:80

Returns

DOMExportOutput

Overrides

DecoratorNode.exportDOM

exportJSON()

exportJSON(): SerializedLexicalNode

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

Returns

SerializedLexicalNode

Inherited from

DecoratorNode.exportJSON

getCommonAncestor()

getCommonAncestor<T>(node): T | null

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

Type Parameters

T

T extends ElementNode = ElementNode

Parameters

node

DecoratorNode.getCommonAncestor

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

getDOMSlot()

getDOMSlot(element): DOMSlot<HTMLElement>

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

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.

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

getIndexWithinParent()

getIndexWithinParent(): number

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

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:1010

Returns this nodes key.

Returns

string

Inherited from

DecoratorNode.getKey

getLatest()

getLatest(): this

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

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()

Call Signature

getNextSibling(): LexicalNode | null

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

Returns the node after this one in the same parent, or null if there is no such node.

Returns

LexicalNode | null

Inherited from

Call Signature

getNextSibling<T>(): T | null

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

Type Parameters

T

T extends LexicalNode

Returns

T | null

Deprecated

Inherited from

getNextSiblings()

Call Signature

getNextSiblings(): LexicalNode[]

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

Returns all nodes after this one in the same parent, in document order.

Returns

Inherited from

Call Signature

getNextSiblings<T>(): T[]

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

Type Parameters

T

T extends LexicalNode

Returns

T[]

Deprecated

Inherited from

getNodesBetween()

getNodesBetween(targetNode): LexicalNode[]

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

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

Parameters

targetNode

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

Returns

DecoratorNode.getNodesBetween

Inherited from

getParent()

Call Signature

getParent(): ElementNode | null

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

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

Returns

ElementNode | null

Inherited from

Call Signature

getParent<T>(): T | null

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

Type Parameters

T

T extends ElementNode

Returns

T | null

Deprecated

Inherited from

DecoratorNode.getParentKeys

getParentKeys()

getParentKeys(): string[]

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

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

Returns

string[]

Inherited from

getParentOrThrow()

Call Signature

getParentOrThrow(): ElementNode

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

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

Returns

Inherited from

Call Signature

getParentOrThrow<T>(): T

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

Type Parameters

T

T extends ElementNode

Returns

T

Deprecated

Inherited from

DecoratorNode.getParents

getParents()

getParents(): ElementNode[]

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

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

Returns

ElementNode[]

Inherited from

getPreviousSibling()

Call Signature

getPreviousSibling(): LexicalNode | null

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

Returns the node before this one in the same parent, or null if there is no such node.

Returns

LexicalNode | null

Inherited from

Call Signature

getPreviousSibling<T>(): T | null

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

Type Parameters

T

T extends LexicalNode

Returns

T | null

Deprecated

Inherited from

getPreviousSiblings()

Call Signature

getPreviousSiblings(): LexicalNode[]

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

Returns all nodes before this one in the same parent, in document order.

Returns

Inherited from

Call Signature

getPreviousSiblings<T>(): T[]

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

Type Parameters

T

T extends LexicalNode

Returns

T[]

Deprecated

Inherited from

DecoratorNode.getTextContent

getTextContent()

getTextContent(): string

Defined in: packages/lexical-extension/src/HorizontalRuleExtension.ts:90

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

Overrides

getTextContentSize()

getTextContentSize(): number

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

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

Returns

number

Inherited from

DecoratorNode.getTextContentSize

getTopLevelElement()

getTopLevelElement(): ElementNode | HorizontalRuleNode | null

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

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 | HorizontalRuleNode | null

Inherited from

DecoratorNode.getTopLevelElement

getTopLevelElementOrThrow()

getTopLevelElementOrThrow(): ElementNode | HorizontalRuleNode

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

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

Inherited from

DecoratorNode.getTopLevelElementOrThrow

getType()

getType(): string

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

Returns the string type of this node.

Returns

string

Inherited from

DecoratorNode.getWritable

getWritable()

getWritable(): this

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

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

insertAfter()

insertAfter(nodeToInsert, restoreSelection?): LexicalNode

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

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

Parameters

nodeToInsert

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

DecoratorNode.insertAfter

Inherited from

insertBefore()

insertBefore(nodeToInsert, restoreSelection?): LexicalNode

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

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

Parameters

nodeToInsert

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

DecoratorNode.insertBefore

Inherited from

is()

is(object): boolean

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

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:938

Returns

boolean

Inherited from

DecoratorNode.isAttached

isBefore()

isBefore(targetNode): boolean

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

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

Parameters

targetNode

DecoratorNode.isBefore

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

Returns

boolean

Inherited from

isDirty()

isDirty(): boolean

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

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-extension/src/HorizontalRuleExtension.ts:94

Returns

false

Overrides

DecoratorNode.isInline

isIsolated()

isIsolated(): boolean

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

Defaults to false, which lets the caret step over the decorator (and select it, when DecoratorNode.isKeyboardSelectable is also true).

Returns

boolean

Inherited from

DecoratorNode.isIsolated

isKeyboardSelectable()

isKeyboardSelectable(): boolean

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

Returns

boolean

Inherited from

DecoratorNode.isKeyboardSelectable

isParentOf()

isParentOf(targetNode): boolean

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

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

Parameters

targetNode

DecoratorNode.isParentOf

the would-be child node.

Returns

boolean

Inherited from

isParentRequired()

isParentRequired(): boolean

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

Returns

boolean

Inherited from

DecoratorNode.isParentRequired

isSelected()

isSelected(selection?): boolean

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

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:2059

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:1620

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:1637

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:889

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:1992

Returns

DecoratorNode.selectEnd

Inherited from

selectNext()

selectNext(anchorOffset?, focusOffset?): RangeSelection

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

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

DecoratorNode.selectNext

Inherited from

selectPrevious()

selectPrevious(anchorOffset?, focusOffset?): RangeSelection

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

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

DecoratorNode.selectPrevious

Inherited from

selectStart()

selectStart(): RangeSelection

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

Returns

DecoratorNode.selectStart

Inherited from

updateDOM()

updateDOM(): boolean

Defined in: packages/lexical-extension/src/HorizontalRuleExtension.ts:98

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

boolean

Overrides

DecoratorNode.updateDOM

updateFromJSON()

updateFromJSON(serializedNode): this

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

If overridden, this method must call super.

Parameters

serializedNode

LexicalUpdateJSON<SerializedLexicalNode>

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);
  }
}

Inherited from

DecoratorNode.updateFromJSON

clone()

static clone(_data): LexicalNode

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

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

Inherited from

DecoratorNode.clone

getType()

static getType(): string

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

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

importJSON()

static importJSON(_serializedNode): LexicalNode

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

Parameters

_serializedNode

SerializedLexicalNode & Record<string, unknown>

Returns

DecoratorNode.importJSON

Inherited from

transform()

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

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

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

Interfaces

AutoFocusConfig

Defined in: packages/lexical-extension/src/AutoFocusExtension.ts:15

Properties

defaultSelection

defaultSelection: DefaultSelection

Defined in: packages/lexical-extension/src/AutoFocusExtension.ts:20

Where to move the selection when the editor is focused and there is no existing selection. Can be "rootStart" or "rootEnd" (the default).

disabled

disabled: boolean

Defined in: packages/lexical-extension/src/AutoFocusExtension.ts:24

The initial state of disabled

ClearEditorConfig

Defined in: packages/lexical-extension/src/ClearEditorExtension.ts:39

Properties

$onClear

$onClear: () => void

Defined in: packages/lexical-extension/src/ClearEditorExtension.ts:40

Returns

void

ClickAfterLastBlockConfig

Defined in: packages/lexical-extension/src/ClickAfterLastBlockExtension.ts:51

Properties

$shouldInsertAfter

$shouldInsertAfter: (node) => boolean

Defined in: packages/lexical-extension/src/ClickAfterLastBlockExtension.ts:61

Called inside the editor update with the last child of the root when the user clicks the empty area below it. Return true to insert a new paragraph after that node and select it; return false to leave the click alone. Default is $defaultShouldInsertAfter — see its docs for composition patterns.

Parameters

node

Returns

boolean

disabled

disabled: boolean

Defined in: packages/lexical-extension/src/ClickAfterLastBlockExtension.ts:53

Set to true to disable this extension.

ClickAfterLastBlockOutput

Defined in: packages/lexical-extension/src/ClickAfterLastBlockExtension.ts:64

Properties

$shouldInsertAfter

$shouldInsertAfter: Signal<(node) => boolean>

Defined in: packages/lexical-extension/src/ClickAfterLastBlockExtension.ts:68

Predicate signal — see ClickAfterLastBlockConfig.$shouldInsertAfter.

disabled

disabled: Signal<boolean>

Defined in: packages/lexical-extension/src/ClickAfterLastBlockExtension.ts:66

Set to true to disable this extension.

FormatKeyboardShortcutOptions

Defined in: packages/lexical-extension/src/KeyboardShortcutsExtension.ts:30

Properties

isApple?

optional isApple?: boolean

Defined in: packages/lexical-extension/src/KeyboardShortcutsExtension.ts:32

Override the platform convention (defaults to the runtime platform)

separator?

optional separator?: string

Defined in: packages/lexical-extension/src/KeyboardShortcutsExtension.ts:34

The separator between segments (default '+')

HMRConfig

Defined in: packages/lexical-extension/src/HMRExtension.ts:69

Configuration for HMRExtension.

Properties

hot

hot: HotContext | null

Defined in: packages/lexical-extension/src/HMRExtension.ts:74

The bundler's HMR context, typically import.meta.hot. Pass null in production or when HMR is not available.

id?

optional id?: string

Defined in: packages/lexical-extension/src/HMRExtension.ts:90

Stable identifier for this editor instance. Must be stable across HMR reloads — do not use useId(), Math.random(), or any per-mount identifier (these generate a new value on every mount and will fail to match the key from the previous HMR cycle, preventing state restoration). Only needed when multiple editors share both the same import.meta.hot context and the same namespace (set via defineExtension({ namespace: '...' }) or createEditor({ namespace: '...' })); editors with distinct namespaces are isolated automatically, editors with no configured namespace all share one key, and a nested editor shares its parent's namespace and so needs an id of its own. Must be a non-empty string when provided; passing '' triggers a dev warning and is treated as no id. Both are escaped into the key, so either may contain any character.

HMROutput

Defined in: packages/lexical-extension/src/HMRExtension.ts:54

The output of HMRExtension.

Properties

restoreCount

restoreCount: ReadonlySignal<number>

Defined in: packages/lexical-extension/src/HMRExtension.ts:65

Increments every time this editor's state has been restored from the module instance that was replaced.

Anything that derives editor state from somewhere else has to run again afterwards, and can depend on this signal to be told when: a nested editor wired up by SharedHistoryExtension re-points its HistoryState at its parent's, which a restore would otherwise have replaced with one of its own.

HotContext

Defined in: packages/lexical-extension/src/HMRExtension.ts:44

Minimal interface for bundler HMR contexts. Satisfied by Vite's ViteHotContext and similar bundler HMR contexts. Only the data property is read and written; other HMR lifecycle methods are not required.

Webpack and Parcel expose module.hot instead of import.meta.hot. Their module.hot.data is populated by dispose handlers and is not directly mutable, so module.hot cannot be passed here — a custom adapter using module.hot.addDisposeHandler is required for those bundlers.

Properties

data

readonly data: Record<string, unknown>

Defined in: packages/lexical-extension/src/HMRExtension.ts:45

InitialStateConfig

Defined in: packages/lexical-extension/src/InitialStateExtension.ts:35

Properties

setOptions

setOptions: EditorSetOptions

Defined in: packages/lexical-extension/src/InitialStateExtension.ts:37

updateOptions

updateOptions: EditorUpdateOptions

Defined in: packages/lexical-extension/src/InitialStateExtension.ts:36

KeyboardShortcutsConfig

Defined in: packages/lexical-extension/src/KeyboardShortcutsExtension.ts:148

Configuration for KeyboardShortcutsExtension.

Experiemental

Properties

disabled

disabled: boolean

Defined in: packages/lexical-extension/src/KeyboardShortcutsExtension.ts:150

When true, the shortcut listener is not registered

priority

priority: CommandListenerPriority | CommandListenerPriorityBefore

Defined in: packages/lexical-extension/src/KeyboardShortcutsExtension.ts:167

The KEY_DOWN_COMMAND priority (default COMMAND_PRIORITY_NORMAL).

This must be a priority above COMMAND_PRIORITY_EDITOR. Every editor registers the core $handleKeyDown at COMMAND_PRIORITY_EDITOR and it unconditionally reports the event as handled, so a shortcut listener at that priority or later is never reached. That also rules out COMMAND_PRIORITY_BEFORE_EDITOR: command dispatch walks priorities from COMMAND_PRIORITY_CRITICAL down to COMMAND_PRIORITY_EDITOR on the outside and the nested editor chain on the inside, so a nested editor's own $handleKeyDown ends the dispatch before any listener the parent has in the editor-priority queue — which would make KeyboardShortcut.bubbleFromNestedEditors impossible to satisfy.

shortcuts

shortcuts: NamedKeyboardShortcuts

Defined in: packages/lexical-extension/src/KeyboardShortcutsExtension.ts:169

The named shortcut table, merged by name across the extension graph

KnownTypesAndNodes

Defined in: packages/lexical-extension/src/config.ts:16

Properties

nodes

nodes: Set<KlassConstructor<typeof LexicalNode>>

Defined in: packages/lexical-extension/src/config.ts:18

types

types: Set<string>

Defined in: packages/lexical-extension/src/config.ts:17

NodeSelectionDataSelectedConfig

Defined in: packages/lexical-extension/src/NodeSelectionDataSelectedExtension.ts:25

Properties

attribute

attribute: string

Defined in: packages/lexical-extension/src/NodeSelectionDataSelectedExtension.ts:39

The attribute toggled on the matched node's host DOM while it is part of a NodeSelection. Defaults to 'data-selected'. The value is always 'true'; the attribute is removed when the node is no longer selected.

nodes

nodes: KlassConstructor<typeof LexicalNode>[]

Defined in: packages/lexical-extension/src/NodeSelectionDataSelectedExtension.ts:33

The node types whose host DOM should reflect their NodeSelection membership. Pass the node classes (e.g. [CardNode, FigureNode]). Registered subclasses of these classes are matched too, resolved to their own LexicalNode.getType during init (before the editor is created) so the update listener never needs a runtime instanceof.

NormalizeInlineElementsConfig

Defined in: packages/lexical-extension/src/NormalizeInlineElementsExtension.ts:22

Properties

disabled

disabled: boolean

Defined in: packages/lexical-extension/src/NormalizeInlineElementsExtension.ts:23

NormalizeTripleClickSelectionConfig

Defined in: packages/lexical-extension/src/NormalizeTripleClickSelectionExtension.ts:42

Properties

$fixFocusOverselection

$fixFocusOverselection: () => void

Defined in: packages/lexical-extension/src/NormalizeTripleClickSelectionExtension.ts:50

The update function to call when triple click is detected

Returns

void

dateNow

dateNow: () => number

Defined in: packages/lexical-extension/src/NormalizeTripleClickSelectionExtension.ts:48

The clock function used for delay-based merging, default Date.now

Returns

number

disabled

disabled: boolean

Defined in: packages/lexical-extension/src/NormalizeTripleClickSelectionExtension.ts:44

true to disable this extension

thresholdMsec

thresholdMsec: number

Defined in: packages/lexical-extension/src/NormalizeTripleClickSelectionExtension.ts:46

The maximum number of msec from the triple click to expect a selection change, default 100

NormalizeTripleClickSelectionOutput

Defined in: packages/lexical-extension/src/NormalizeTripleClickSelectionExtension.ts:53

Properties

$fixFocusOverselection

$fixFocusOverselection: Signal<() => void>

Defined in: packages/lexical-extension/src/NormalizeTripleClickSelectionExtension.ts:61

The update function to call when triple click is detected

dateNow

dateNow: Signal<() => number>

Defined in: packages/lexical-extension/src/NormalizeTripleClickSelectionExtension.ts:59

The clock function used for delay-based merging, default Date.now

disabled

disabled: Signal<boolean>

Defined in: packages/lexical-extension/src/NormalizeTripleClickSelectionExtension.ts:55

true to disable this extension

thresholdMsec

thresholdMsec: Signal<number>

Defined in: packages/lexical-extension/src/NormalizeTripleClickSelectionExtension.ts:57

The maximum number of msec from the triple click to expect a selection change, default 100

PreventSelectAllConfig

Defined in: packages/lexical-extension/src/PreventSelectAllExtension.ts:34

Properties

disabled

disabled: boolean

Defined in: packages/lexical-extension/src/PreventSelectAllExtension.ts:35

ReadonlySignal

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:76

An interface for read-only signals.

Type Parameters

T

T = any

Properties

brand

brand: typeof BRAND_SYMBOL

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:83

value

readonly value: T

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:77

Methods

peek()

peek(): T

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:78

Returns

T

subscribe(fn): () => void

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:79

Parameters

fn

(value) => void

Returns

() => void

toJSON()

toJSON(): T

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:82

Returns

T

toString()

toString(): string

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:81

Returns

string

valueOf()

valueOf(): T

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:80

Returns

T

SelectBlockConfig

Defined in: packages/lexical-extension/src/SelectBlockExtension.ts:39

Properties

cascadeSelection

cascadeSelection: boolean

Defined in: packages/lexical-extension/src/SelectBlockExtension.ts:43

true to trigger selectAll if all content is selected in the nested editor

disabled

disabled: boolean

Defined in: packages/lexical-extension/src/SelectBlockExtension.ts:41

true to disable this extension

Signal

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:36

The base class for plain and computed signals.

Type Parameters

T

T = any

Properties

brand

brand: typeof BRAND_SYMBOL

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:44

name?

optional name?: string

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:39

Accessors

value

Get Signature

get value(): T

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:45

Returns

T

Set Signature

set value(value): void

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:46

Parameters

value

T

Returns

void

Methods

peek()

peek(): T

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:43

Returns

T

subscribe(fn): () => void

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:38

Parameters

fn

(value) => void

Returns

() => void

toJSON()

toJSON(): T

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:42

Returns

T

toString()

toString(): string

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:41

Returns

string

valueOf()

valueOf(): T

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:40

Returns

T

SignalOptions

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:48

Type Parameters

T

T = any

Properties

name?

optional name?: string

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:51

unwatched?

optional unwatched?: (this) => void

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:50

Parameters

this

Signal<T>

Returns

void

watched?

optional watched?: (this) => void

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:49

Parameters

this

Signal<T>

Returns

void

TabIndentationConfig

Defined in: packages/lexical-extension/src/TabIndentationExtension.ts:138

Properties

$canIndent

$canIndent: CanIndentPredicate

Defined in: packages/lexical-extension/src/TabIndentationExtension.ts:145

By default, indents are set on all elements for which the ElementNode.canIndent returns true. This option allows you to set indents for specific nodes without overriding the method for others.

disabled

disabled: boolean

Defined in: packages/lexical-extension/src/TabIndentationExtension.ts:139

maxIndent

maxIndent: number | null

Defined in: packages/lexical-extension/src/TabIndentationExtension.ts:140

Type Aliases

CanIndentPredicate

CanIndentPredicate = (node) => boolean

Defined in: packages/lexical-extension/src/TabIndentationExtension.ts:67

Parameters

node

Returns

boolean

NamedKeyboardShortcuts

NamedKeyboardShortcuts = Record<string, KeyboardShortcut | readonly KeyboardShortcut[] | null>

Defined in: packages/lexical-extension/src/KeyboardShortcutsExtension.ts:139

Experimental

Keyboard shortcuts by name. The names exist so that other extensions and applications can overlay the table: configuring an existing name remaps that shortcut, configuring it to null disables it, and new names add new shortcuts.

NamedSignalsOptions

NamedSignalsOptions<Defaults> = { [K in keyof Defaults]?: Defaults[K] }

Defined in: packages/lexical-extension/src/namedSignals.ts:10

Type Parameters

Defaults

Defaults

NamedSignalsOutput

NamedSignalsOutput<Defaults> = { [K in keyof Defaults]: Signal<Defaults[K]> }

Defined in: packages/lexical-extension/src/namedSignals.ts:13

Type Parameters

Defaults

Defaults

SerializedDecoratorTextNode

SerializedDecoratorTextNode = Spread<{ format: number; }, SerializedLexicalNode>

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:30

SerializedHorizontalRuleNode

SerializedHorizontalRuleNode = SerializedLexicalNode

Defined in: packages/lexical-extension/src/HorizontalRuleExtension.ts:53

The serialized form of a HorizontalRuleNode. It has no extra fields beyond the base serialized node.

Variables

$applyFormatToDom

const $applyFormatToDom: <T>(lexicalNode, domNode, tagNameToFormat) => HTMLElement | T = applyFormatToDom

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:177

The function wraps the passed DOM node in semantic tags depending on the node format.

Type Parameters

T

T extends HTMLElement | Text

Parameters

lexicalNode

The node where the format is checked

domNode

T

DOM that will be wrapped in tags

tagNameToFormat?

Tag name and format mapping

Returns

HTMLElement | T

domNode

Deprecated

Use applyFormatToDom instead. The $ prefix was a mistake in the 0.47 release: the implementation does not read any editor state, so the dollar convention does not apply. This alias is kept for compatibility with 0.47.

AutoFocusExtension

const AutoFocusExtension: LexicalExtension<AutoFocusConfig, "@lexical/extension/AutoFocus", NamedSignalsOutput<AutoFocusConfig>, unknown>

Defined in: packages/lexical-extension/src/AutoFocusExtension.ts:31

An Extension to focus the LexicalEditor when the root element is set (typically only when the editor is first created).

ClearEditorExtension

const ClearEditorExtension: LexicalExtension<ClearEditorConfig, "@lexical/extension/ClearEditor", NamedSignalsOutput<ClearEditorConfig>, unknown>

Defined in: packages/lexical-extension/src/ClearEditorExtension.ts:64

An extension to provide an implementation of CLEAR_EDITOR_COMMAND

ClickAfterLastBlockExtension

const ClickAfterLastBlockExtension: LexicalExtension<ClickAfterLastBlockConfig, "@lexical/ClickAfterLastBlock", ClickAfterLastBlockOutput, unknown>

Defined in: packages/lexical-extension/src/ClickAfterLastBlockExtension.ts:131

Click handling for the empty area below the last block of the document.

Without this extension, clicking the area below the last block when that block is a DecoratorNode, a shadow-root ElementNode (e.g. TableNode), or any other block that doesn't accept the click naturally leaves the selection in an awkward place — null for a bare decorator, or at the end of a table cell. Users typically expect a new paragraph to appear below the block with the caret in it, matching the behavior of editors like Notion.

This extension intercepts clicks under those conditions, inserts a new empty paragraph after the last block, and selects it.

Closes #8544.

DecoratorTextExtension

const DecoratorTextExtension: LexicalExtension<ExtensionConfigBase, "@lexical/extension/DecoratorText", unknown, unknown>

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:204

An extension that registers DecoratorTextNode with the editor.

EditorStateExtension

const EditorStateExtension: LexicalExtension<ExtensionConfigBase, "@lexical/extension/EditorState", Signal<EditorState>, unknown>

Defined in: packages/lexical-extension/src/EditorStateExtension.ts:15

An extension to provide the current EditorState as a signal

HMRExtension

const HMRExtension: LexicalExtension<HMRConfig, "@lexical/extension/HMR", HMROutput, HMRInit>

Defined in: packages/lexical-extension/src/HMRExtension.ts:528

Preserves editor state, the selection, editability, and undo/redo history across Hot Module Replacement (HMR) cycles. When HistoryExtension is present as a peer, undo/redo stacks are preserved as well.

Passing hot: null is a safe no-op, so import.meta.hot ?? null works correctly in both development and production without a build-time conditional. If a saved state cannot be parsed, the extension warns in dev and falls back to $initialEditorState rather than throwing.

Editor updates only stash a reference to the current EditorState (and to the HistoryState, which @lexical/history mutates in place), so the per-update cost does not grow with the size of the document or of the undo stack. Everything is serialized once, by the module instance that replaces this one, when it restores the saved state.

The editor state and the history entries are serialized as one family rather than one at a time, so that the nodes they shared come back shared and every version of a node keeps answering to one key — see editorStateFamily. That is what makes an undo after a reload a diff of what changed rather than a rebuild of the document, and it is why the selection can be carried by key.

Examples

Basic usage

import {buildEditorFromExtensions, configExtension, defineExtension, HMRExtension} from '@lexical/extension';
import {RichTextExtension} from '@lexical/rich-text';
import {HistoryExtension} from '@lexical/history';

const editor = buildEditorFromExtensions(
  defineExtension({
    name: '[root]',
    namespace: 'my-editor',
    dependencies: [
      RichTextExtension,
      HistoryExtension,
      configExtension(HMRExtension, {hot: import.meta.hot ?? null}),
    ],
  }),
);

Multiple editors sharing an HMR context Editors with distinct namespace values are isolated automatically. Only add id when two editors share both the same import.meta.hot context and the same namespace.

// Different namespaces — automatic isolation, no `id` needed
defineExtension({ name: '[main]', namespace: 'main', dependencies: [configExtension(HMRExtension, {hot: import.meta.hot ?? null})] })
defineExtension({ name: '[sidebar]', namespace: 'sidebar', dependencies: [configExtension(HMRExtension, {hot: import.meta.hot ?? null})] })

// Same namespace — use `id` to distinguish
defineExtension({ name: '[first]', namespace: 'shared', dependencies: [configExtension(HMRExtension, {hot: import.meta.hot ?? null, id: 'first'})] })
defineExtension({ name: '[second]', namespace: 'shared', dependencies: [configExtension(HMRExtension, {hot: import.meta.hot ?? null, id: 'second'})] })

Only the undo/redo entries this editor recorded are preserved. With SharedHistoryExtension a nested editor pushes onto its parent's stacks, and an entry can only be applied to the editor that recorded it — editors the reload replaced, so those entries are left behind rather than re-pointed at whichever editor happens to restore the history.

A nested editor inherits its parent's namespace, so namespaces do not isolate it from its parent: give it a distinct id (or its own namespace), which is warned about in dev when both use HMRExtension.

An editor that was given no namespace at all is keyed without one, because the namespace createEditor generates for it is a fresh random string on every reload — a key built from that would never match what the previous instance saved. Such editors all share one key, so give each editor a namespace (or an id) as soon as a page has more than one.

Saved state belongs to the key for as long as the page lives, not to the reload that produced it. An editor that is unmounted and later remounted under the same key during development restores what the previous one had rather than its own $initialEditorState, so two editors showing different documents need distinct namespaces (or ids) even when they are never on screen at the same time.

HorizontalRuleExtension

const HorizontalRuleExtension: LexicalExtension<ExtensionConfigBase, "@lexical/extension/HorizontalRule", unknown, unknown>

Defined in: packages/lexical-extension/src/HorizontalRuleExtension.ts:145

An extension for HorizontalRuleNode that provides an implementation that works without any React dependency.

IMEExtension

const IMEExtension: LexicalExtension<ExtensionConfigBase, "@lexical/extension/IME", { composingTextNode: Signal<TextNode | null>; compositionKey: Signal<string | null>; }, unknown>

Defined in: packages/lexical-extension/src/IMEExtension.ts:52

Centralizes IME composition state so extensions that react to composition lifecycle don't each re-implement the COMPOSITION_START_COMMAND + compositionend listener dance.

Exposes two signals (both always-active for the editor's lifetime — listeners are wired up by register, not lazily on subscription, so consumers can read .value from anywhere without holding a subscription themselves):

compositionKey is the raw mirror — the value Lexical's own $handleCompositionStart writes to its internal _compositionKey, i.e. the selection.anchor.key at the moment composition starts. This can be a non-TextNode key when composition begins on an element-anchor selection (e.g. empty paragraph). Cleared on compositionend.
composingTextNode is the resolved view — the actual TextNode being composed on, or null while there is no TextNode-level composition. For an element-anchor start it stays null until the COMPOSITION_START_TAG-tagged update fires with the post-ZWSP-heuristic selection, at which point it updates to the new TextNode.

InitialStateExtension

const InitialStateExtension: LexicalExtension<InitialStateConfig, "@lexical/extension/InitialState", unknown, { $initialEditorState: InitialEditorStateType; initialized: boolean; }>

Defined in: packages/lexical-extension/src/InitialStateExtension.ts:49

An extension to set the initial state of the editor from a function or serialized JSON EditorState. This is implicitly included with all editors built with Lexical Extension. This happens in the afterRegistration phase so your initial state may depend on registered commands, but you should not call editor.setRootElement earlier than this phase to avoid rendering an empty editor first.

INSERT_HORIZONTAL_RULE_COMMAND

const INSERT_HORIZONTAL_RULE_COMMAND: LexicalCommand<void>

Defined in: packages/lexical-extension/src/HorizontalRuleExtension.ts:60

Command that inserts a HorizontalRuleNode at the current selection. Dispatch it with editor.dispatchCommand(INSERT_HORIZONTAL_RULE_COMMAND).

KeyboardShortcutsExtension

const KeyboardShortcutsExtension: LexicalExtension<KeyboardShortcutsConfig, "@lexical/extension/KeyboardShortcuts", NamedSignalsOutput<KeyboardShortcutsConfig>, unknown>

Defined in: packages/lexical-extension/src/KeyboardShortcutsExtension.ts:274

Experimental

Dispatches a table of keyboard shortcuts from a single compiled KEY_DOWN_COMMAND listener, in O(1) per keypress.

The table is merged across the whole extension graph by name: any extension or app config can add shortcuts under new names, remap an existing name to a different key or handler, or disable one by configuring it to null. The output exposes the config as signals, so the table can also be remapped at runtime through the shortcuts signal (the listener is recompiled on change).

Configuring an existing name always replaces its mapping outright, and a name may be mapped to an array to give it several bindings at once. The overriding names are also matched first, ahead of the names they did not override, when more than one shortcut matches the same keypress.

NestedEditorExtension

const NestedEditorExtension: LexicalExtension<NestedEditorConfig, "@lexical/extension/NestedEditor", NamedSignalsOutput<{ inheritEditableFromParent: boolean; }>, void>

Defined in: packages/lexical-extension/src/NestedEditorExtension.ts:31

NodeSelectionDataSelectedExtension

const NodeSelectionDataSelectedExtension: LexicalExtension<NodeSelectionDataSelectedConfig, "@lexical/extension/NodeSelectionDataSelected", unknown, { matchTypes: Set<string>; }>

Defined in: packages/lexical-extension/src/NodeSelectionDataSelectedExtension.ts:56

Experimental

Mirrors NodeSelection membership onto the host DOM as an attribute so CSS can render a selection outline for ElementNode hosts, which have no decorate() render path of their own. Configure it per node type:

configExtension(NodeSelectionDataSelectedExtension, {nodes: [CardNode]})

The matched host needs a corresponding CSS rule, e.g. .lexical-card-node[data-selected='true'] { outline: ... }.

NodeSelectionExtension

const NodeSelectionExtension: LexicalExtension<ExtensionConfigBase, "@lexical/extension/NodeSelection", { watchNodeKey: (key) => ReadonlySignal<boolean>; }, unknown>

Defined in: packages/lexical-extension/src/NodeSelectionExtension.ts:30

An extension that provides a watchNodeKey output that returns a signal for the selection state of a node.

Typically used for tracking whether a DecoratorNode is currently selected or not. A framework independent alternative to useLexicalNodeSelection.

NormalizeInlineElementsExtension

const NormalizeInlineElementsExtension: LexicalExtension<NormalizeInlineElementsConfig, "@lexical/NormalizeInlineElements", NamedSignalsOutput<NormalizeInlineElementsConfig>, unknown>

Defined in: packages/lexical-extension/src/NormalizeInlineElementsExtension.ts:43

This extension removes empty inline nodes from the EditorState. This extension is designed to facilitate a smooth migration from the plugin API with the option to disable it, but it may be removed in the future and integrated into the core

NormalizeTripleClickSelectionExtension

const NormalizeTripleClickSelectionExtension: LexicalExtension<NormalizeTripleClickSelectionConfig, "@lexical/NormalizeTripleClickSelection", NormalizeTripleClickSelectionOutput, unknown>

Defined in: packages/lexical-extension/src/NormalizeTripleClickSelectionExtension.ts:154

This extension handles triple-click events and will move the focus towards the anchor in certain conditions to meet expectations. Simply speaking, the focus should prefer to land at the end of a node rather than the beginning of its next sibling, and it should not skip over a LineBreakNode.

In order to fix the result visually and avoid a flash of over-selection it will also eagerly manipulate the DOM selection directly.

It is conservative in that it only fires this $fixFocusOverselection callback when it has detected a triple click, but it provides the function as an output signal so that it can both be called from other places and it can be replaced or wrapped with different functionality.

PreventSelectAllExtension

const PreventSelectAllExtension: LexicalExtension<PreventSelectAllConfig, "@lexical/extension/PreventSelectAll", NamedSignalsOutput<PreventSelectAllConfig>, unknown>

Defined in: packages/lexical-extension/src/PreventSelectAllExtension.ts:46

By default, lexical intercepts most events and dispatches the appropriate commands. This extension prevents the keydown event propagating from input/textarea elements, which are typically part of a decorator node, in order to stop dispatching the SELECT_ALL_COMMAND.

When used as a dependency of SelectBlockExtension, its disabled state is kept in sync with that extension.

RootElementExtension

const RootElementExtension: LexicalExtension<ExtensionConfigBase, "@lexical/extension/RootElement", Signal<HTMLElement | null>, unknown>

Defined in: packages/lexical-extension/src/RootElementExtension.ts:22

Exposes the editor's current root element as a reactive Signal<HTMLElement | null> that mirrors editor.getRootElement() via a root listener.

Depend on this extension and read its output Signal from a signals effect/computed to react to the root mounting, unmounting, or remounting (e.g. into a different document such as an iframe) without subscribing through React (or any other framework).

SelectBlockExtension

const SelectBlockExtension: LexicalExtension<SelectBlockConfig, "@lexical/extension/SelectBlock", NamedSignalsOutput<SelectBlockConfig>, unknown>

Defined in: packages/lexical-extension/src/SelectBlockExtension.ts:52

This extension includes block selection. If you press Ctrl + A, the nearest block element, for example paragraph, is selected first. Pressing Ctrl + A again selects all content in the document. A selection that already spans multiple blocks expands directly to the whole document.

SelectionAlwaysOnDisplayExtension

const SelectionAlwaysOnDisplayExtension: LexicalExtension<SelectionAlwaysOnDisplayConfig, "@lexical/utils/SelectionAlwaysOnDisplay", NamedSignalsOutput<SelectionAlwaysOnDisplayConfig>, unknown>

Defined in: packages/lexical-extension/src/SelectionAlwaysOnDisplayExtension.ts:24

An extension that highlights selected content in the Lexical editor even when the editor is not currently focused.

TabIndentationExtension

const TabIndentationExtension: LexicalExtension<TabIndentationConfig, "@lexical/extension/TabIndentation", NamedSignalsOutput<TabIndentationConfig>, unknown>

Defined in: packages/lexical-extension/src/TabIndentationExtension.ts:153

This extension adds the ability to indent content using the tab key. Generally, we don't recommend using this plugin as it could negatively affect accessibility for keyboard users, causing focus to become trapped within the editor.

WatchEditableExtension

const WatchEditableExtension: LexicalExtension<ExtensionConfigBase, "@lexical/extension/WatchEditable", Signal<boolean>, unknown>

Defined in: packages/lexical-extension/src/WatchEditableExtension.ts:20

Exposes the editor's editable state as a reactive Signal<boolean> that mirrors editor.isEditable() via an editable listener.

Depend on this extension and read its output Signal from a signals effect/computed to react to editability changes without subscribing through React (or any other framework).

Functions

$createHorizontalRuleNode()

$createHorizontalRuleNode(): HorizontalRuleNode

Defined in: packages/lexical-extension/src/HorizontalRuleExtension.ts:107

Returns

HorizontalRuleNode

$defaultShouldInsertAfter()

$defaultShouldInsertAfter(node): boolean

Defined in: packages/lexical-extension/src/ClickAfterLastBlockExtension.ts:41

Experimental

Default predicate matches DecoratorNode and shadow-root ElementNodes (e.g. TableNode). Apps that want to also trigger on other node types — CodeNode, custom non-editable blocks — should compose this default in their own predicate rather than re-deriving the check:

configExtension(ClickAfterLastBlockExtension, {
  $shouldInsertAfter: (node) =>
    $defaultShouldInsertAfter(node) || $isCodeNode(node),
});

Parameters

node

Returns

boolean

$getExtensionDependency()

$getExtensionDependency<E>(extension): LexicalExtensionDependency<E>

Defined in: packages/lexical-extension/src/getExtensionDependency.ts:44

Get the finalized config and output for extension from the editor currently in scope. A $-flavored shorthand for getExtensionDependencyFromEditor($getEditor(), extension).

Throws if the editor was not built with extension as a dependency.

Type Parameters

E

E extends AnyLexicalExtension

Parameters

extension

E

Returns

LexicalExtensionDependency<E>

Example

import {$getExtensionDependency} from '@lexical/extension';
import {KeywordsExtension} from './KeywordsExtension';

class KeywordNode extends TextNode {
  createDOM(config: EditorConfig): HTMLElement {
    const dom = super.createDOM(config);
    dom.className =
      $getExtensionDependency(KeywordsExtension).config.className;
    return dom;
  }
}

See

getExtensionDependencyFromEditor when you have an explicit editor reference (e.g. outside a read/update).

$getExtensionOutput()

$getExtensionOutput<E>(extension): LexicalExtensionOutput<E>

Defined in: packages/lexical-extension/src/getExtensionDependency.ts:69

Shorthand for $getExtensionDependency(extension).output — the most common reason to look up an extension dependency. Throws if the editor was not built with extension as a dependency.

Type Parameters

E

E extends AnyLexicalExtension

Parameters

extension

E

Returns

LexicalExtensionOutput<E>

Example

import {$getExtensionOutput} from '@lexical/extension';
import {DOMImportExtension} from '@lexical/html';

const nodes = $getExtensionOutput(DOMImportExtension).$generateNodesFromDOM(
  dom,
);

See

$getExtensionDependency when you need both .config and .output (or want to mirror the shape of getExtensionDependencyFromEditor).

$getPeerDependency()

$getPeerDependency<E>(extensionName): LexicalExtensionDependency<E> | undefined

Defined in: packages/lexical-extension/src/getExtensionDependency.ts:100

Get the finalized config and output for an optional peer extension by name, from the editor currently in scope. A $-flavored shorthand for getPeerDependencyFromEditor($getEditor(), extensionName).

Returns undefined if the editor was not built with the named extension. Both the explicit Extension type and the name are required so the returned config / output types are correct.

Type Parameters

E

E extends AnyLexicalExtension = never

Parameters

extensionName

E["name"]

Returns

LexicalExtensionDependency<E> | undefined

Example

import {$getPeerDependency} from '@lexical/extension';
import type {HistoryExtension} from '@lexical/history';

const dep = $getPeerDependency<typeof HistoryExtension>(
  '@lexical/history/History',
);
if (dep) {
  // …read dep.config / dep.output…
}

See

getPeerDependencyFromEditor when you have an explicit editor reference.

$isDecoratorTextNode()

$isDecoratorTextNode(node): node is DecoratorTextNode

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:89

Parameters

node

LexicalNode | null | undefined

Returns

node is DecoratorTextNode

$isHorizontalRuleNode()

$isHorizontalRuleNode(node): node is HorizontalRuleNode

Defined in: packages/lexical-extension/src/HorizontalRuleExtension.ts:114

Parameters

node

LexicalNode | null | undefined

Returns

node is HorizontalRuleNode

true if node is a HorizontalRuleNode, narrowing its type.

applyFormatFromStyle()

applyFormatFromStyle(lexicalNode, style, shouldApply?): DecoratorTextNode

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:106

Applies formatting to the node based on the properties in the passed style object. By default, properties are checked according to the values set when importing content from Google Docs. This algorithm is identical to the TextNode import.

Parameters

lexicalNode

The node to which the format will apply

style

CSSStyleDeclaration

CSS style object

shouldApply?

format to apply if it is not in style

Returns

lexicalNode

applyFormatToDom()

applyFormatToDom<T>(lexicalNode, domNode, tagNameToFormat?): HTMLElement | T

Defined in: packages/lexical-extension/src/DecoratorTextExtension.ts:157

The function wraps the passed DOM node in semantic tags depending on the node format.

Type Parameters

T

T extends HTMLElement | Text

Parameters

lexicalNode

LexicalEditorWithDispose

The node where the format is checked

domNode

T

DOM that will be wrapped in tags

tagNameToFormat?

Tag name and format mapping

Returns

HTMLElement | T

domNode

batch()

batch<T>(fn): T

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:24

Combine multiple value updates into one "commit" at the end of the provided callback.

Batches can be nested and changes are only flushed once the outermost batch callback completes.

Accessing a signal that has been modified within a batch will reflect its updated value.

Type Parameters

T

T

Parameters

fn

() => T

The callback function.

Returns

T

The value returned by the callback.

buildEditorFromExtensions()

buildEditorFromExtensions(...extensions): LexicalEditorWithDispose

Defined in: packages/lexical-extension/src/LexicalBuilder.ts:81

Build a LexicalEditor by combining together one or more extensions, optionally overriding some of their configuration.

Parameters

extensions

...AnyLexicalExtensionArgument[]

Extension arguments (extensions or extensions with config overrides)

Returns

An editor handle

Examples

A single root extension with multiple dependencies

const editor = buildEditorFromExtensions(
  defineExtension({
    name: "[root]",
    dependencies: [
      RichTextExtension,
      configExtension(EmojiExtension, { emojiBaseUrl: "/assets/emoji" }),
    ],
    register: (editor: LexicalEditor) => {
      console.log("Editor Created");
      return () => console.log("Editor Disposed");
    },
  }),
);

A very similar minimal configuration without the register hook

const editor = buildEditorFromExtensions(
  RichTextExtension,
  configExtension(EmojiExtension, { emojiBaseUrl: "/assets/emoji" }),
);

computed()

computed<T>(fn, options?): ReadonlySignal<T>

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:94

Create a new signal that is computed based on the values of other signals.

The returned computed signal is read-only, and its value is automatically updated when any signals accessed from within the callback function change.

Type Parameters

T

T

Parameters

fn

() => T

The effect callback.

options?

SignalOptions<T>

Returns

ReadonlySignal<T>

A new read-only signal.

effect()

effect(fn, options?): DisposeFn

Defined in: node_modules/.pnpm/@preact+signals-core@1.14.1/node_modules/@preact/signals-core/dist/signals-core.d.ts:139

Create an effect to run arbitrary code in response to signal changes.

An effect tracks which signals are accessed within the given callback function fn, and re-runs the callback when those signals change.

The callback may return a cleanup function. The cleanup function gets run once, either when the callback is next called or when the effect gets disposed, whichever happens first.

Parameters

fn

EffectFn

The effect callback.

options?

EffectOptions

Returns

DisposeFn

A function for disposing the effect.

formatKeyboardShortcut()

formatKeyboardShortcut(shortcut, options?): string[]

Defined in: packages/lexical-extension/src/KeyboardShortcutsExtension.ts:97

Format the key binding of a shortcut as a human readable string for menus, tooltips, and help dialogs (e.g. '⌘+Shift+K' on Apple platforms and 'Ctrl+Shift+K' elsewhere). Modifiers with an 'any' mask are not displayed.

Parameters

shortcut

KeyboardShortcutMatch

options?

FormatKeyboardShortcutOptions = {}

Returns

string[]

getExtensionDependencyFromEditor()

getExtensionDependencyFromEditor<Extension>(editor, extension): LexicalExtensionDependency<Extension>

Defined in: packages/lexical-extension/src/getExtensionDependencyFromEditor.ts:35

Get the finalized config and output of an Extension that was used to build the editor.

This is useful in the implementation of a LexicalNode or in other situations where you have an editor reference but it's not easy to pass the config or ExtensionRegisterState around.

It will throw if the Editor was not built using this Extension.

Inside an editor read/update, prefer $getExtensionDependency or $getExtensionOutput — they resolve the editor via $getEditor() so you don't have to thread it through.

Type Parameters

Extension

Extension extends AnyLexicalExtension

Parameters

editor

The editor that was built using extension

extension

Extension

The concrete reference to an Extension used to build this editor

Returns

LexicalExtensionDependency<Extension>

The config and output for that Extension

getKnownTypesAndNodes()

getKnownTypesAndNodes(config): KnownTypesAndNodes

Defined in: packages/lexical-extension/src/config.ts:28

Get the sets of nodes and types registered in the InitialEditorConfig. This is to be used when an extension needs to register optional behavior if some node or type is present.

Parameters

config

Pick<InitialEditorConfig, "nodes">

The InitialEditorConfig (accessible from an extension's init)

Returns

KnownTypesAndNodes

The known types and nodes as Sets

getPeerDependencyFromEditor()

getPeerDependencyFromEditor<Extension>(editor, extensionName): LexicalExtensionDependency<Extension> | undefined

Defined in: packages/lexical-extension/src/getPeerDependencyFromEditor.ts:44

Get the finalized config and output of an Extension that was used to build the editor by name.

This can be used from the implementation of a LexicalNode or in other situation where you have an editor reference but it's not easy to pass the config around. Use this version if you do not have a concrete reference to the Extension for some reason (e.g. it is an optional peer dependency, or you are avoiding a circular import).

Both the explicit Extension type and the name are required.

Inside an editor read/update, prefer $getPeerDependency — it resolves the editor via $getEditor() so you don't have to thread it through.

Type Parameters

Extension

Extension extends AnyLexicalExtension = never

Parameters

editor

The editor that may have been built using extension

extensionName

Extension["name"]

The name of the Extension

Returns

LexicalExtensionDependency<Extension> | undefined

The config and output of the Extension or undefined

Example

import type { HistoryExtension } from "@lexical/history";
getPeerDependencyFromEditor<typeof HistoryExtension>(editor, "@lexical/history/History");

getPeerDependencyFromEditorOrThrow()

getPeerDependencyFromEditorOrThrow<Extension>(editor, extensionName): LexicalExtensionDependency<Extension>

Defined in: packages/lexical-extension/src/getPeerDependencyFromEditor.ts:100

Get the finalized config and output of an Extension that was used to build the editor by name.

Both the explicit Extension type and the name are required.

Inside an editor read/update, prefer $getPeerDependency (which resolves the editor via $getEditor()) and add your own invariant if the peer is required.

Type Parameters

Extension

Extension extends AnyLexicalExtension = never

Parameters

editor

The editor that may have been built using extension

extensionName

Extension["name"]

The name of the Extension

Returns

LexicalExtensionDependency<Extension>

The config and output of the Extension

Example

import type { EmojiExtension } from "./EmojiExtension";
export class EmojiNode extends TextNode {
  // other implementation details not included
  createDOM(
    config: EditorConfig,
    editor?: LexicalEditor | undefined
  ): HTMLElement {
    const dom = super.createDOM(config, editor);
    addClassNamesToElement(
      dom,
      getPeerDependencyFromEditorOrThrow<typeof EmojiExtension>(
        editor || $getEditor(),
        "@lexical/playground/emoji",
      ).config.emojiClass,
    );
    return dom;
  }
}

namedSignals()

namedSignals<Defaults>(defaults, opts?): NamedSignalsOutput<Defaults>

Defined in: packages/lexical-extension/src/namedSignals.ts:29

Return an object with the same shape as defaults with a Signal for each value. If specified, the second opts argument is a partial of overrides to the defaults and will be used as the initial value.

Typically used to make a reactive version of some subset of the configuration of an extension, so it can be reconfigured at runtime.

Type Parameters

Defaults

Defaults

Parameters

defaults

Defaults

The object with default values

opts?

NamedSignalsOptions<Defaults> = {}

Overrides to those default values

Returns

NamedSignalsOutput<Defaults>

An object with signals initialized with the default values

registerClearEditor()

registerClearEditor(editor, $onClear?): () => void

Defined in: packages/lexical-extension/src/ClearEditorExtension.ts:43

Parameters

editor

$onClear?

() => void

Returns

() => void

registerTabIndentation()

registerTabIndentation(editor, maxIndent?, $canIndent?): () => void

Defined in: packages/lexical-extension/src/TabIndentationExtension.ts:80

Registers a KEY_TAB_COMMAND handler that makes Tab and Shift+Tab indent and outdent block elements (and otherwise insert a tab). Pass maxIndent to cap the indent depth and $canIndent to control which elements may be indented.

Parameters

editor