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
Advanced selection management with Range and Node selections, providing precise control over user selection and programmatic selection manipulation. Lexical's selection system is designed to handle complex text editing scenarios while maintaining immutable state principles.
Abstract base class for all selection types in Lexical.
/**
* Abstract base class for selections
*/
abstract class BaseSelection {
/** Clone this selection */
abstract clone(): BaseSelection;
/** Extract selected content */
abstract extract(): Array<LexicalNode>;
/** Insert nodes at selection */
abstract insertNodes(nodes: Array<LexicalNode>): void;
/** Insert text at selection */
abstract insertText(text: string): void;
/** Check if selection is collapsed */
abstract isCollapsed(): boolean;
/** Get nodes contained in selection */
abstract getNodes(): Array<LexicalNode>;
/** Get text content of selection */
abstract getTextContent(): string;
}Selection representing a text range with anchor and focus points.
/**
* Selection for text ranges with anchor and focus points
*/
class RangeSelection extends BaseSelection {
/** Anchor point of the selection */
anchor: Point;
/** Focus point of the selection */
focus: Point;
/** Format applied to selection */
format: number;
/** Style applied to selection */
style: string;
/** Clone this range selection */
clone(): RangeSelection;
/** Get text content of selection */
getTextContent(): string;
/** Insert text at selection */
insertText(text: string): void;
/** Insert nodes at selection */
insertNodes(nodes: Array<LexicalNode>): void;
/** Insert paragraph at selection */
insertParagraph(): void;
/** Insert line break at selection */
insertLineBreak(selectStart?: boolean): void;
/** Remove selected content */
removeText(): void;
/** Format selected text */
formatText(formatType: TextFormatType): void;
/** Check if selection is backward (focus before anchor) */
isBackward(): boolean;
/** Check if selection is collapsed */
isCollapsed(): boolean;
/** Modify selection range */
modify(alter: 'move' | 'extend', direction: 'backward' | 'forward', granularity: 'character' | 'word' | 'lineboundary'): void;
/** Delete character in direction */
deleteCharacter(isBackward: boolean): void;
/** Delete word in direction */
deleteWord(isBackward: boolean): void;
/** Delete line in direction */
deleteLine(isBackward: boolean): void;
/** Get selected nodes */
getNodes(): Array<LexicalNode>;
/** Extract selected content */
extract(): Array<LexicalNode>;
/** Apply style to selection */
applyStyle(style: string): void;
/** Check if selection has format */
hasFormat(type: TextFormatType): boolean;
/** Toggle format on selection */
toggleFormat(type: TextFormatType): void;
}
/**
* Create a new RangeSelection
* @param anchorKey - Key of anchor node
* @param anchorOffset - Offset in anchor node
* @param focusKey - Key of focus node
* @param focusOffset - Offset in focus node
* @param format - Text format bitmask
* @param style - Text style string
* @returns New RangeSelection instance
*/
function $createRangeSelection(): RangeSelection;
/**
* Create RangeSelection from DOM selection
* @param domSelection - DOM Selection object
* @param editor - Lexical editor instance
* @param anchorDOM - Anchor DOM node
* @param anchorOffset - Anchor offset
* @param focusDOM - Focus DOM node
* @param focusOffset - Focus offset
* @returns New RangeSelection instance
*/
function $createRangeSelectionFromDom(
domSelection: Selection,
editor: LexicalEditor,
anchorDOM: Node,
anchorOffset: number,
focusDOM: Node,
focusOffset: number
): RangeSelection | null;
/**
* Check if selection is a RangeSelection
* @param selection - Selection to check
* @returns True if selection is RangeSelection
*/
function $isRangeSelection(selection: BaseSelection | null | undefined): selection is RangeSelection;Selection representing selected nodes (not text ranges).
/**
* Selection for entire nodes
*/
class NodeSelection extends BaseSelection {
/** Set of selected node keys */
_nodes: Set<NodeKey>;
/** Clone this node selection */
clone(): NodeSelection;
/** Get selected nodes */
getNodes(): Array<LexicalNode>;
/** Get text content of selected nodes */
getTextContent(): string;
/** Insert text (replaces selected nodes) */
insertText(text: string): void;
/** Insert nodes (replaces selected nodes) */
insertNodes(nodes: Array<LexicalNode>): void;
/** Check if selection is collapsed (empty) */
isCollapsed(): boolean;
/** Extract selected nodes */
extract(): Array<LexicalNode>;
/** Add node to selection */
add(key: NodeKey): void;
/** Remove node from selection */
delete(key: NodeKey): void;
/** Clear all selected nodes */
clear(): void;
/** Check if node is selected */
has(key: NodeKey): boolean;
}
/**
* Create a new NodeSelection
* @returns New NodeSelection instance
*/
function $createNodeSelection(): NodeSelection;
/**
* Check if selection is a NodeSelection
* @param selection - Selection to check
* @returns True if selection is NodeSelection
*/
function $isNodeSelection(selection: BaseSelection | null | undefined): selection is NodeSelection;Point objects represent specific positions within the editor.
/**
* Represents a point in selection
*/
class Point {
/** Key of the node containing this point */
key: NodeKey;
/** Offset within the node */
offset: number;
/** Type of point */
type: 'text' | 'element';
/** Clone this point */
clone(): Point;
/** Check if points are equal */
is(point: Point): boolean;
/** Check if this point is before another */
isBefore(point: Point): boolean;
/** Get the node containing this point */
getNode(): LexicalNode;
/** Set point to new position */
set(key: NodeKey, offset: number, type: 'text' | 'element'): void;
}
/**
* Create a new Point
* @param key - Node key
* @param offset - Offset within node
* @param type - Point type
* @returns New Point instance
*/
function $createPoint(key: NodeKey, offset: number, type: 'text' | 'element'): Point;
// Point type interfaces
interface TextPointType {
key: NodeKey;
offset: number;
type: 'text';
}
interface ElementPointType {
key: NodeKey;
offset: number;
type: 'element';
}
type PointType = Point;Functions for working with selections and retrieving selection information.
/**
* Get the current editor selection
* @returns Current selection or null if none
*/
function $getSelection(): BaseSelection | null;
/**
* Set the editor selection
* @param selection - Selection to set
*/
function $setSelection(selection: BaseSelection | null): void;
/**
* Get previous selection state
* @returns Previous selection or null
*/
function $getPreviousSelection(): BaseSelection | null;
/**
* Get text content from selection or node
* @returns Text content string
*/
function $getTextContent(): string;
/**
* Insert nodes at current selection
* @param nodes - Nodes to insert
*/
function $insertNodes(nodes: Array<LexicalNode>): void;
/**
* Check if node is a block element
* @param node - Node to check
* @returns True if node is block element
*/
function $isBlockElementNode(node: ElementNode): boolean;
/**
* Get character offsets for selection
* @param selection - Selection to analyze
* @returns Object with anchor and focus character offsets
*/
function $getCharacterOffsets(selection: RangeSelection): {
anchor: number;
focus: number;
};Usage Examples:
import {
$getSelection,
$setSelection,
$createRangeSelection,
$createNodeSelection,
$isRangeSelection,
$isNodeSelection
} from "lexical";
// Get current selection
const selection = $getSelection();
if ($isRangeSelection(selection)) {
// Work with range selection
const text = selection.getTextContent();
selection.insertText('New text');
selection.formatText('bold');
// Check selection properties
if (selection.isCollapsed()) {
console.log('Selection is collapsed (cursor)');
}
if (selection.isBackward()) {
console.log('Selection is backward');
}
// Modify selection
selection.modify('extend', 'forward', 'word');
}
if ($isNodeSelection(selection)) {
// Work with node selection
const nodes = selection.getNodes();
selection.insertText('Replace selected nodes');
// Manipulate selected nodes
selection.add('some-node-key');
selection.delete('other-node-key');
selection.clear();
}
// Create new selections
const rangeSelection = $createRangeSelection();
const nodeSelection = $createNodeSelection();
// Set new selection
$setSelection(rangeSelection);
// Create point
const point = $createPoint('node-key', 5, 'text');
// Work with selection utilities
const textContent = $getTextContent();
const characterOffsets = $getCharacterOffsets(selection);Additional utilities for managing selection state and behavior.
/**
* Normalize selection to valid state
* @param selection - Selection to normalize
* @returns Normalized selection
*/
function $normalizeSelection__EXPERIMENTAL(selection: BaseSelection): BaseSelection;
/**
* 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;The selection system provides comprehensive tools for handling both simple text selections and complex multi-node selections. It integrates seamlessly with the command system and supports all standard text editing operations while maintaining the immutable state model that Lexical is built upon.