selection-ranges
Version:
Selection range manipulation for contenteditable elements
76 lines (52 loc) • 1.52 kB
Markdown
# selection-ranges
[](https://github.com/nikku/selection-ranges/actions/workflows/CI.yml)
Manipulate selection ranges on `contenteditable` elements.
## API
```javascript
/**
* Return the selection on the given element as {start, end}.
*
* @param {Element} el
*
* @return {Object} selection range or null if element is not selected
*/
getRange(el);
```
```javascript
/**
* Selects the given range on the specified element.
*
* @param {Element} el
* @param {Object} range {start, end}
*/
setRange(el, range);
```
```javascript
/**
* Return true if element is part of window selection.
*
* @param {Element} el
* @return {Boolean}
*/
isSelected(el);
```
## Usage
```javascript
import {
getRange,
setRange
} from 'selection-ranges';
var node = <div contenteditable />;
let range = getRange(node);
// a range such as { start: 5, end: 10 }
// or null if node is currently not selected
setRange(node, { start: 0, end: 30 });
// sets selection range to child nodes; does not focus node
```
## Features
* Works around [browser issues](https://stackoverflow.com/questions/13949059/persisting-the-changes-of-range-objects-after-selection-in-html/13950376) and correctly handles `<br/>` and paragraph elements
* Correctly handles out-of-bounds selections
## Related
* [selection-update](https://github.com/nikku/selection-update) - compute input selection updates on external content changes
## License
MIT