# Selection
A Selection object represents the range of the user selection in the Editor's editable area. It could point to a range of selected text, a caret position, or a set of node(s).
To set a selection in the React Editor, part of KendoReact, create a new [`Selection`](https://prosemirror.net/docs/ref/#state.Selection) object and pass it to the Editor through a [`transaction`](https://prosemirror.net/docs/ref/#state.Transaction). Selections are represented by instances and subclasses of the `Selection` class available in the `ProseMirror` object.
The React Editor component, part of KendoReact, supports several types of selection: [TextSelection](https://prosemirror.net/docs/ref/#state.TextSelection), [NodeSelection](https://prosemirror.net/docs/ref/#state.NodeSelection), [CellSelection](https://github.com/ProseMirror/prosemirror-tables/#class-cellselection-extends-selection), and [AllSelection](https://prosemirror.net/docs/ref/#state.AllSelection).
```jsx
import { ProseMirror } from '@progress/kendo-react-editor';
const { TextSelection, NodeSelection, CellSelection, AllSelection } = ProseMirror;
```
## Text Selection
To create a [TextSelection](https://prosemirror.net/docs/ref/#state.TextSelection) object, use the [TextSelection.create](https://prosemirror.net/docs/ref/#state.TextSelection^create) method and pass the following:
* the Editor's [document](https://prosemirror.net/docs/ref/#state.EditorState.doc)
* the selection [anchor](https://prosemirror.net/docs/ref/#state.Selection.anchor) position
* the [head](https://prosemirror.net/docs/ref/#state.Selection.head) position
Counting the selection positions in the Editor starts from 0 and increases when passing through a node or a character. The code snippet below shows a sample of counting the positions.
```html
(0)(1)sample text(12)
(13)
(13)(14)sample text(25)
(26)
(26)(27)![]()
(28)
(29)
(29)(30)
(30)- (31)
(32)text(36)
(37) (38)
(38)
(39)
```
The following example demonstrates how to create and apply a custom `TextSelection`.
Drag the Slider handles to modify the selection.
[Demo Source](https://demos.telerik.com/kendo-react-ui/editor/selection/text/func/source.txt)
## Node Selection
The Editor [`NodeSelection`](https://prosemirror.net/docs/ref/#state.NodeSelection) is applied to a single [`Node`](https://prosemirror.net/docs/ref/#model.Node).
To create a node selection:
1. Use the [`NodeSelection.create`](https://prosemirror.net/docs/ref/#state.NodeSelection^create) method.
2. Pass the following to the method:
* the Editor's [document](https://prosemirror.net/docs/ref/#state.EditorState.doc)
* the start position of the node that needs to be selected
Alternatively, hold the `ctrl`/`cmd` key and click on a node to select it.
The following example demonstrates how to select a node programmatically.
[Demo Source](https://demos.telerik.com/kendo-react-ui/editor/selection/node/func/source.txt)
## Cell Selection
The [ProseMirror Tables module](https://github.com/ProseMirror/prosemirror-tables/#prosemirror-table-module) provides a Schema extension for table nodes support in the Editor. The `CellSelection` class extends `Selection` and is used for selecting single or multiple cells in a table.
To apply `CellSelection`, select multiple cells in the table by dragging over them.
[Demo Source](https://demos.telerik.com/kendo-react-ui/editor/selection/cell/func/source.txt)
## All Selection
The [`AllSelection`](https://prosemirror.net/docs/ref/#state.AllSelection) type is needed for selecting the whole document content, since `TextSelection` does not handle this task well in some scenarios.
To select the whole document:
1. Create a new `AllSelection` instance, passing the current state's `Document` object to the constructor.
2. Initialize a transaction using `state.tr` getter.
3. Call the transaction's setSelection method, passing the created selection.
4. Dispatch the transaction using Editor's [view](https://www.telerik.com/kendo-react-ui-develop/components/editor/api/editor) dispatch method.
```ts
const editorView = editorRef.view;
const state = editorView.state;
const selection = new AllSelection(state.doc);
const transaction = state.tr;
transaction.setSelection(selection);
editorView.dispatch(transaction);
```
## Get Selected HTML and Text
To get the HTML corresponding to the current Editor selection, use the [`cut`](https://prosemirror.net/docs/ref/#model.Node.cut) method to create a `Node` from the selected range and the [`EditorUtils.getHtml`](https://www.telerik.com/kendo-react-ui-develop/components/editor/api/gethtml) method to retrieve the corresponding HTML content as a string. To retrieve the selected text, use the [`textContent`](https://prosemirror.net/docs/ref/#model.Node.textContent) getter of the node created from the selected range.
The following example demonstrates how to obtain the selected HTML and text from the Editor. Make a selection in the Editor and see the selected content below.
[Demo Source](https://demos.telerik.com/kendo-react-ui/editor/selection/get-html/func/source.txt)
## Suggested Links
* [React Editor](https://www.telerik.com/kendo-react-ui-develop/components/editor)
* [API Reference of the Editor](https://www.telerik.com/kendo-react-ui-develop/components/editor/api/editor)
* [ProseMirror Document Selection](https://prosemirror.net/docs/ref/#state.Selection)