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-vue-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.create
method. - 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.