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