Class: ListItemNode

@lexical/list.ListItemNode

Hierarchy

• ElementNode

  ↳ ListItemNode

Constructors

constructor

• new ListItemNode(value?, checked?, key?): ListItemNode

Parameters

Name	Type	Default value
value	number	1
checked	undefined | boolean	undefined
key?	string	undefined

Returns

ListItemNode

Overrides

ElementNode.constructor

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:105

Methods

afterCloneFrom

▸ afterCloneFrom(prevNode): void

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

Name	Type
prevNode	this

Returns

void

Example

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

Overrides

ElementNode.afterCloneFrom

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:115

---

append

▸ append(...nodes): this

Parameters

Name	Type
...nodes	LexicalNode[]

Returns

this

Overrides

ElementNode.append

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:199

---

canMergeWhenEmpty

▸ canMergeWhenEmpty(): true

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

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

Returns

true

Example

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

Overrides

ElementNode.canMergeWhenEmpty

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:465

---

canMergeWith

▸ canMergeWith(node): boolean

Parameters

Name	Type
node	LexicalNode

Returns

boolean

Overrides

ElementNode.canMergeWith

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:438

---

collapseAtStart

▸ collapseAtStart(selection): true

Parameters

Name	Type
selection	RangeSelection

Returns

true

Overrides

ElementNode.collapseAtStart

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:318

---

createDOM

▸ createDOM(config): HTMLElement

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

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

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

Parameters

Name	Type	Description
config	EditorConfig	allows access to things like the EditorTheme (to apply classes) during reconciliation.

Returns

HTMLElement

Overrides

ElementNode.createDOM

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:121

---

createParentElementNode

▸ createParentElementNode(): ElementNode

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

Returns

ElementNode

Overrides

ElementNode.createParentElementNode

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:461

---

exportDOM

▸ exportDOM(editor): DOMExportOutput

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

Parameters

Name	Type
editor	LexicalEditor

Returns

DOMExportOutput

Overrides

ElementNode.exportDOM

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:173

---

exportJSON

▸ exportJSON(): SerializedListItemNode

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

SerializedListItemNode

Overrides

ElementNode.exportJSON

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:191

---

extractWithChild

▸ extractWithChild(child, selection): boolean

Parameters

Name	Type
child	LexicalNode
selection	BaseSelection

Returns

boolean

Overrides

ElementNode.extractWithChild

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:442

---

getChecked

▸ getChecked(): undefined | boolean

Returns

undefined | boolean

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:369

---

getIndent

▸ getIndent(): number

Returns

number

Overrides

ElementNode.getIndent

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:393

---

getValue

▸ getValue(): number

Returns

number

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:357

---

insertAfter

▸ insertAfter(node, restoreSelection?): LexicalNode

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

Parameters

Name	Type	Default value	Description
node	LexicalNode	undefined	The node to insert after this one.
restoreSelection	boolean	true	Whether or not to attempt to resolve the selection to the appropriate place after the operation is complete.

Returns

LexicalNode

Overrides

ElementNode.insertAfter

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:259

---

insertNewAfter

▸ insertNewAfter(_, restoreSelection?): ParagraphNode | ListItemNode

Parameters

Name	Type	Default value
_	RangeSelection	undefined
restoreSelection	boolean	true

Returns

ParagraphNode | ListItemNode

Overrides

ElementNode.insertNewAfter

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:305

---

isParentRequired

▸ isParentRequired(): true

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

true

Overrides

ElementNode.isParentRequired

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:457

---

remove

▸ remove(preserveEmptyParent?): void

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

Parameters

Name	Type	Description
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

Overrides

ElementNode.remove

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:289

---

replace

▸ replace<N>(replaceWithNode, includeChildren?): N

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

Type parameters

Name	Type
N	extends LexicalNode

Parameters

Name	Type	Description
replaceWithNode	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

Overrides

ElementNode.replace

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:215

---

setChecked

▸ setChecked(checked?): this

Parameters

Name	Type
checked?	boolean

Returns

this

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:382

---

setIndent

▸ setIndent(indent): this

Parameters

Name	Type
indent	number

Returns

this

Overrides

ElementNode.setIndent

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:410

---

setValue

▸ setValue(value): this

Parameters

Name	Type
value	number

Returns

this

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:363

---

toggleChecked

▸ toggleChecked(): this

Returns

this

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:388

---

updateDOM

▸ updateDOM(prevNode, dom, config): boolean

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

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

Parameters

Name	Type
prevNode	ListItemNode
dom	HTMLElement
config	EditorConfig

Returns

boolean

Overrides

ElementNode.updateDOM

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:153

---

updateFromJSON

▸ updateFromJSON(serializedNode): this

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

Name	Type
serializedNode	LexicalUpdateJSON<SerializedListItemNode>

Returns

this

Example

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

Overrides

ElementNode.updateFromJSON

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:164

---

updateListItemDOM

▸ updateListItemDOM(prevNode, dom, config): void

Parameters

Name	Type
prevNode	null | ListItemNode
dom	HTMLLIElement
config	EditorConfig

Returns

void

Defined in

packages/lexical-list/src/LexicalListItemNode.ts:128