Skip to main content

@lexical/mark

Classes​

MarkNode​

Defined in: packages/lexical-mark/src/MarkNode.ts:55

Extends​

Constructors​

Constructor​

new MarkNode(ids?, key?): MarkNode

Defined in: packages/lexical-mark/src/MarkNode.ts:77

Parameters​
ids?​

readonly string[] = NO_IDS

key?​

string

Returns​

MarkNode

Inherited from​

ElementNode.constructor

Properties​

importDOM?​

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

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

Returns​

DOMConversionMap<any> | null

Inherited from​

ElementNode.importDOM

Methods​

$config()​

$config(): BaseStaticNodeConfig & StaticNodeConfigAccessor<{ $transform: { }; extends: typeof LexicalNode; generated: GeneratedJSONFactory; json: NodeSerializationSchema<ElementNode, { direction?: "ltr" | "rtl" | null; format?: "" | "left" | "start" | "center" | "right" | "end" | "justify"; indent?: string | number; textFormat?: string | number; textStyle?: string; }>; }> & object & StaticNodeTypeAccessor<"mark"> & StaticNodeConfigAccessor<{ children: "inline"; extends: typeof ElementNode; generated: GeneratedJSONFactory; inline: true; json: NodeSerializationSchema<MarkNode, { ids?: readonly string[]; }>; }>

Defined in: packages/lexical-mark/src/MarkNode.ts:67

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 & StaticNodeConfigAccessor<{ $transform: { }; extends: typeof LexicalNode; generated: GeneratedJSONFactory; json: NodeSerializationSchema<ElementNode, { direction?: "ltr" | "rtl" | null; format?: "" | "left" | "start" | "center" | "right" | "end" | "justify"; indent?: string | number; textFormat?: string | number; textStyle?: string; }>; }> & object & StaticNodeTypeAccessor<"mark"> & StaticNodeConfigAccessor<{ children: "inline"; extends: typeof ElementNode; generated: GeneratedJSONFactory; inline: true; json: NodeSerializationSchema<MarkNode, { ids?: readonly string[]; }>; }>

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

ElementNode.$config

addID()​

addID(id): this

Defined in: packages/lexical-mark/src/MarkNode.ts:131

Parameters​
id​

string

Returns​

this

afterCloneFrom()​

afterCloneFrom(prevNode): void

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:345

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​

ElementNode.afterCloneFrom

append()​

append(...nodesToAppend): this

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:705

Parameters​
nodesToAppend​

...LexicalNode[]

Returns​

this

Inherited from​

ElementNode.append

canBeEmpty()​

canBeEmpty(): false

Defined in: packages/lexical-mark/src/MarkNode.ts:164

Returns​

false

Inherited from​

ElementNode.canBeEmpty

canIndent()​

canIndent(): boolean

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:947

Returns​

boolean

Inherited from​

ElementNode.canIndent

canInsertTextAfter()​

canInsertTextAfter(): boolean

Defined in: packages/lexical-mark/src/MarkNode.ts:160

Returns​

boolean

Inherited from​

ElementNode.canInsertTextAfter

canInsertTextBefore()​

canInsertTextBefore(): boolean

Defined in: packages/lexical-mark/src/MarkNode.ts:156

Returns​

boolean

Inherited from​

ElementNode.canInsertTextBefore

canMergeWhenEmpty()​

canMergeWhenEmpty(): boolean

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:1024

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

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

Returns​

boolean

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

ElementNode.canMergeWhenEmpty

clear()​

clear(): this

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:699

Returns​

this

Inherited from​

ElementNode.clear

collapseAtStart()​

collapseAtStart(selection): boolean

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:961

Parameters​
selection​

RangeSelection

Returns​

boolean

Inherited from​

ElementNode.collapseAtStart

config()​
Call Signature​

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

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

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<MarkNode, string>

Parameters​
type​

symbol

config​

Config

Returns​

AbstractStaticNodeConfigRecord<Config>

Inherited from​

ElementNode.config

Call Signature​

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

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

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​
Type​

Type extends string

Config​

Config extends StaticNodeConfigValue<MarkNode, Type>

Parameters​
type​

Type

config​

Config

Returns​

StaticNodeConfigRecord<Type, Config>

Inherited from​

ElementNode.config

createDOM()​

createDOM(config): HTMLElement

Defined in: packages/lexical-mark/src/MarkNode.ts:82

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​

EditorConfig

Returns​

HTMLElement

Inherited from​

ElementNode.createDOM

createParentElementNode()​

createParentElementNode(): ElementNode

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

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

Returns​

ElementNode

Inherited from​

ElementNode.createParentElementNode

deleteID()​

deleteID(id): this

Defined in: packages/lexical-mark/src/MarkNode.ts:136

Parameters​
id​

string

Returns​

this

excludeFromCopy()​

excludeFromCopy(destination): boolean

Defined in: packages/lexical-mark/src/MarkNode.ts:195

Parameters​
destination​

"clone" | "html"

Returns​

boolean

Inherited from​

ElementNode.excludeFromCopy

exportDOM()​

exportDOM(editor): DOMExportOutput

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:870

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​

LexicalEditor

Returns​

DOMExportOutput

Inherited from​

ElementNode.exportDOM

exportJSON()​
Call Signature​

exportJSON(compact?): SerializedMarkNode

Defined in: packages/lexical-mark/src/MarkNode.ts:56

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.

The base implementation writes every property the node's schema declares (its own and those it inherits), reading each through its getter — get<Prop> by default, or the name recorded with withAccessors. A getter that returns undefined omits its property. Override this only for output a schema can not describe, and call super.exportJSON(compact) when you do.

This may serialize the instance as-is, without resolving the latest version. A property declared with withField is read straight off the node, which is the optimization the serialization walk is built on — every node the walk reaches comes from the EditorState's node map and is already current, so it resolves nothing per node.

So on a reference that a getWritable() (any set<Prop>) has since superseded, this writes pre-mutation values. Which properties do is not something to rely on: a property whose accessor a subclass overrode still goes through that accessor and resolves the latest, so one node can write a current text beside a stale style. Call node.getLatest().exportJSON() whenever you hold such a reference rather than reasoning about which properties resolve.

This is a breaking change. Every property previously went through an accessor, and every accessor resolves getLatest(), so a stale reference exported current values.

Parameters​
compact?​

false

Write the compact form: omit a property the parser derives rather than reads, one whose value is the schema default parsing would restore, and the deprecated version. The two forms describe the same document. A node that overrides this and ignores the flag simply keeps writing the full form, which still parses.

Returns​

SerializedMarkNode

Inherited from​

ElementNode.exportJSON

Call Signature​

exportJSON(compact): SerializedPartial<SerializedMarkNode>

Defined in: packages/lexical-mark/src/MarkNode.ts:57

The compact form omits properties, so what it returns is the partial serialized type — every node-specific property optional — rather than the full one. Passing a boolean whose value is not statically known selects this overload too, which is right: neither form can be promised then.

Parameters​
compact​

boolean

Returns​

SerializedPartial<SerializedMarkNode>

See​

SerializedPartial

Inherited from​

ElementNode.exportJSON

extractWithChild()​

extractWithChild(child, selection, destination): boolean

Defined in: packages/lexical-mark/src/MarkNode.ts:172

Parameters​
child​

LexicalNode

selection​

BaseSelection

destination​

"clone" | "html"

Returns​

boolean

Inherited from​

ElementNode.extractWithChild

getAllTextNodes()​

getAllTextNodes(): TextNode[]

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:422

Returns​

TextNode[]

Inherited from​

ElementNode.getAllTextNodes

getChildAtIndex()​

getChildAtIndex(index): LexicalNode | null

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:540

Returns the child of this node at the given index, or null if the index is out of range.

Parameters​
index​

number

Returns​

LexicalNode | null

Inherited from​

ElementNode.getChildAtIndex

getChildren()​

getChildren(): LexicalNode[]

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:390

Returns the children of this node, in document order.

Returns​

LexicalNode[]

Inherited from​

ElementNode.getChildren

getChildrenKeys()​

getChildrenKeys(): string[]

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:393

Returns​

string[]

Inherited from​

ElementNode.getChildrenKeys

getChildrenSize()​

getChildrenSize(): number

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:402

Returns​

number

Inherited from​

ElementNode.getChildrenSize

getDescendantByIndex()​

getDescendantByIndex(index): LexicalNode | null

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:491

Returns the deepest descendant corresponding to the child at the given index, or null if this node has no children.

Parameters​
index​

number

Returns​

LexicalNode | null

Inherited from​

ElementNode.getDescendantByIndex

getDirection()​

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

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:609

Returns​

"ltr" | "rtl" | null

Inherited from​

ElementNode.getDirection

getDOMSlot()​

getDOMSlot(element): ElementDOMSlot<HTMLElement>

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:867

Experimental

An ElementNode subclass can override this to control where its children are inserted into the DOM, e.g. to add a wrapping node or accessory nodes before or after the children. The root of the node returned by createDOM must still be exactly one HTMLElement.

Parameters​
element​

HTMLElement

Returns​

ElementDOMSlot<HTMLElement>

Inherited from​

ElementNode.getDOMSlot

getFirstChild()​

getFirstChild(): LexicalNode | null

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:503

Returns the first child of this node, or null if it has no children.

Returns​

LexicalNode | null

Inherited from​

ElementNode.getFirstChild

getFirstChildOrThrow()​

getFirstChildOrThrow(): LexicalNode

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:511

Returns the first child of this node, or throws if it has no children.

Returns​

LexicalNode

Inherited from​

ElementNode.getFirstChildOrThrow

getFirstDescendant()​

getFirstDescendant(): LexicalNode | null

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:461

Returns the deepest first descendant of this node, or null if it has no children.

Descendant navigation is children-only by design: it feeds selectStart / selectEnd and selection, which must not see slots (slots are isolated).

Returns​

LexicalNode | null

Inherited from​

ElementNode.getFirstDescendant

getFormat()​

getFormat(): number

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:371

Returns​

number

Inherited from​

ElementNode.getFormat

getFormatFlags()​

getFormatFlags(type, alignWithFormat): number

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:633

Returns the format flags applied to the node as a 32-bit integer.

Parameters​
type​

TextFormatType

alignWithFormat​

number | null

Returns​

number

a number representing the TextFormatTypes applied to the node.

Inherited from​

ElementNode.getFormatFlags

getFormatType()​

getFormatType(): ElementFormatType

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

Returns​

ElementFormatType

Inherited from​

ElementNode.getFormatType

getIDs()​

getIDs(): string[]

Defined in: packages/lexical-mark/src/MarkNode.ts:121

Returns​

string[]

getIndent()​

getIndent(): number

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:383

Returns​

number

Inherited from​

ElementNode.getIndent

getIndexWithinParent()​

getIndexWithinParent(): number

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

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

Returns​

number

Inherited from​

ElementNode.getIndexWithinParent

getKey()​

getKey(): string

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

Returns this nodes key.

Returns​

string

Inherited from​

ElementNode.getKey

getLastChild()​

getLastChild(): LexicalNode | null

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:521

Returns the last child of this node, or null if it has no children.

Returns​

LexicalNode | null

Inherited from​

ElementNode.getLastChild

getLastChildOrThrow()​

getLastChildOrThrow(): LexicalNode

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:529

Returns the last child of this node, or throws if it has no children.

Returns​

LexicalNode

Inherited from​

ElementNode.getLastChildOrThrow

getLastDescendant()​

getLastDescendant(): LexicalNode | null

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:476

Returns the deepest last descendant of this node, or null if it has no children.

Returns​

LexicalNode | null

Inherited from​

ElementNode.getLastDescendant

getLatest()​

getLatest(): this

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

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​

ElementNode.getLatest

getNextSibling()​

getNextSibling(): LexicalNode | null

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

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

Returns​

LexicalNode | null

Inherited from​

ElementNode.getNextSibling

getNextSiblings()​

getNextSiblings(): LexicalNode[]

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

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

Returns​

LexicalNode[]

Inherited from​

ElementNode.getNextSiblings

getNodesBetween()​

getNodesBetween(targetNode): LexicalNode[]

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

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

Parameters​
targetNode​

LexicalNode

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

Returns​

LexicalNode[]

Inherited from​

ElementNode.getNodesBetween

getParent()​

getParent(): ElementNode | null

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

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

Returns​

ElementNode | null

Inherited from​

ElementNode.getParent

getParentKeys()​

getParentKeys(): string[]

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

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

Returns​

string[]

Inherited from​

ElementNode.getParentKeys

getParentOrThrow()​

getParentOrThrow(): ElementNode

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

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

Returns​

ElementNode

Inherited from​

ElementNode.getParentOrThrow

getParents()​

getParents(): ElementNode[]

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

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

Returns​

ElementNode[]

Inherited from​

ElementNode.getParents

getPreviousSibling()​

getPreviousSibling(): LexicalNode | null

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

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

Returns​

LexicalNode | null

Inherited from​

ElementNode.getPreviousSibling

getPreviousSiblings()​

getPreviousSiblings(): LexicalNode[]

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

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

Returns​

LexicalNode[]

Inherited from​

ElementNode.getPreviousSiblings

getStyle()​

getStyle(): string

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:379

Returns​

string

Inherited from​

ElementNode.getStyle

getTextContent()​

getTextContent(): string

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:567

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​

ElementNode.getTextContent

getTextContentSize()​

getTextContentSize(): number

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:586

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

Returns​

number

Inherited from​

ElementNode.getTextContentSize

getTextFormat()​

getTextFormat(): number

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:613

Returns​

number

Inherited from​

ElementNode.getTextFormat

getTextStyle()​

getTextStyle(): string

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:639

Returns​

string

Inherited from​

ElementNode.getTextStyle

getTopLevelElement()​

getTopLevelElement(): ElementNode | null

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:257

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

Inherited from​

ElementNode.getTopLevelElement

getTopLevelElementOrThrow()​

getTopLevelElementOrThrow(): ElementNode

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:258

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

Returns​

ElementNode

Inherited from​

ElementNode.getTopLevelElementOrThrow

getType()​

getType(): string

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

Returns the string type of this node.

Returns​

string

Inherited from​

ElementNode.getType

getWritable()​

getWritable(): this

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

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​

ElementNode.getWritable

hasFormat()​

hasFormat(type): boolean

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:617

Parameters​
type​

ElementFormatType

Returns​

boolean

Inherited from​

ElementNode.hasFormat

hasID()​

hasID(id): boolean

Defined in: packages/lexical-mark/src/MarkNode.ts:117

Parameters​
id​

string

Returns​

boolean

hasTextFormat()​

hasTextFormat(type): boolean

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:624

Parameters​
type​

TextFormatType

Returns​

boolean

Inherited from​

ElementNode.hasTextFormat

insertAfter()​

insertAfter(nodeToInsert, restoreSelection?): LexicalNode

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

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

Parameters​
nodeToInsert​

LexicalNode

The node to insert after this one.

restoreSelection?​

boolean = true

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

Returns​

LexicalNode

Inherited from​

ElementNode.insertAfter

insertBefore()​

insertBefore(nodeToInsert, restoreSelection?): LexicalNode

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

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

Parameters​
nodeToInsert​

LexicalNode

The node to insert before this one.

restoreSelection?​

boolean = true

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

Returns​

LexicalNode

Inherited from​

ElementNode.insertBefore

insertNewAfter()​

insertNewAfter(selection, restoreSelection?): ElementNode | null

Defined in: packages/lexical-mark/src/MarkNode.ts:147

Parameters​
selection​

RangeSelection

restoreSelection?​

boolean = true

Returns​

ElementNode | null

Inherited from​

ElementNode.insertNewAfter

is()​

is(object): boolean

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

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​

ElementNode.is

isAttached()​

isAttached(): boolean

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

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​

ElementNode.isAttached

isBefore()​

isBefore(targetNode): boolean

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

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

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

Parameters​
targetNode​

LexicalNode

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

Returns​

boolean

Inherited from​

ElementNode.isBefore

isDirty()​

isDirty(): boolean

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:412

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

Returns​

boolean

Inherited from​

ElementNode.isDirty

isEmpty()​

isEmpty(): boolean

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:406

Returns​

boolean

Inherited from​

ElementNode.isEmpty

isInline()​

isInline(): true

Defined in: packages/lexical-mark/src/MarkNode.ts:168

If the method is overridden and returns true, ensure that canBeEmpty() returns false for the inline node to work correctly

Returns​

true

Inherited from​

ElementNode.isInline

isLastChild()​

isLastChild(): boolean

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:417

Returns​

boolean

Inherited from​

ElementNode.isLastChild

isParentOf()​

isParentOf(targetNode): boolean

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

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

Parameters​
targetNode​

LexicalNode

the would-be child node.

Returns​

boolean

Inherited from​

ElementNode.isParentOf

isParentRequired()​

isParentRequired(): boolean

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

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​

ElementNode.isParentRequired

isSelected()​

isSelected(selection?): boolean

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

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​

ElementNode.isSelected

isShadowRoot()​

isShadowRoot(): boolean

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:996

Returns​

boolean

Inherited from​

ElementNode.isShadowRoot

markDirty()​

markDirty(): void

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

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

Returns​

void

Inherited from​

ElementNode.markDirty

remove()​

remove(preserveEmptyParent?): void

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

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​

ElementNode.remove

replace()​

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

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

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​

ElementNode.replace

resetOnCopyNodeFrom()​

resetOnCopyNodeFrom(originalNode): void

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

Reset state in this copy of originalNode, if necessary

Parameters​
originalNode​

this

Returns​

void

Inherited from​

ElementNode.resetOnCopyNodeFrom

select()​

select(_anchorOffset?, _focusOffset?): RangeSelection

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:646

Parameters​
_anchorOffset?​

number

_focusOffset?​

number

Returns​

RangeSelection

Inherited from​

ElementNode.select

selectEnd()​

selectEnd(): RangeSelection

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:695

Returns​

RangeSelection

Inherited from​

ElementNode.selectEnd

selectNext()​

selectNext(anchorOffset?, focusOffset?): RangeSelection

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

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

Parameters​
anchorOffset?​

number

The anchor offset for selection.

focusOffset?​

number

The focus offset for selection

Returns​

RangeSelection

Inherited from​

ElementNode.selectNext

selectPrevious()​

selectPrevious(anchorOffset?, focusOffset?): RangeSelection

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

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

Parameters​
anchorOffset?​

number

The anchor offset for selection.

focusOffset?​

number

The focus offset for selection

Returns​

RangeSelection

Inherited from​

ElementNode.selectPrevious

selectStart()​

selectStart(): RangeSelection

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:691

Returns​

RangeSelection

Inherited from​

ElementNode.selectStart

setDirection()​

setDirection(direction): this

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:708

Parameters​
direction​

"ltr" | "rtl" | null

Returns​

this

Inherited from​

ElementNode.setDirection

setFormat()​

setFormat(type): this

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:713

Parameters​
type​

ElementFormatType

Returns​

this

Inherited from​

ElementNode.setFormat

setIDs()​

setIDs(ids): this

Defined in: packages/lexical-mark/src/MarkNode.ts:125

Parameters​
ids​

readonly string[]

Returns​

this

setIndent()​

setIndent(indentLevel): this

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:733

Parameters​
indentLevel​

number

Returns​

this

Inherited from​

ElementNode.setIndent

setStyle()​

setStyle(style): this

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:718

Parameters​
style​

string

Returns​

this

Inherited from​

ElementNode.setStyle

setTextFormat()​

setTextFormat(type): this

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:723

Parameters​
type​

number

Returns​

this

Inherited from​

ElementNode.setTextFormat

setTextStyle()​

setTextStyle(style): this

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:728

Parameters​
style​

string

Returns​

this

Inherited from​

ElementNode.setTextStyle

splice()​

splice(start, deleteCount, nodesToInsert): this

Defined in: packages/lexical/src/nodes/LexicalElementNode.ts:738

Parameters​
start​

number

deleteCount​

number

nodesToInsert​

LexicalNode[]

Returns​

this

Inherited from​

ElementNode.splice

updateDOM()​

updateDOM(prevNode, element, config): boolean

Defined in: packages/lexical-mark/src/MarkNode.ts:91

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​

this

element​

HTMLElement

config​

EditorConfig

Returns​

boolean

Inherited from​

ElementNode.updateDOM

updateFromJSON()​

updateFromJSON(serializedNode): this

Defined in: packages/lexical-mark/src/MarkNode.ts:58

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​

LexicalParseJSON<SerializedMarkNode>

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

The whole schema is applied, so a property the JSON omits is set to its schema default rather than left as it is — that is what lets the compact form omit a default-valued property and have parsing restore it. (A flat NodeState is the exception: it is applied only when present.) Pass the node's complete serialized form unless you mean to reset what you leave out.

Inherited from​

ElementNode.updateFromJSON

clone()​

static clone(_data): LexicalNode

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

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

Parameters​
_data​

unknown

Returns​

LexicalNode

Inherited from​

ElementNode.clone

getType()​

static getType(): string

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

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​

ElementNode.getType

importJSON()​

static importJSON(_serializedNode): LexicalNode

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

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​

Omit<SerializedLexicalNode & Partial<SerializedLexicalNode>, "$slots" | "children" | "version"> & object & Record<string, unknown>

Returns​

LexicalNode

Inherited from​

ElementNode.importJSON

transform()​

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

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

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​

ElementNode.transform

Interfaces​

MarkBaseInit​

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2607

Experimental

The init result of MarkBaseExtension.

MarkBaseOutput​

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2619

Experimental

Output of MarkBaseExtension.

Properties​

flavors​

flavors: ReadonlyMap<string, AnyMarkFlavorExtension>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2621

Experimental

The mark flavors of the editor, by their stateKey

MarkFlavorDefinition​

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2715

Experimental

The argument of defineMarkExtension.

Type Parameters​

Name​

Name extends string

Key​

Key extends string

Properties​

attribute?​

optional attribute?: string

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2732

Experimental

The attribute that marked leaves are rendered with (and that HTML export writes with exportIDsToHTML, and HTML import reads). Defaults to data-lexical- followed by the key in kebab case: data-lexical-comment-ids for commentIds. It is lowercased, as HTML stores attribute names.

className?​

optional className?: string

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2734

Experimental

The classes of a leaf with at least one shown id (space separated)

config?​

optional config?: Partial<MarkStateConfig>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2738

Experimental

Defaults for the flavor's config, which configExtension overrides

name​

name: Name

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2717

Experimental

The extension's name, unique in the editor, such as '@app/CommentMarks'

overlapClassName?​

optional overlapClassName?: string

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2736

Experimental

The classes of a leaf with more than one shown id (space separated)

stateKey​

stateKey: MarkStateKeyCheck<Key>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2724

Experimental

The NodeState key the ids are stored under, such as 'commentIds': a leaf with comment c1 has "$": {"commentIds": ["c1"]} in its JSON. Every flavor in an editor needs its own key, and 'markIds' belongs to MarkStateExtension.

MarkIDsChange​

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:202

Experimental

What registerMarkIDsListener reports after a commit that changed which ids of a mark flavor are in the document.

Properties​

added​

added: ReadonlySet<string>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:204

Experimental

The ids that no leaf carried before and at least one carries now

ids​

ids: ReadonlySet<string>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:206

Experimental

Every id of the flavor in the document now

removed​

removed: ReadonlySet<string>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:208

Experimental

The ids that some leaf carried before and none carries now

tags​

tags: ReadonlySet<string>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:214

Experimental

The tags of the update that made the change, for example COLLABORATION_TAG for a collaborator's edit or HISTORIC_TAG for an undo or redo. Empty for the first call of a listener.

MarkStateConfig​

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:118

Experimental

Configuration for MarkStateExtension.

Properties​

disabled​

disabled: boolean

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:127

Experimental

When true, mark ids are not rendered in the editor DOM, the markIDNodeKeys output is emptied and no longer maintained, and text inserted next to a marked run no longer has its ids adjusted (it keeps whatever ids the TextNode it lands in has). The ids stay in the document, the $ functions keep working, and HTML export (with exportIDsToHTML) and import still write and read the ids.

exportIDsToHTML​

exportIDsToHTML: boolean

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:135

Experimental

When true, HTML export ($generateHtmlFromNodes, and so copying to the clipboard as text/html) writes the data-lexical-mark-ids attribute on marked leaves, so that the ids survive an HTML round trip. Default false, like MarkNode, which exports no ids: they are often internal thread ids that should not leak into other applications.

isMarkIDShown?​

optional isMarkIDShown?: (id) => boolean

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:171

Experimental

Which mark ids are rendered in the editor DOM. A leaf gets the mark theme class and the data-lexical-mark-ids attribute for the ids this returns true for (and markOverlap when there is more than one), and no decoration when it returns false for all of them. The default shows every id.

Use it to hide resolved comment threads while their ids stay in the document. It only changes rendering: the ids stay in the document, and the $ functions, the markIDNodeKeys output and HTML export still see every id. It is called during reconciliation, so it should be a cheap, pure read of the app's own state.

To change it at runtime, for example when a thread is resolved or reopened, update the app's state and assign a new function to the isMarkIDShown output signal: the marked leaves are re-rendered (after the pending update commits, when assigned during one). Changing the state that the current function reads without assigning a new function does not re-render them.

Parameters​
id​

string

Returns​

boolean

markableNodes​

markableNodes: readonly MarkableNodeMatch[]

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:150

Experimental

The nodes that carry mark ids: a node is markable when it is an instance of one of these classes or one of these guards returns true for it. Marking a range marks the markable nodes in it, and the ElementNodes and slot hosts in it are looked through (their children and their slots). Use it for leaves: TextNode, LineBreakNode and DecoratorNode subclasses.

The default is [TextNode, LineBreakNode, $isInlineDecoratorNode]: TextNode and its subclasses, LineBreakNode, and every inline DecoratorNode (which includes DecoratorTextNode from @lexical/extension). To extend it, spread the default: [...DEFAULT_MARKABLE_NODES, MyBlockDecoratorNode]. Every editor that edits the same document should use the same set.

MarkStateInit​

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:230

Experimental

The init result of a mark flavor extension: state that outlives a disabled toggle.

Properties​

markIDNodeKeys​

markIDNodeKeys: Signal<ReadonlyMap<string, readonly string[]>>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:231

Experimental

MarkStateOutput​

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:179

Experimental

Output of MarkStateExtension.

Properties​

disabled​

disabled: Signal<boolean>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:180

Experimental

exportIDsToHTML​

exportIDsToHTML: Signal<boolean>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:181

Experimental

isMarkIDShown​

isMarkIDShown: Signal<(id) => boolean>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:187

Experimental

The isMarkIDShown config, which defaults to showing every id. Assign a new function to re-render the marked leaves with it, for example when a thread is resolved or reopened.

markIDNodeKeys​

markIDNodeKeys: ReadonlySignal<ReadonlyMap<string, readonly string[]>>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:193

Experimental

Every mark id in the document, mapped to the keys of the leaves that carry it (in no particular order). A new Map is published after each update that changes it. Empty while the extension is disabled.

Type Aliases​

AnyMarkFlavorExtension​

AnyMarkFlavorExtension = MarkFlavorExtension<string, string>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2689

Experimental

Any MarkFlavorExtension.

MarkableNodeMatch​

MarkableNodeMatch = Klass<LexicalNode> | ((node) => boolean)

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:100

Experimental

A node class, matched with instanceof, or a guard function, as used in the markableNodes config of MarkStateExtension.

MarkFlavorExtension​

MarkFlavorExtension<Name, Key> = LexicalExtension<MarkStateConfig, Name, MarkStateOutput, MarkStateInit> & object

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2672

Experimental

A mark flavor: an extension that stores one kind of annotation ids (comments, suggestions, highlights) in its own set-valued NodeState key, renders them with its own attribute and classes, and reports them to its own listeners. Made with defineMarkExtension; MarkStateExtension is the default flavor. The $ functions of @lexical/mark take one as their first argument.

Type Declaration​

attribute​

readonly attribute: string

The attribute that marked leaves are rendered with

stateKey​

readonly stateKey: Key

The NodeState key that the ids are stored under

Type Parameters​

Name​

Name extends string = string

Key​

Key extends string = string

MarkIDsListener​

MarkIDsListener = (change) => void

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:222

Experimental

A listener registered with registerMarkIDsListener.

Parameters​

change​

MarkIDsChange

Returns​

void

MarkStateKeyCheck​

MarkStateKeyCheck<Key> = string extends Key ? "stateKey must be a string literal, such as "commentIds"" : Key extends "" ? "stateKey must not be empty: use a name such as "commentIds"" : Key extends `${string}${" " | "\t" | "\n" | "\r"}${string}` ? "stateKey must not contain whitespace: use a name such as "commentIds"" : Key extends typeof MARK_STATE_KEY ? ""markIds" is the key of MarkStateExtension, the default flavor. Choose another stateKey, such as "commentIds"" : Key extends "__proto__" ? "stateKey must not be "__proto__", which objects cannot hold as a key: use a name such as "commentIds"" : Key

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2698

Experimental

The type rules of a stateKey for defineMarkExtension: the key itself when it is valid, otherwise a message that says how to fix it, which is what the type error shows.

Type Parameters​

Key​

Key extends string

SerializedMarkNode​

SerializedMarkNode = Spread<{ ids: string[]; }, SerializedElementNode>

Defined in: packages/lexical-mark/src/MarkNode.ts:33

Variables​

DEFAULT_MARKABLE_NODES​

const DEFAULT_MARKABLE_NODES: readonly MarkableNodeMatch[]

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:331

Experimental

The default markableNodes of MarkStateExtension: TextNode, LineBreakNode and inline DecoratorNodes (including DecoratorTextNode).

MARK_STATE_IDS_ATTRIBUTE​

const MARK_STATE_IDS_ATTRIBUTE: "data-lexical-mark-ids" = 'data-lexical-mark-ids'

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:111

Experimental

The attribute that MarkStateExtension renders on the element of each marked leaf in the editor, holding its space separated ids. HTML export writes it when exportIDsToHTML is set, and HTML import reads it back.

MARK_STATE_KEY​

const MARK_STATE_KEY: "markIds" = 'markIds'

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:92

Experimental

The NodeState key that MarkStateExtension stores mark ids under: a leaf covered by c1 and c2 has {"markIds": ["c1", "c2"]} (sorted) in the $ record of its JSON.

The state is an arraySetValue (see lexical), so its schema marks it as a set whose members are independent: code that stores or merges NodeState can treat each id separately.

MarkBaseExtension​

const MarkBaseExtension: LexicalExtension<ExtensionConfigBase, typeof MARK_BASE_EXTENSION_NAME, MarkBaseOutput, MarkBaseInit>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2637

Experimental

The shared base of the mark flavors (MarkStateExtension and every extension made with defineMarkExtension), which all depend on it, so an editor rarely lists it itself. It keeps the registry of the editor's flavors (the flavors output), rejects two flavors that share a stateKey or an attribute when the editor is built, and lets the inserted-text rules of the flavors tell each other's work from inserted content. See also $getMarkIDsByFlavor.

(MarkExtension is the extension that registers MarkNode.)

MarkExtension​

const MarkExtension: LexicalExtension<ExtensionConfigBase, "@lexical/mark", unknown, unknown>

Defined in: packages/lexical-mark/src/index.ts:166

Configures MarkNode

MarkStateExtension​

const MarkStateExtension: MarkFlavorExtension<typeof MARK_STATE_EXTENSION_NAME, typeof MARK_STATE_KEY>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:3127

Experimental

An experimental alternative to MarkNode for comments and other annotations: the mark ids are stored as a set-valued NodeState (markIds, a sorted array in JSON) on the leaves they cover (TextNode, LineBreakNode and inline DecoratorNode by default, see markableNodes), instead of wrapping them in a MarkNode.

  • Marks overlap freely: text covered by two comments is one TextNode with both ids, not a MarkNode split into sibling wrappers.
  • Adding or removing an id changes NodeState only; it never moves, re-creates or wraps text. (Adding or removing it on part of a TextNode splits that TextNode, and TextNodes left with the same ids merge back.)
  • The ids live on the leaves, so they travel with the text: typing inside a marked run, copying, cutting or deleting text keeps its ids with it.
  • Marked leaves are rendered with the mark (and, for more than one id, markOverlap) theme classes and a data-lexical-mark-ids attribute. With exportIDsToHTML, HTML export writes that attribute too; the @lexical/html import pipeline reads it back. isMarkIDShown limits which ids are rendered (to hide resolved threads, for example), and can be changed at runtime through the output signal of the same name.
  • Text inserted at the edge of a marked run does not join it, like MarkNode; text inserted inside a run does. Text that replaces a selection also gets the ids all of the replaced text had, and pasted content keeps its own ids (pasted marked text stays marked). Text that the edit moves into a new TextNode (a hashtag, a segmented node turned into text) keeps its ids, except an id removed with $removeMarkID in the same update. A TextNode is split where its text gets different ids when its pieces stay of its own class (TextNode, or the class that replaces it); other TextNodes (a token or segmented node, a hashtag) get every id their text had.

Use $addMarkID, $removeMarkID, $getMarkIDsAtSelection and $getNodeMarkIDs to work with the ids, the markIDNodeKeys output to find the nodes of an id, registerMarkIDsListener to learn when ids appear or disappear, and $migrateMarkNodesToMarkState to convert MarkNode documents.

It is the default mark flavor: defineMarkExtension makes more, one per kind of annotation, each on its own NodeState key.

Functions​

$addMarkID()​

Call Signature​

$addMarkID(flavor, id, selection): LexicalNode[]

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:513

The flavor-first form: like the form below (which keeps its place as the last overload, the one Parameters and ReturnType read), for the ids of flavor instead of MarkStateExtension's.

Parameters​
flavor​

AnyMarkFlavorExtension

A mark flavor made with defineMarkExtension

id​

string

The mark id

selection​

BaseSelection

The selection to mark

Returns​

LexicalNode[]

Call Signature​

$addMarkID(id, selection): LexicalNode[]

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:535

Experimental

Add the mark id to every markable node in selection (TextNode, LineBreakNode and inline DecoratorNode by default, see markableNodes), including the content of the slots of the nodes in it, splitting the TextNodes at its boundaries. Ids already on those nodes are kept, so marks can overlap freely. A collapsed selection marks nothing.

The id is added to MarkStateExtension's ids, or to the ids of the flavor passed first: $addMarkID(CommentMarks, 'c1', selection).

Parameters​
id​

string

The mark id, for example a comment thread id. It must be a non-empty string without whitespace, otherwise this throws.

selection​

BaseSelection

The selection to mark

Returns​

LexicalNode[]

The nodes that now carry the id

$createMarkNode()​

$createMarkNode(ids?): MarkNode

Defined in: packages/lexical-mark/src/MarkNode.ts:200

Parameters​

ids?​

readonly string[] = NO_IDS

Returns​

MarkNode

$getMarkIDs()​

$getMarkIDs(node, offset): string[] | null

Defined in: packages/lexical-mark/src/index.ts:144

Parameters​

node​

TextNode

offset​

number

Returns​

string[] | null

$getMarkIDsAtSelection()​

Call Signature​

$getMarkIDsAtSelection(flavor, selection?, mode?): string[]

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:714

The flavor-first form: like the form below (which keeps its place as the last overload, the one Parameters and ReturnType read), for the ids of flavor instead of MarkStateExtension's.

Parameters​
flavor​

AnyMarkFlavorExtension

A mark flavor made with defineMarkExtension

selection?​

BaseSelection | null

The selection, defaults to the current selection

mode?​

"any" | "all"

'any' or 'all', for a selection that is not collapsed

Returns​

string[]

Call Signature​

$getMarkIDsAtSelection(selection?, mode?): string[]

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:736

Experimental

Get the mark ids at a selection, sorted. For a collapsed RangeSelection these are the ids of the leaf holding the caret (or of the next leaf, when the caret is at the end of an unmarked TextNode), like $getMarkIDs does for MarkNode. Otherwise, mode 'any' (the default) returns the ids on any selected leaf, and 'all' the ids shared by every selected leaf. The TextNodes that a RangeSelection only touches at an edge are ignored.

These are MarkStateExtension's ids, or the ids of the flavor passed first: $getMarkIDsAtSelection(CommentMarks).

Parameters​
selection?​

BaseSelection | null

The selection, defaults to the current selection

mode?​

"any" | "all"

'any' or 'all', for a selection that is not collapsed

Returns​

string[]

The ids, sorted

$getMarkIDsByFlavor()​

$getMarkIDsByFlavor(node): Record<string, string[]>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:3069

Experimental

Get the ids of every mark flavor of the active editor on a node, by stateKey, sorted: {commentIds: ['c1'], suggestionIds: []}. A flavor whose markableNodes do not include the node has an empty array.

Parameters​

node​

LexicalNode

The node

Returns​

Record<string, string[]>

New arrays, which the caller may change

$getNodeMarkIDs()​

Call Signature​

$getNodeMarkIDs(flavor, node): string[]

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:392

The flavor-first form: like the form below (which keeps its place as the last overload, the one Parameters and ReturnType read), for the ids of flavor instead of MarkStateExtension's.

Parameters​
flavor​

AnyMarkFlavorExtension

A mark flavor made with defineMarkExtension

node​

LexicalNode

The node

Returns​

string[]

Call Signature​

$getNodeMarkIDs(node): string[]

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:406

Experimental

Get the mark ids stored on a node, sorted: the ids of MarkStateExtension, or of the flavor passed first. Nodes that cannot carry ids return an empty array.

Parameters​
node​

LexicalNode

The node

Returns​

string[]

A new array of the ids, sorted, which the caller may change

$isInlineDecoratorNode()​

$isInlineDecoratorNode(node): node is DecoratorNode<unknown>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:319

Experimental

Inline DecoratorNodes, one of the default markableNodes of MarkStateExtension. This includes DecoratorTextNode.

Parameters​

node​

LexicalNode | null | undefined

Returns​

node is DecoratorNode<unknown>

$isMarkNode()​

$isMarkNode(node): node is MarkNode

Defined in: packages/lexical-mark/src/MarkNode.ts:204

Parameters​

node​

LexicalNode | null

Returns​

node is MarkNode

$migrateMarkNodesToMarkState()​

Call Signature​

$migrateMarkNodesToMarkState(flavor, node?): number

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:794

The flavor-first form: like the form below (which keeps its place as the last overload, the one Parameters and ReturnType read), for the ids of flavor instead of MarkStateExtension's.

Parameters​
flavor​

AnyMarkFlavorExtension

A mark flavor made with defineMarkExtension

node?​

LexicalNode

The subtree to convert, defaults to the root

Returns​

number

Call Signature​

$migrateMarkNodesToMarkState(node?): number

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:818

Experimental

Convert a document that uses MarkNode into one that uses MarkStateExtension: the ids of every MarkNode (including the ids of MarkNodes it is nested in) are added to the leaves inside it, and the MarkNode is unwrapped.

Run this once per document, before anything else edits it (for example in a headless editor): the unwrap is a structural change, and an edit made at the same time by another writer races with it as with any MarkNode edit. Like $addMarkID, it throws on an id that is empty or contains whitespace.

The ids go to MarkStateExtension, or to the flavor passed first: $migrateMarkNodesToMarkState(CommentMarks).

Parameters​
node?​

LexicalNode

The subtree to convert, defaults to the root

Returns​

number

The number of MarkNodes that were unwrapped

$removeMarkID()​

Call Signature​

$removeMarkID(flavor, id, selection?): void

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:631

The flavor-first form: like the form below (which keeps its place as the last overload, the one Parameters and ReturnType read), for the ids of flavor instead of MarkStateExtension's.

Parameters​
flavor​

AnyMarkFlavorExtension

A mark flavor made with defineMarkExtension

id​

string

The mark id

selection?​

BaseSelection | null

Limit the removal to this selection

Returns​

void

Call Signature​

$removeMarkID(id, selection?): void

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:651

Experimental

Remove the mark id. With a selection it is removed from the nodes in that selection only (splitting the TextNodes at its boundaries), otherwise from the whole document (found through the markIDNodeKeys output, or by walking the document when the extension is not active). Text that no longer differs from its neighbors is merged back by normalization.

The id is removed from MarkStateExtension's ids, or from the ids of the flavor passed first: $removeMarkID(CommentMarks, 'c1').

Parameters​
id​

string

The mark id

selection?​

BaseSelection | null

Limit the removal to this selection

Returns​

void

$unwrapMarkNode()​

$unwrapMarkNode(node): void

Defined in: packages/lexical-mark/src/index.ts:28

Parameters​

node​

MarkNode

Returns​

void

$wrapSelectionInMarkNode()​

$wrapSelectionInMarkNode(selection, isBackward, id, createNode?): void

Defined in: packages/lexical-mark/src/index.ts:43

Parameters​

selection​

RangeSelection

isBackward​

boolean

id​

string

createNode?​

(ids) => MarkNode

Returns​

void

defineMarkExtension()​

defineMarkExtension<Name, Key>(definition): MarkFlavorExtension<Name, Key>

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:2976

Experimental

Define a mark flavor: an extension for one kind of annotation, such as comments, suggestions or highlights, that works like MarkStateExtension on its own NodeState key. Two flavors on the same text never see each other's ids: each has its own key, its own rendering (className, overlapClassName, attribute), its own config (isMarkIDShown, disabled, markableNodes, exportIDsToHTML) and output, and its own registerMarkIDsListener listeners. Pass the flavor first to the $ functions: $addMarkID(CommentMarks, 'c1', selection).

The ids say which text an annotation covers, nothing more: keep the annotation's data (author, body, resolved) in your own store, keyed by id.

export const CommentMarks = defineMarkExtension({
  className: 'comment',
  name: '@app/CommentMarks',
  overlapClassName: 'comment-overlap',
  stateKey: 'commentIds',
});

The stateKey must be a non-empty string literal without whitespace, other than 'markIds' (MarkStateExtension's); a type error says which rule it breaks. Two flavors with the same key or attribute in one editor throw when the editor is built.

@NO_SIDE_EFFECTS

Type Parameters​

Name​

Name extends string

Key​

Key extends string

Parameters​

definition​

MarkFlavorDefinition<Name, Key>

Returns​

MarkFlavorExtension<Name, Key>

registerMarkIDsListener()​

registerMarkIDsListener(editor, flavor, listener): () => void

Defined in: packages/lexical-mark/src/MarkStateExtension.ts:3027

Experimental

Call listener after each commit that changes which ids of flavor are in the document, with the ids that appeared (added: no leaf carried them before), the ids that disappeared (removed: no leaf carries them now), every id now (ids) and the update's tags. If the document already has ids, it is also called right away, with all of them in added.

Use it to keep your own store in step with the text: when all of a comment's text is deleted its id is removed, so mark the thread orphaned rather than deleting it; an undo or a paste that brings the text back reports it added again. Check tags for COLLABORATION_TAG to leave a collaborator's edit to the peer that made it, and for HISTORIC_TAG to tell undo and redo.

Nothing is reported while the flavor is disabled (the ids stay in the document); when it is enabled again, the listener gets the net change.

Parameters​

editor​

LexicalEditor

An editor built with flavor

flavor​

AnyMarkFlavorExtension

MarkStateExtension or a flavor made with defineMarkExtension

listener​

MarkIDsListener

Called with a MarkIDsChange

Returns​

A function that unregisters the listener

() => void