selection-ranges
Manipulate selection ranges on contenteditable elements.
API
/**
* 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);
/**
* Selects the given range on the specified element.
*
* @param {Element} el
* @param {Object} range {start, end}
*/
setRange(el, range);
/**
* Return true if element is part of window selection.
*
* @param {Element} el
* @return {Boolean}
*/
isSelected(el);
Usage
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 and correctly handles
<br/>
and paragraph elements - Correctly handles out-of-bounds selections
Related
- selection-update - compute input selection updates on external content changes
License
MIT