setOffsets() — react Function Reference

Architecture documentation for the setOffsets() function in ReactDOMSelection.js from the react codebase.

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ setOffsets() — react Function Reference

Dependency Diagram

graph TD
  51f6074d_96a6_e994_0a5d_3d79a9aab945["setOffsets()"]
  5672f9bd_6a0a_e8f0_9857_0fb959fc7759["ReactDOMSelection.js"]
  51f6074d_96a6_e994_0a5d_3d79a9aab945 -->|defined in| 5672f9bd_6a0a_e8f0_9857_0fb959fc7759
  8ff85b49_fa19_b78a_6c6a_8dda56ae4f95["setSelection()"]
  8ff85b49_fa19_b78a_6c6a_8dda56ae4f95 -->|calls| 51f6074d_96a6_e994_0a5d_3d79a9aab945
  b7dd9a23_f94a_0723_886f_7e1028522525["getNodeForCharacterOffset()"]
  51f6074d_96a6_e994_0a5d_3d79a9aab945 -->|calls| b7dd9a23_f94a_0723_886f_7e1028522525
  style 51f6074d_96a6_e994_0a5d_3d79a9aab945 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/client/ReactDOMSelection.js lines 153–202

export function setOffsets(node, offsets) {
  const doc = node.ownerDocument || document;
  const win = (doc && doc.defaultView) || window;

  // Edge fails with "Object expected" in some scenarios.
  // (For instance: TinyMCE editor used in a list component that supports pasting to add more,
  // fails when pasting 100+ items)
  if (!win.getSelection) {
    return;
  }

  const selection = win.getSelection();
  const length = node.textContent.length;
  let start = Math.min(offsets.start, length);
  let end = offsets.end === undefined ? start : Math.min(offsets.end, length);

  // IE 11 uses modern selection, but doesn't support the extend method.
  // Flip backward selections, so we can set with a single range.
  if (!selection.extend && start > end) {
    const temp = end;
    end = start;
    start = temp;
  }

  const startMarker = getNodeForCharacterOffset(node, start);
  const endMarker = getNodeForCharacterOffset(node, end);

  if (startMarker && endMarker) {
    if (
      selection.rangeCount === 1 &&
      selection.anchorNode === startMarker.node &&
      selection.anchorOffset === startMarker.offset &&
      selection.focusNode === endMarker.node &&
      selection.focusOffset === endMarker.offset
    ) {
      return;
    }
    const range = doc.createRange();
    range.setStart(startMarker.node, startMarker.offset);
    selection.removeAllRanges();

    if (start > end) {
      selection.addRange(range);
      selection.extend(endMarker.node, endMarker.offset);
    } else {
      range.setEnd(endMarker.node, endMarker.offset);
      selection.addRange(range);
    }
  }
}