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 Editor, 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 Editor component 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

Node Selection

The Editor NodeSelection is applied to a single Node.

To create a node selection:

  1. Use the NodeSelection.create method.
  2. 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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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:

  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 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.

Example
View Source
Edit In Stackblitz  
Change Theme: