Editor Selection
The Kendo UI for Angular Editor component is based on the ProseMirror library and internally implements its concepts for selection. For further details, please refer to the ProseMirror Selection class documentation.
The Angular Editor supports several types of selection: TextSelection, NodeSelection, CellSelection, and AllSelection. These classes can be imported from the Editor's @progress/kendo-angular-editor package.
import { TextSelection, NodeSelection, CellSelection, AllSelection } from '@progress/kendo-angular-editor';Text Selection
Text selection enables users and developers to programmatically highlight, manipulate, or extract specific portions of content within the Editor. This is essential for implementing features such as formatting, commenting, copying, or replacing text, and for building rich editing experiences that respond to user selections.
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 to change the selection range.
Node Selection
Node selection allows users to select entire nodes (e.g., paragraphs, images, tables) within the Editor. This is useful for operations that apply to whole nodes, such as deleting, moving, or applying formatting to entire blocks of content.
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
Cell selection is a specialized form of selection used in table editing scenarios. It allows users to select individual cells or groups of cells within a table, enabling operations such as copying, pasting, or formatting specific cells.
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 or click the button to select the first cell in the table programmatically.
All Selection
The AllSelection class is a specialized selection type that represents the entire content of the document. It is useful for scenarios where you want to select all text or nodes in the Editor—such as when implementing "Select All" functionality—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
setSelectionmethod, passing the created selection. - Dispatch the transaction using Editor's view dispatch method.
const editorView: EditorView = editor.view;
const state = editorView.state;
const selection = new AllSelection(state.doc);
const transaction = state.tr;
transaction.setSelection(selection);
editorView.dispatch(transaction);
editorView.focus();The following example demonstrates how to select all content in the Editor.
Retrieve the Selected Text
For convenience, the Editor exposes a dedicated selectionText field which contains the currently selected text.
The following example demonstrates how to retrieve the text from the current selection.