Lexical is an extensible text editor framework that provides excellent reliability, accessible and performance.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
Essential utility functions for DOM operations, node manipulation, and editor interaction. These utilities provide the building blocks for working with Lexical's editor system and integrating with the DOM.
Core functions for accessing and manipulating nodes within the editor.
/**
* Get the root node of the editor
* @returns Root node of the current editor
*/
function $getRoot(): RootNode;
/**
* Get a node by its unique key
* @param key - Node key to lookup
* @returns Node instance or null if not found
*/
function $getNodeByKey(key: NodeKey): LexicalNode | null;
/**
* Get a node by key or throw if not found
* @param key - Node key to lookup
* @returns Node instance
* @throws Error if node not found
*/
function $getNodeByKeyOrThrow<T extends LexicalNode>(key: NodeKey): T;
/**
* Get the active editor instance
* @returns Current editor instance
*/
function $getEditor(): LexicalEditor;
/**
* Create a node using its constructor
* @param klass - Node constructor class
* @param args - Constructor arguments
* @returns New node instance
*/
function $create<T extends LexicalNode>(
klass: Klass<T>,
...args: any[]
): T;
/**
* Copy a node with all its properties
* @param node - Node to copy
* @returns Copied node instance
*/
function $copyNode<T extends LexicalNode>(node: T): T;
/**
* Clone node with specific properties
* @param node - Node to clone
* @param options - Cloning options
* @returns Cloned node
*/
function $cloneWithProperties<T extends LexicalNode>(node: T): T;
/**
* Apply node replacement transformations
* @param node - Node to transform
* @returns Transformed node
*/
function $applyNodeReplacement<T extends LexicalNode>(node: T): T;Convenient factory functions for creating common node types.
/**
* Create a new TextNode
* @param text - Initial text content
* @returns New TextNode instance
*/
function $createTextNode(text?: string): TextNode;
/**
* Create a new ParagraphNode
* @returns New ParagraphNode instance
*/
function $createParagraphNode(): ParagraphNode;
/**
* Create a new LineBreakNode
* @returns New LineBreakNode instance
*/
function $createLineBreakNode(): LineBreakNode;
/**
* Create a new TabNode
* @returns New TabNode instance
*/
function $createTabNode(): TabNode;Functions for querying and traversing the node tree.
/**
* Get all nodes of a specific type
* @param klass - Node class to search for
* @returns Array of nodes of the specified type
*/
function $nodesOfType<T extends LexicalNode>(klass: Klass<T>): Array<T>;
/**
* Get adjacent node in specified direction
* @param node - Starting node
* @param isBackward - Direction to search
* @returns Adjacent node or null
*/
function $getAdjacentNode(node: LexicalNode, isBackward: boolean): LexicalNode | null;
/**
* Check if node has a specific ancestor
* @param node - Node to check
* @param targetNode - Potential ancestor node
* @returns True if targetNode is an ancestor
*/
function $hasAncestor(node: LexicalNode, targetNode: LexicalNode): boolean;
/**
* Get nearest root or shadow root
* @param node - Starting node
* @returns Root or shadow root node
*/
function $getNearestRootOrShadowRoot(node: LexicalNode): ElementNode;
/**
* Check if node is root or shadow root
* @param node - Node to check
* @returns True if node is root or shadow root
*/
function $isRootOrShadowRoot(node: LexicalNode | null | undefined): boolean;
/**
* Check if node is a leaf node (no children)
* @param node - Node to check
* @returns True if node is leaf
*/
function $isLeafNode(node: LexicalNode): boolean;
/**
* Check if node is inline element or decorator
* @param node - Node to check
* @returns True if inline element or decorator
*/
function $isInlineElementOrDecoratorNode(node: LexicalNode): boolean;Utility functions for checking node types and characteristics.
/**
* Check if text node is token or segmented
* @param node - Node to check
* @returns True if token or segmented
*/
function $isTokenOrSegmented(node: LexicalNode): boolean;
/**
* Check if text node is token or tab
* @param node - Node to check
* @returns True if token or tab
*/
function $isTokenOrTab(node: LexicalNode): boolean;
/**
* Internal function to check if node is block
* @param node - Node to check
* @returns True if block node
*/
function INTERNAL_$isBlock(node: ElementNode): boolean;Functions for working with selections and performing editor operations.
/**
* Select all content in the editor
* @returns RangeSelection covering all content
*/
function $selectAll(): RangeSelection;
/**
* Split a node at a specific position
* @param node - Node to split
* @param offset - Position to split at
* @returns Array of resulting nodes
*/
function $splitNode(node: LexicalNode, offset: number): [LexicalNode, LexicalNode];
/**
* Remove node from its parent
* @param node - Node to remove
*/
function removeFromParent(node: LexicalNode): void;
/**
* Set composition key for IME input
* @param compositionKey - Composition key string
*/
function $setCompositionKey(compositionKey: string | null): void;Functions for integrating with DOM elements and browser APIs.
/**
* Get nearest Lexical node from DOM node
* @param domNode - DOM node to start from
* @returns Nearest Lexical node or null
*/
function $getNearestNodeFromDOMNode(domNode: Node): LexicalNode | null;
/**
* Get nearest editor from DOM node
* @param domNode - DOM node to start from
* @returns Nearest editor instance or null
*/
function getNearestEditorFromDOMNode(domNode: Node): LexicalEditor | null;
/**
* Get editor property from DOM node
* @param domNode - DOM node to check
* @param editorPropertyName - Property name to retrieve
* @returns Property value or null
*/
function getEditorPropertyFromDOMNode(
domNode: Node,
editorPropertyName: string
): unknown;
/**
* Get DOM owner document
* @param node - Node to get document from
* @returns Document object
*/
function getDOMOwnerDocument(node: Node): Document;
/**
* Get DOM selection
* @param targetWindow - Window object to get selection from
* @returns Selection object or null
*/
function getDOMSelection(targetWindow?: Window): Selection | null;
/**
* Get DOM selection from target element
* @param target - Target element
* @returns Selection object or null
*/
function getDOMSelectionFromTarget(target: Node): Selection | null;
/**
* Get DOM text node
* @param node - Node to get text node from
* @returns Text node or null
*/
function getDOMTextNode(node: Node): Text | null;Functions for checking DOM node types and characteristics.
/**
* Check if object is a DOM node
* @param node - Object to check
* @returns True if DOM node
*/
function isDOMNode(node: unknown): node is Node;
/**
* Check if node is DOM text node
* @param node - Node to check
* @returns True if DOM text node
*/
function isDOMTextNode(node: Node): node is Text;
/**
* Check if node is DOM document
* @param node - Node to check
* @returns True if DOM document
*/
function isDOMDocumentNode(node: Node): node is Document;
/**
* Check if node is document fragment
* @param node - Node to check
* @returns True if document fragment
*/
function isDocumentFragment(node: Node): node is DocumentFragment;
/**
* Check if element is HTML element
* @param node - Node to check
* @returns True if HTML element
*/
function isHTMLElement(node: Node): node is HTMLElement;
/**
* Check if element is HTML anchor element
* @param node - Node to check
* @returns True if HTML anchor element
*/
function isHTMLAnchorElement(node: Node): node is HTMLAnchorElement;
/**
* Check if DOM node is block element
* @param node - Node to check
* @returns True if block element
*/
function isBlockDomNode(node: Node): boolean;
/**
* Check if DOM node is inline element
* @param node - Node to check
* @returns True if inline element
*/
function isInlineDomNode(node: Node): boolean;
/**
* Check if object is Lexical editor
* @param editor - Object to check
* @returns True if Lexical editor
*/
function isLexicalEditor(editor: unknown): editor is LexicalEditor;
/**
* Check if DOM node is unmanaged by Lexical
* @param node - Node to check
* @returns True if unmanaged
*/
function isDOMUnmanaged(node: Node): boolean;
/**
* Mark DOM node as unmanaged by Lexical
* @param node - Node to mark
* @param unmanaged - Whether to mark as unmanaged
*/
function setDOMUnmanaged(node: Node, unmanaged: boolean): void;Utilities for handling keyboard events and user input.
/**
* Check if keyboard event matches exact shortcut
* @param event - Keyboard event
* @param shortcut - Shortcut string
* @returns True if exact match
*/
function isExactShortcutMatch(event: KeyboardEvent, shortcut: string): boolean;
/**
* Check if modifier keys match
* @param event - Keyboard event
* @param modifier - Modifier combination
* @returns True if modifiers match
*/
function isModifierMatch(event: KeyboardEvent, modifier: string): boolean;
/**
* Check if selection is captured in decorator input
* @param selection - Selection to check
* @returns True if in decorator input
*/
function isSelectionCapturedInDecoratorInput(selection: BaseSelection): boolean;
/**
* Check if selection is within editor
* @param editor - Editor instance
* @param selection - Selection to check
* @returns True if selection is within editor
*/
function isSelectionWithinEditor(
editor: LexicalEditor,
selection: BaseSelection
): boolean;Functions for working with registered nodes and node configuration.
/**
* Get registered node class by type
* @param type - Node type string
* @returns Node class or null
*/
function getRegisteredNode(type: string): Klass<LexicalNode> | null;
/**
* Get registered node class or throw
* @param type - Node type string
* @returns Node class
* @throws Error if node type not registered
*/
function getRegisteredNodeOrThrow<T extends LexicalNode>(type: string): Klass<T>;
/**
* Set node indent from DOM element
* @param node - Node to set indent on
* @param element - DOM element to read indent from
*/
function setNodeIndentFromDOM(node: ElementNode, element: HTMLElement): void;
/**
* Build import map for node deserialization
* @param importMap - Mapping of node types to constructor functions
* @returns Normalized import map
*/
function buildImportMap<K extends string>(importMap: {
[key in K]: Klass<LexicalNode> | LexicalNodeReplacement;
}): Map<string, Klass<LexicalNode>>;
/**
* Experimental function to normalize selection
* @param selection - Selection to normalize
* @returns Normalized selection
*/
function $normalizeSelection__EXPERIMENTAL(selection: BaseSelection): BaseSelection;Functions for working with update tags and editor lifecycle.
/**
* Add update tag to current update
* @param tag - Tag to add
*/
function $addUpdateTag(tag: string): void;
/**
* Check if current update has tag
* @param tag - Tag to check for
* @returns True if update has tag
*/
function $hasUpdateTag(tag: string): boolean;
/**
* Register callback for update events
* @param callback - Function to call on update
* @returns Function to remove listener
*/
function $onUpdate(callback: () => void): () => void;
/**
* Reset random key generator
*/
function resetRandomKey(): void;Usage Examples:
import {
$getRoot,
$getNodeByKey,
$createTextNode,
$nodesOfType,
$selectAll,
getNearestEditorFromDOMNode,
isLexicalEditor
} from "lexical";
// Working with nodes
editor.update(() => {
const root = $getRoot();
const textNode = $createTextNode('Hello, world!');
// Query nodes
const allTextNodes = $nodesOfType(TextNode);
console.log('Found', allTextNodes.length, 'text nodes');
// Node manipulation
const nodeKey = textNode.getKey();
const retrievedNode = $getNodeByKey(nodeKey);
if (retrievedNode && $isTextNode(retrievedNode)) {
retrievedNode.setTextContent('Updated text');
}
// Select all content
const selection = $selectAll();
console.log('Selected text:', selection.getTextContent());
});
// DOM integration
const domElement = document.getElementById('editor-content');
if (domElement) {
const nearestEditor = getNearestEditorFromDOMNode(domElement);
if (isLexicalEditor(nearestEditor)) {
console.log('Found editor from DOM element');
}
}
// Working with update tags
editor.update(() => {
$addUpdateTag('user-action');
if ($hasUpdateTag('user-action')) {
console.log('This is a user-initiated update');
}
}, { tag: 'custom-update' });
// Type checking utilities
const someNode = $getNodeByKey('some-key');
if ($isTextNode(someNode)) {
console.log('Text content:', someNode.getTextContent());
} else if ($isParagraphNode(someNode)) {
console.log('Paragraph children:', someNode.getChildrenSize());
}These utilities form the foundation of Lexical's functionality, providing essential building blocks for editor operations, DOM integration, and node manipulation. They are designed to work seamlessly with Lexical's immutable state model and update system.