Skip to main content

Selection

Types of selection​

Lexical's selection is part of the EditorState. This means that for every update, or change to the the editor, the selection always remains consistent with that of the EditorState's node tree.

In Lexical, there are four types of selection possible:

  • RangeSelection
  • NodeSelection
  • GridSelection
  • null

RangeSelection​

This is the most common type of selection, and is a normalization of the browser's DOM Selection and Range APIs. RangeSelection consists of three main properties:

  • anchor representing a RangeSelection point
  • focus representing a RangeSelection point
  • format numeric bitwise flag, representing any active text formats

Both the anchor and focus points refer to an object that represents a specific part of the editor. The main properties of a RangeSelection point are:

  • key representing the NodeKey of the selected Lexical node
  • offset representing the position from within its selected Lexical node. For the text type this is the character, and for the element type this is the child index from within the ElementNode
  • type representing either element or text.

NodeSelection​

TODO

GridSelection​

TODO

null​

This is for when the editor doesn't have any active selection. This is common for when the editor has been blurred or when selection has moved to another editor on the page. This can also happen when trying to select non-editable components within the editor space.

Working with selection​

TODO