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.

Copy Codeimport { ProseMirror } from '@progress/kendo-vue-editor';

const { TextSelection, NodeSelection, CellSelection, AllSelection } = ProseMirror;

Text Selection

To create a TextSelection object, use the TextSelection.create method and pass the following:

• the Editor's document
• the selection anchor position
• the 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.

Copy Code(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:

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.

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.

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.

Suggested Links

• API Reference of the Editor
• ProseMirror Document Selection