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 object and pass it to the Editor through a 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, NodeSelection, CellSelection, and AllSelection.
import { ProseMirror } from '@progress/kendo-react-editor';
const { TextSelection, NodeSelection, CellSelection, AllSelection } = ProseMirror;Text Selection
To create a TextSelection object, use the TextSelection.create method and pass the following:
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.
(0)<p>(1)sample text(12)</p>(13)
(13)<p>(14)<em>sample text</em>(25)</p>(26)
(26)<p>(27)<img />(28)</p>(29)
(29)<ol>(30)
(30)<li>(31)<p>(32)text(36)</p>(37)</li>(38)
(38)</ol>(39)The following example demonstrates how to create and apply a custom TextSelection.
Drag the Slider handles to modify the selection.
Node Selection
The Editor NodeSelection is applied to a single Node.
To create a node selection:
- Use the
NodeSelection.createmethod. - Pass the following to the method:
- the Editor's document
- 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.
Cell Selection
The ProseMirror Tables 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.
All Selection
The 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:
- Create a new
AllSelectioninstance, passing the current state'sDocumentobject to the constructor. - Initialize a transaction using
state.trgetter. - Call the transaction's setSelection method, passing the created selection.
- Dispatch the transaction using Editor's view dispatch method.
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 method to create a Node from the selected range and the EditorUtils.getHtml method to retrieve the corresponding HTML content as a string. To retrieve the selected text, use the 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.